React-native: safearea not support iphone xs max

[joe-lz]

• [x] Review the documentation: https://facebook.github.io/react-native
• [x] Search for existing issues: https://github.com/facebook/react-native/issues
• [x] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Memory: 1.11 GB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 8.11.2 - /usr/local/bin/node
Yarn: 1.7.0 - /usr/local/bin/yarn
npm: 5.6.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
IDEs:
Android Studio: 3.1 AI-173.4819257
Xcode: 10.0/10A255 - /usr/bin/xcodebuild
npmPackages:
react: 16.5.0 => 16.5.0
react-native: 0.57.0 => 0.57.0
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

Description

[jordanmkoncz]

It will most likely be broken for both the iPhone XS Max and iPhone XR, which both have a new Native Resolution / Physical Size (1242px x 2688px and 828px x 1792px, respectively) and a new UIKit Size / Screen Size (414pt x 896pt for both).

See:

• https://useyourloaf.com/blog/supporting-iphone-xs-max-and-xr/
• https://developer.apple.com/library/archive/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html

[vonovak]

maybe related https://github.com/facebook/react-native/pull/20999

[hagaigold]

@jeodiong, Is this react-navigation screen ?
if so, it is different safe-area implementation from react-native SafeAreaView.

[SNNikitin]

I have similar issue
Maybe it's something like this https://github.com/react-navigation/react-navigation/issues/4985 ?

[joe-lz]

both not working

[joe-lz]

https://github.com/react-navigation/react-navigation/issues/4985#issuecomment-422833787

[Bijiabo]

I use react-native-safe-area-view solve this problem.

replace import { SafeAreaView } from 'react-navigation' to import { SafeAreaView } from "react-native-safe-area-view"

[joe-lz]

@Bijiabo new version of react-navigation works fine with iphone xs max

[Bijiabo]

@Bijiabo new version of react-navigation works fine with iphone xs max

Yes, my scene is our project is using a old version and have added many logic about router on it. So we'd like not to update it.

[ducpt2]

@jeodiong in my case, it only work on iphone X,
on Xs max, it not work.
react-navigation 2.17.0

[MaheshNandam]

Moving to 2.17.0 works for me

[ducpt2]

@MaheshNandam what is your native base version? My version is:
"native-base": "2.4.5"
"react-navigation": "2.17.0"

Thanks

[MaheshNandam]

hey @ducpt2, I'm not using native base.