CODEWITHSUNDEEP
android-layoutviewreact-native
Thomas231
Thomas231

Reputation: 35

React native display layout

Please can you help me? Im trying to do layout like this, from begining there will be camera but if I click button driving info it will be replaced with that, here is the layout I want and here is my code. Right now all the touchablehighlits(buttons) are overlaying, + camera window should be livestream from raspberry pi camera but right now Im focusing just on layout. 

const MainScreen = () => {
return(
<View>
  <View style={{flex: 33, flexDirection: 'row', justifyContent: 'flex-start', position: 'relative'}}>
    <TouchableHighlight style={styles.button} >
        <Text style={styles.txt}> CAMERA </Text>
    </TouchableHighlight> 
  </View>
  <View style={{flex: 33, flexDirection: 'row', justifyContent: 'center', position: 'relative'}}>
    <TouchableHighlight style={styles.button} >
        <Text style={styles.txt}> Lane assistant </Text>
    </TouchableHighlight>
    <TouchableHighlight style={styles.button} >
        <Text style={styles.txt}> disconnect </Text>
    </TouchableHighlight>
    <TouchableHighlight style={styles.button} >
        <Text style={styles.txt}> driving info </Text>
    </TouchableHighlight>
  </View>
  <View style={{flex: 33, flexDirection: 'row', justifyContent: 'flex-end', position: 'relative'}}>
    <TouchableHighlight style={styles.button} >
        <Text style={styles.txt}>- </Text>
    </TouchableHighlight>
    <TouchableHighlight style={styles.button} >
        <Text style={styles.txt}> cruise control </Text>
    </TouchableHighlight>
    <TouchableHighlight style={styles.button} >
        <Text style={styles.txt}>+ </Text>
    </TouchableHighlight>
  </View>

</View>
);

}

const styles = StyleSheet.create({

 button:{
  justifyContent: 'space-between',

},
txt:{
  fontSize: 30,
}

});

enter image description here

Upvotes: 0

Views: 188

Answers (1)

Ian Vasco
Ian Vasco

Reputation: 1340

This should be fine:

export default function App() {
  return (
<View style={{flex: 1}}>
  <View style={styles.topContainer}>
    <TouchableHighlight  >
        <Text> CAMERA </Text>
    </TouchableHighlight> 
  </View>
  <View style={{flex: 1}}>
    <View style={styles.buttonRowContainer}>
    <TouchableHighlight style={styles.touchableContainer} >
        <Text > Lane assistant </Text>
    </TouchableHighlight>
    <TouchableHighlight style={styles.touchableContainer} >
        <Text>disconnect </Text>
    </TouchableHighlight>
    <TouchableHighlight style={styles.touchableContainer} >
        <Text  > driving info </Text>
    </TouchableHighlight>
  </View>
  <View style={styles.buttonRowContainer}>
    <TouchableHighlight style={styles.touchableContainer} >
        <Text  >- </Text>
    </TouchableHighlight>
    <TouchableHighlight style={styles.touchableContainer} >
        <Text  > cruise control </Text>
    </TouchableHighlight>
    <TouchableHighlight style={styles.touchableContainer} >
        <Text >+ </Text>
    </TouchableHighlight>
  </View>
  </View>
</View>
  );
}

const styles = StyleSheet.create({
  buttonRowContainer: {
flex: 1, flexDirection: 'row'
  },
  touchableContainer: {
    flex: 1, justifyContent: 'center', alignItems: 'center'
  },
  topContainer: {
    flex: 1, justifyContent: 'center', alignItems: 'center'
  }
})

I'm going to explain how flex works. If you only have one element with flex: 1 it will take all the screen space. This is usually done when you have a View which will contain all the other elements. If we want to divide the screen by two, we have to define 2 components with flex: 1

 - Main -> flex: 1
   - Children 1 -> flex: 1
   - Children 2 -> flex: 1

Children 1 will take 50% of the screen size as well as Children 2. If we want children 1 to take 66% of the screen we simply add flex: 2. Is like telling React "hey, I want you to divide the screen in 3 equal parts, Children 1 takes 2 portions of the screen when Children 2 only takes 1". Remember this will only work if your parent has set flex.

Upvotes: 1

Related Questions