Botton tab don't respect safe area in iOS 14.2.1 (iPhone 12)

[rvieceli]

Current Behavior
Only in iPhone 12 (access only in PRO from user) with version 14.2.1 (works fine in 14.2)

On IPhone X and IPhone11 ios 14.2.1 is not available (when I wrote this issue). With IOS 14.2 works fine in IPhone X, 11 and 12.

Bottom tab don't respect safe area.

Expected Behavior

Your Environment

software	version
iOS or Android	iOS 14.2.1
@react-navigation/native	5.8.10
@react-navigation/bottom-tabs	5.11.2
@react-navigation/core	5.14.4
@react-navigation/stack	5.12.8
react-native-screens	2.10.1
react-native	0.63.2
expo	39.0.4
node	12.13.1
npm or yarn	npm 6.12.1

[github-actions]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/native (found: 5.14.4, latest: 5.8.10)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[katye333]

This is happening with version 5.8.10 too

[github-actions]

Hey! Thanks for opening the issue. Seems that this issue issue related to react-native-safe-area-context library which is a dependency of React Navigation. Can you also post your issue in this repo so that it's notified to the maintainers of that library? This will help us fix the issue faster since it's upto the maintainers of that library to investigate it.

[xclidongbo]

This is happening with version 3.13.0 too

[ghostknow]

same too, anyone can help?
I'm using react-navigation v2

[jeremiahk]

I am seeing this issue on iPhone 12, 12 pro and 12 pro max running 14.2. Does not show up on an iPhone 12 mini. It does not appear to be related to react-native-safe-area-context. I set up a simple project just using react-native-safe-area-context and it worked as expected.

[HughBerryman]

sadly the following didn't fix it for me but it worked for some others. Lmk if it works for any of you
callstack/react-native-paper#2323 (comment)

btw, I'm having the exact same results as you @jeremiahk

here's another issue too ref'ing this: #8842

[github-actions]

Hey! Thanks for opening the issue. Can you provide a minimal repro which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible.

The easiest way to provide a repro is on snack.expo.io. If it's not possible to repro it on snack.expo.io, then please provide the repro in a GitHub repository.

[jeremiahk]

I was able to get it working by following this comment. In my case, all I needed to do was wrap my AppContainer in a SafeAreaProvider.

[rvieceli]

Hey guys, I discovered my problem, when try to do some fix, I saw old code to identify when running on iphonex checking screen size, and for iphone 12 is different.

If you are using packages like react-native-iphone-x-helper, check for updates. if you are using custom code like me, chek it

The strange thing is the screen size on my iPhone 12 pro max simulator, because keep using Iphone 11 screen size.

[whhlulu]

I'm using react-navigation v2

I'm using react-navigation v2,too.
How did you solve it？

[askielboe]

Had similar safe area issues on iPhone 12 running iOS 14.2. I found that the issues disappeared when downgrading Xcode from 12 to 11.

[R-yan]

在运行iOS 14.2的iPhone 12上存在类似的安全区域问题。我发现将Xcode从12降级到11时问题消失了。

Had similar safe area issues on iPhone 12 running iOS 14.2. I found that the issues disappeared when downgrading Xcode from 12 to 11.

Look at the source code, the essence is guard iphone12 model screen size to do adaptation

[HughBerryman]

callstack/react-native-paper#2419

quick update from my end: updating to v4.5.0 fixed it for me

[HerbertLim]

After upgrading my iPhone from X to 12 Pro, I experienced this issue.
I upgraded all npm packages including react-navigation related packages, but this issue remained.
I finally upgraded react-native-paper from 3.12.0 to 4.7.0, and this issue was resolved.
Major version upgrade of react-native-paper to 4.x seemed to be the key to resolve this issue. :)