Я использую ReactNative, и приложение хорошо работает на ios и android, но проблема с iPhone X и выше. Он показывает черный экран сверху и снизу. Я использую NativeBase. Пожалуйста, смотрите скриншот ниже для справки.
Код
<Container style={{ backgroundColor: '#f3f3f3'}}>
<Content>
<ScrollView style={{ flex: 1,backgroundColor: '#f3f3f3' }}>
<View style={{flex: 1}} data ={ app_settings } renderItem={this.renderItem} >
<ImageBackground source={{ uri: app_settings.heroImage }} style={styles.container}>
<View style={styles.headerContainer}>
<View style={styles.hamburgerContainerHome}>
<TouchableOpacity onPress={() => this.props.navigation.dispatch(DrawerActions.openDrawer()) } >
<Image style = {styles.hamburger} source = {hamburger} />
</TouchableOpacity>
</View>
<View style={styles.logoContainer}>
<Image style = {styles.logo} source = {logo} />
</View>
</View>
<View style={styles.emptyHero}>
</View>
<View style={styles.textContainer}>
<HTML tagsStyles={htmstyles} imagesMaxWidth={15} style={{ color:'white',flex:1 }} html={app_settings.heroText} />
</View>
<View style={styles.emptyHero}>
</View>
</ImageBackground>
</View>
<Subscribe />
<View style={styles.mainContainer}>
<Text style={styles.localRep}>{app_settings.localRepHeading}</Text>
<Text style={styles.localRepBottom}>{app_settings.localRepSubHeading}</Text>
<View style={{flex: 1, paddingBottom:10,paddingTop:10,justifyContent: 'flex-start',flexDirection: 'row' }}>
<Image style = {styles.localRepImg} source = {localReps} />
</View>
<View style={styles.headerContainer}>
<ScrollView
horizontal
pagingEnabled
showsHorizontalScrollIndicator={false}
>
{contents}
</ScrollView>
</View>
</View>
</ScrollView>
</Content>
<BottomNavigation />
</Container>