iPhone X - content spacer


#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

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: 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


#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