I am working on a cross-platform app using react native which has routes and scenes described using router-flux and is multi paged. I am trying to implement SafeAreaView for IPhoneX but not having much luck with it. So far I added SafeAreaView tag as a high level component for a specific view but that moves the main view down for every platform (instead of just for IphoneX) How do I add that check to only show that behaviour for IPhoneX and also how do I add that to my scenes?
Router.js
import { Actions, ActionConst, Router, Scene } from 'react-native-router-flux';
const RouterComponent = () => {
return (
<Router
barButtonIconStyle={{ tintColor: '#7E8DA5' }}
navigationBarStyle={{ backgroundColor: '#F5F8FA', borderBottomWidth: 0 }}
// {...this.props}
>
<Scene component={NavigationDrawer} key="main" type={ActionConst.RESET}>
<Scene
navigationBarTitleImage={require('../../img/Logo.png')}
navigationBarTitleImageStyle={styles.navBarImage}
navigationBarStyle={styles.navBar}
component={Home}
key="home"
/>
//more scenes described here
</Scene>
</Router>
);
};
Home.js //has Views in the render method