iPhone X - content spacer

Expo SDK
1

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)…

2

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;
         }
      }

then:

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

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?

4

A few options:

a simple iPhone X detector library: GitHub - ptelad/react-native-iphone-x-helper: A library to help you design your react-native app for notched iPhones

RN now includes a SafeAreaView - wrap your view inside of it and it should be safely away from the notch, etc. - React Native & iPhone X. Easily update and create iPhone X… | by Nader Dabit | React Native Training | Medium

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

5

You can do this from Expo using the Constants documentation.

Code:

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

See:

https://docs.expo.io/versions/latest/sdk/constants.html

Under Expo.Constants.platform

@soukupl

4 Likes
6 
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
7

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.

2 Likes
8

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

9

I really recommend using GitHub - ptelad/react-native-iphone-x-helper: A library to help you design your react-native app for notched iPhones. It checks based on screen resolution, so it will not break with the new phone models.

2 Likes
10

Use SafeAreaView
and if you need height of top/bottom safe area, you can use: SafeAreaContext - Expo Documentation
This will allow you to access safe area values via SafeAreaConsumer or via useSafeArea hook.

11

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

12

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