React Native: backgroundColor in View-Component is not working - react-native

Question

I started to learn React Native two days ago and I am wondering why the backgroundColor "yellow" and "green" are not working. My whole screen is white. I thought that, because I used 3 times a flex: 0.5, that the screen is devided in 3 parts with different backgroundColors. What is the problem here? The dividing in 3 parts seems to work, because the text is, image and button are on the top 1/3, but the second 1/3 and third 1/3 are white.
Here is the code:
console.log("App executed");
return(
<View style={styles.viewStyles}>
<Text style={styles.textStyles} onPress={() => console.log("Text clicked")}>Beispielfüroben</Text>
<TouchableOpacity onPress={() => console.log("Bild clicked")}>
<Image source={require("./assets/books.jpg")} style={styles.logoStyles}></Image>
</TouchableOpacity>
<Button
style={styles.buttonStyles}
title= "Beispielbutton"
onPress={() => Alert.alert("Hallo", "I bims 1 clown",[{text: "hallo", onPress: () => console.log("Hallo clicked")}, {text: "no"}])}
></Button>
<View style={{backgroundColor: "yellow", flex: 0.5}}/>
<View style={{backgroundColor: "green", flex: 0.5}}/>
</View>
)
};
const styles = StyleSheet.create({
viewStyles: {
backgroundColor: "white",
flex: 0.5,
alignItems: 'center',
justifyContent: 'center'
},
Can you help me?
Thanks a lot :)

Answer 1

The issue here is that a View, which does not contain any children, won't fill any space unless we are telling it to do so.
The flex property will only
define how your items are going to “fill” over the available space along your main axis. Space will be divided according to each element's flex property.
Hence, let your Views occupy 100% of the available height and width. If the flex property is equal for both views, then the available space will be filled equally.
If you want to let the text, button and touchable opacity, occupy 1/3 of the screen, then you need to put them inside the same parent view with a flex of 1 as well and provide the same height and width percentage (100 in both cases).
export default function App() {
return (
<SafeAreaView style={styles.viewStyles}>
<View style={{ width: '100%', height: '100%', flex: 1, alignItems: 'center' }}>
<Text onPress={() => console.log('Text clicked')}>Beispielfüroben</Text>
<TouchableOpacity onPress={() => console.log('Bild clicked')}>
<Image
source={require('./assets/snack-icon.png')}
style={styles.logoStyles}></Image>
</TouchableOpacity>
<Button
title="Beispielbutton"
onPress={() =>
Alert.alert('Hallo', 'I bims 1 clown', [
{ text: 'hallo', onPress: () => console.log('Hallo clicked') },
{ text: 'no' },
])
}></Button>
</View>
<View
style={{
backgroundColor: 'yellow',
flex: 1,
width: '100%',
height: '100%',
}}
/>
<View
style={{
backgroundColor: 'green',
flex: 1,
width: '100%',
height: '100%',
}}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
viewStyles: {
backgroundColor: 'white',
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
logoStyles: {
width: 24,
height: 24,
},
});
The result is as follows
Here is a snack.