javascript - Flex View is overlapping in React Native

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:'.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??

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./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??

Share Improve this question edited May 13, 2022 at 18:05 benomatis 5,6537 gold badges39 silver badges60 bronze badges asked Sep 25, 2018 at 2:25 Sandip Nag 9982 gold badges18 silver badges35 bronze badges

1 Can you try adding flex:1 to the three inside views of navContainer? – Chandini Commented Sep 25, 2018 at 2:36
1 Thank you it is done. Thanks for this help. – Sandip Nag Commented Sep 25, 2018 at 2:38

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

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>

The solution might work there, but further development will held up the work. I have modified the code totally and also optimized for mobile view and scrolling.

Hope you will like the interface.

import * as React from 'react';
import {
  StyleSheet,



View,
  Text,
  ImageBackground,
  ScrollView,
} from 'react-native';

export default class Prabhuji extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.imageContainer}>
          <ImageBackground
            source={{
              uri:
                'https://wallpaperbrowse./media/images/4643298-images.jpg',
            }}style={{width:"100%", height:"100%", marginTop:50}}>
            <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>
        <ScrollView style={styles.navContainer}>
          <View
            style={styles.contentBars}>
            <View style={{ flex: 0.3, backgroundColor: '#E91E63' }}></View>
            <View style={{ flex: 0.7, backgroundColor: '#EC407A' }}></View>
          </View>
          <View
            style={styles.contentBars}>
            <View style={{ flex: 0.3, backgroundColor: '#388E3C' }}></View>
            <View style={{ flex: 0.7, backgroundColor: '#66BB6A' }}></View>
          </View>
          <View style={styles.contentBars}>
            <View style={{ flex: 0.3, backgroundColor: '#FFAB00' }}></View>
            <View style={{ flex: 0.7, backgroundColor: '#FFD740' }}></View>
          </View>
          <View style={styles.contentBars}>
            <View style={{ flex: 0.3, backgroundColor: '#388E3C' }}></View>
            <View style={{ flex: 0.7, backgroundColor: '#66BB6A' }}></View>
          </View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor: '#aff',
  },
  imageContainer: {
    flex: 0.3,
    backgroundColor: '#2196F3',
  },
  navContainer: {
    flex: 1,
    backgroundColor: '#E0E0E0',    
  },
  contentBars: {
    // width: '100%',
    height: 120,
    flexDirection: 'row',
    margin: 15,
  },
});

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Flex View is overlapping in React Native - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)