The multi-platform React-Native application uses routes and multi-page. How to implement SafeAreaView for IphoneX?

Question

The multi-platform React-Native application uses routes and multi-page. How to implement SafeAreaView for IphoneX?

I am working on a cross-platform application using the native reaction, which has routes and scenes described using router-flux, and is unloaded many times. I’m trying to implement SafeAreaView for IPhoneX, but I don’t have much luck. So far, I have added the SafeAreaView tag as a high-level component for a specific view, but this moves the main view down for each platform (and not just for IphoneX). How do I add this test to show this behavior only for IPhoneX, as well as how do I add this 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>
);
};