React native display layout - android-layout

Question

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,
}
});

Answer 1

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.