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 :)

CodePudding user response：

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

Here is a snack.