Multi-platform React-Native app uses routes and is multi-paged. How to introduce SafeAreaView for IphoneX?

Question

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