React Native Responsive View Iphone x

Question

I face a little problem while styling for Iphone X, I used widthPercentageToDP and heightPercentageToDP from react-native-responsive-screen to make the view similar, in most of the devices it worked perfectly except Iphone X, the difference is a little bit but I want to make the view accurate as possible.

  <View style={styles.container}>
                <ImageBackground source={require('../../assets/acc.png')} style={styles.bgImg}>
                    <View style={styles.headerView}>
                    <FontAwesome style={styles.setting}  name="cog" size={hp('4%')} color="#6B6466" />
                    <Text style={styles.headerText}>My Account</Text>
                    </View >

                    <View style={styles.imgView} >
                        <Image source={require('../../assets/user.png')} style={styles.accImg}/>
                        <Text style={styles.name}> John doe</Text>
                        <Text style={styles.number}> 123456789</Text>
                    </View>
                    <View style={styles.bottomView}>
                    <View style={styles.bottomView2}>

                        <TouchableOpacity style={styles.inboxView}>
                            <Text style={styles.inboxNumber}>12</Text>
                            <Text style={styles.inboxText}>Inbox</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.inboxView}>
                            <Text style={styles.inboxNumber}>17</Text>
                            <Text style={styles.inboxText}>Sent</Text>
                        </TouchableOpacity>
                    </View>
                    </View>
                </ImageBackground>
            </View>

Style

const styles = StyleSheet.create({
    container: {
        flex: 1, backgroundColor: '#fff'
    },
    bgImg:{
        height: hp('40%'), width: '100%'
    },
    setting:{
        color:'white'
    },
    headerText:{
        flex:1,textAlign:'center',fontSize:wp('5%'),fontFamily:Fonts.Cairo,marginRight:10,color:'white'
    },
    headerView:{
        flexDirection:'row',justifyContent:'space-between',marginHorizontal:10,marginTop:hp('5%')
    },
    imgView:{
        flex:1,
        alignItems:'center'
    },
    accImg:{
        height:wp('30%'),width:wp('30%'),borderRadius:wp('15%'),marginTop:wp('3%')
    },
    name:{
        color:'white',fontFamily:Fonts.Cairo,fontSize:wp('4%'),textAlign:'center'
    },
    number:{
        color:'white',fontSize:wp('4%'),textAlign:'center'
    },
    bottomView:{
        flex:1,
        justifyContent:'flex-end'
    },
    inboxNumber:{
        color:'white',
        textAlign:'center',
        fontSize:wp('4%')
    },
    inboxText:{
        color:'white',
        textAlign:'center',
        fontSize:wp('4%'),
        fontFamily:Fonts.Cairo
    }, 
    bottomView2:{
        flexDirection:'row',
        justifyContent:'space-between',
        marginHorizontal:10,
        marginBottom:wp('3%')
    },

});

Output

There is a built-in component to help you with exactly that: SafeAreaView — dentemm, Jan 27 '19 at 18:16

RegularGuy · Answer 1 · 2019-01-28T16:07:12.143

The Iphone X is rendering the real result, this is how your layout looks like, the other devices don't have enought space for rendering and they "overlap" the views ... Look at your views, you have an imagebackground wich takes 40% of the screen , inside you have a header wich will render normally since it's higher in the render function.

Below you have a view with flex :1 and inside an image with screen based values with 2 rows of text below , if the image is lager than the view it will push the text outside of the view , invading the below neighbour view

BELOW that you have a view with the 2 touchableopacitys . they should not be overlapping. In fact, try adding overflow:'hidden' to the imgView style

------header------

///////IMAGE////////

///////Johndo///////

///////12345////////

Button//////Button

Just like the iphone is showing

<ImageBackground source={require('../../assets/acc.png')} style={styles.bgImg}>
                    <View style={styles.headerView}>
                    //here is the header
                    </View >

                    <View style={styles.imgView} >
                       // below is the image , the name , and the number
                    </View>
                    <View style={styles.bottomView}>
                    //below it should be the 2 buttons , not overlapping, BELOW
                    </View>
                </ImageBackground>

Hi Valda, if you noticed I am scaling everything depending on the size of the device using widthPercentageToDP and heightPercentageToDP so i guess they should have the same scaling — othman safadi, Jan 28 '19 at 11:01
in the edit i posted your views, and how they are indeed, not supposed to overlap. try putting `overflow:'hidden'` to styles.headerView , styles.imgView and styles.bottomView to see wich one is overlapping / going outside it's view — RegularGuy, Jan 28 '19 at 16:08

React Native Responsive View Iphone x

1 Answers1