Flex View is overlapping in React Native

Question

I am new to React Native. I have a screen which I am attaching.

My code for this screen is below for the screen

export default class Prabhuji extends React.Component {
      render() {
        return (
          <View style={styles.container}>
            <View style={styles.imageContainer}>
              <StatusBar
                barStyle="default"
              />
              <ImageBackground 
                  source={{uri:'https://wallpaperbrowse.com/media/images/4643298-images.jpg'}} 
                  style={{width: '100%', height: '100%',}}>

                  <View style={{backgroundColor: 'rgba(52, 52, 52, 0.0)', margin:15,paddingTop:5}}>
                    <Text style={{ color:"#fff", fontSize: 30,fontWeight: 'bold'}}>Shravan Pack</Text>
                    <Text style={{ color:"#fff", fontSize: 30,fontWeight: 'bold'}}>Rs.91/Day</Text>
                  </View>
              </ImageBackground>
            </View>
            <View style={styles.navContainer}>
              <View style={{width: '100%', height: 90, flexDirection:'row',marginBottom:15}}>
                  <View style={{flex:2,backgroundColor:"#E91E63"}}></View>
                  <View style={{flex:5,backgroundColor:"#EC407A"}}></View>
              </View>

              <View style={{width: '100%', height: 90, flexDirection:'row',marginBottom:15}}>
                  <View style={{flex:2,backgroundColor:"#388E3C"}}></View>
                  <View style={{flex:5,backgroundColor:"#66BB6A"}}></View>
              </View>

              <View style={{width: '100%', height: 90, flexDirection:'row',marginBottom:15}}>
                  <View style={{flex:2,backgroundColor:"#FFAB00"}}></View>
                  <View style={{flex:5,backgroundColor:"#FFD740"}}></View>
              </View>
            </View>
            <View style={styles.balanceContainer}>
              <View style={{flex:3,backgroundColor:"#388E3C"}}></View>
              <View style={{flex:5,backgroundColor:"#66BB6A"}}></View>
            </View>
          </View>
        );
      }
    }

My StyleSheet Is:

    const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  imageContainer:{
    flex:4,
    backgroundColor:'#2196F3'
  },
  navContainer:{
    flex:6,
    backgroundColor:'#E0E0E0',
    paddingTop:20,
    paddingBottom:20,
    paddingLeft:15,
    paddingRight:15,
  },
  balanceContainer:{
    flex:2,
    backgroundColor:'#424242',
    flexDirection:'row'
  },
});

but I am getting some overlapped flex View. i am using react navigation for the landing screen

My result screen I am attaching.

What wrong I am doing??

Answer 1

Add flex:1 to the three inside views of navContainer.

<View style={{width: '100%', height: 90, flex:1, flexDirection:'row',marginBottom:15}}>
    <View style={{flex:2,backgroundColor:"#388E3C"}}></View>
    <View style={{flex:5,backgroundColor:"#66BB6A"}}></View>
</View>

<View style={{width: '100%', height: 90, flex:1, flexDirection:'row',marginBottom:15}}>
    <View style={{flex:2,backgroundColor:"#FFAB00"}}></View>
    <View style={{flex:5,backgroundColor:"#FFD740"}}></View>
</View>