React Native Responsive View Iphone x - ios

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

Answer 1

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