iPhone X - content spacer

When running on iPhone X with latest expo app, I need to add extra spacer to top and bottom… Is there any prefered way without detecting specific mobile device (iPhone X) based on model number / resolution + platform / … ?

We have time to find a solution :slight_smile: I just looking for ideal solution without locking on device type table to decide… (but I think, that this will be the solution… just detect iPhone with notch and set special content spacers)…

ok, I have “solution” that works for me…
Idea is, that if platform is iOS and statusBarHeight is greater than 40, then this is an iPhone X…

iPhone has statusBarHeight of 20 or 40 with in-call status.
iPhone X has statusBarHeight 44.

Please note, that this header / footer margin / padding is for my specific usecase and app frame. Take this as an idea to work with…

in app.js constructor:

if (Platform.OS == "android") {
         this.appSpacerHeader = Constants.statusBarHeight;
      } else {
         if (Constants.statusBarHeight > 20) {
            this.appSpacerHeader = Constants.statusBarHeight - 20;
            this.appSpacerFooter = 25;


   <View style={{ height: this.appSpacerHeader }} />
   <Header> ... </Header>
   <Footer style={{ paddingBottom: this.appSpacerFooter }}>....</Footer>

I’ve been searching quite a bit and there’s no additional information on this. This works, but we can’t rely on it moving forward with new phones being released in the future.

Any contributor comments on detecting iPhone X?

A few options:

a simple iPhone X detector library: https://github.com/ptelad/react-native-iphone-x-helper

RN now includes a SafeAreaView - wrap your view inside of it and it should be safely away from the notch, etc. - https://medium.com/react-native-training/react-native-iphonex-92ff511282af

There’s also a JS-only SafeAreaView - https://github.com/react-community/react-native-safe-area-view

You can do this from Expo using the Constants documentation.


Platform.OS == 'ios' && Expo.Constants.platform.ios.model.toLowerCase() == 'iphone x'



Under Expo.Constants.platform


iPhoneX            = "iPhone X",
    iPhoneXS           = "iPhone XS",
    iPhoneXSMax        = "iPhone XS Max",
    iPhoneXR           = "iPhone XR",

It didn’t work for iphone xr, so I prefer

Platform.OS == 'ios' && Expo.Constants.platform.ios.model.toLowerCase().includes('iphone x')
1 Like

Does anybody know better way to solve this? I have a situation that I can’t use SafeAreaView.

Solution above (platform.ios.model) is not working for simulator and it’s annoying, so I ended up writing something like

import Constants from 'expo-constants'
const isiPhoneX = Platform.OS == 'ios' && (
  Constants.platform.ios.model.toLowerCase().includes('iphone x') ||
  Constants.deviceName.toLowerCase().includes('iphone x')
const footerSpaceHeight = isiPhoneX ? 34 : 0

I wish if there was a property like Constants.statusBarHeight.


Now you need Constants.deviceName.toLowerCase().includes('iphone 11') as condition as well.

I really recommend using https://github.com/ptelad/react-native-iphone-x-helper. It checks based on screen resolution, so it will not break with the new phone models.


Use SafeAreaView
and if you need height of top/bottom safe area, you can use: https://docs.expo.io/versions/latest/sdk/safe-area-context/
This will allow you to access safe area values via SafeAreaConsumer or via useSafeArea hook.

Thank you for recommendation! I liked the simplicity of this library.

Thanks this seems to work. I’ll still do more testing but looks promising!