SafeAreaView react-navigation to fix iPhone X design issue:

Mahesh Nandam
Aug 31, 2018 · 3 min read
Our CoWrks App with ‘SafeAreaView’ implementation

SafeAreaView’ is a react-native API which helps to solve iPhone X design incompatibility issues, here are some challenges:

  • Apple iPhone X (1125 * 2436px dimensions) has a cut off at the top of the screen which has a sensor cluster and home indicator at the bottom of the screen
  • Due to these new design features, the react-native app has an incompatible screen alignment

Since react-native has given solution in 0.50 version, everybody starting using this from react-native, super, we fixed it. Bingo!!

When react-navigation started supporting iPhone X design fix from their side, they had removed forceInset from safeAreaView component to avoid unnecessary behavior, If you still use the forceInset in your repo then it will create design issue again, screwed!!, to overcome this issue we must use ‘SafeAreaView’ UI element from ‘react-navigation’ plugin.


Here we are going to discuss, what are the solutions and which is best the practice to solve the problem based on your project’s package versions.

Case 1:

If you have the latest version of react-navigation, you don’t need any other third party plugins like (react-native-safe-area-view) to make your app compatible to iPhone X, though you can solve this design problem by using react-navigation itself.

Implementation:

- import {SafeAreaView} from 'react-navigation';....<SafeAreaView>     <View>          <Text>SafeAreaView - Implementation</Text>     </View></SafeAreaView>....

- Make sure you pass headerStyle to navigationOptions as shown in sample router below:

const sampleRouter = createSwitchNavigator({    homeScreen: {         title: 'Home Screen', // defining the screen title as headerTitle         headerLeft: <View></View>,         headerRight: <View></View>     }},     navigationOptions:{          headerStyle:{                backgroundColor: '#212121', // this will handle the cutOff at the top the screen          },          headerTitleStyle:{                fontSize: 14,                fontWeight: '800',                textAlign: 'center',                flex: 1, // to make a header centered to the screen          }       })
  • If you fail to give headerStyle property to navigationOptions, then your app header will look incompatible due to the cutoff gap at the top of the screen.
  • With this solution, no need to use forceInset property to safeareaview component unless and until you need more control because it's already handled by the navigation plugin.

Demo repo: https://github.com/MaheshNandam/SafeAreaLayout, here I have implemented 'SafeAreaView' from 'react-navigation' and along with that you can see the customized header component implementation to the navigationOptions.


Case 2:

If you don’t have the latest react-navigation version, it's fine, but you should have min 0.50 react-native version in your project else skip to case 3.

- import {SafeAreaView, Text, View} from 'react-native';....<SafeAreaView forceInset={{ top: 'always' }} style={{ backgroundColor: '#212121', flex: 1}}><View>      <Text>SafeAreaView - Implementation</Text></View></SafeAreaView>....

Case3:

If you don't have the latest react-native and react-navigation versions, don't worry, here you can use 'react-native-safe-area-view' third-party plugin as below,

import SafeAreaView from 'react-native-safe-area-view';....<SafeAreaView forceInset={{ top: 'always' }} style={{ backgroundColor: '#212121', flex: 1}}>      <View>            <Text>SafeAreaView - Implementation</Text>      </View></SafeAreaView>....

If you want more control use ‘forceInset’-

  • ForceInset={{ object: 'Value' }}, here ‘object’ keys are — ‘top, bottom, left, right, vertical, horizontal’, and value key’s are — ‘always, never, integer’.

Wrapping Up:

- If you didn't install the latest react-navigation, go for it and use 'SafeAreaView' from react-navigation itself.

If you enjoyed this article, please applause and share, Thanks for your time.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade