React-native: Modal component does not support SafeAreaView bottom margin

[LutherBaker]

SafeAreaView bottom margin is not honored inside of a Modal on an iPhone X.

Environment

Environment:
OS: macOS Sierra 10.12.6
Node: 9.7.1
Yarn: 1.5.1
npm: 5.6.0
Watchman: 4.7.0
Xcode: Xcode 9.1 Build version 9B55
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: 0.53.3 => 0.53.3

Expected Behavior

On an iPhone X, when a full screen component wrapped in a SafeAreaView renders correctly on the root view of the application, it should also render correctly when used inside of a Modal.

Actual Behavior

On an iPhone X, a full screen component wrapped in a SafeAreaView renders correctly on the root view of the application but it does not render correctly when used inside of a Modal.

Specifically, the HEADER margin is present but the FOOTER margin is missing. The full screen component goes to the bottom edge of the iPhone X (simulator).

Steps to Reproduce

1. Run the Snack on an iPhone X simulator
2. Find render() and note the two options (one with modal, one not)
3. Comment the options appropriately and see the issue
4. Remember, you need to run this on an iPhone X to see the problem

https://snack.expo.io/@lutherbaker/modal---safeareaview

[LutherBaker]

_SafeAreaView bottom margin is not being honored in a Modal_

When components wrapped in SafeAreaView are rendered to the root view:

When (the same) components wrapped in SafeAreaView are provided to a Modal:

[react-native-bot]

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest stable release?

Thank you for your contributions.

_{How to Contribute • What to Expect from Maintainers}

[LutherBaker]

I upgraded to React Native 54.0 but the provided snack demonstration still holds. The bottom safe area margin is not honored within a Modal.

Environment:
OS: macOS Sierra 10.12.6
Node: 9.7.1
Yarn: 1.5.1
npm: 5.6.0
Watchman: 4.7.0
Xcode: Xcode 9.1 Build version 9B55
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: ^16.2.0 => 16.2.0
react-native: 0.54.0 => 0.54.0

[MrGurns]

Subscribing

[ChrisJVoss]

I have the same issue. Modal overlays only the bottom SafeAreaView.

[damikdk]

You can use SafeAreaView from react-navigation. It works for me

import { SafeAreaView } from 'react-navigation';

[hyungtae3713]

it works for me thanks!

[zhanggeyi]

"SafeAreaView bottom margin is not being honored in a Modal" is still bothering me （react-native: 0.55.4）

[SwampThingTom]

Having the same issue here. The SafeAreaView in react-navigation is a nice workaround but React Native's built-in SafeAreaView should work.

[jrnelson333]

I am seeing this issue on version 0.55.2

[AlexanderPodvoyski]

Hi, guys. @damikdk, @hyungtae3713
We can use react-native-safe-area-view
instead of react-navigation. Because react-native-safe-area-view package is used inside react-navigation.

[bhardman1986]

Just as an update as of v 0.57.1 the issue still exists.

[erickjth]

I am having the same issue in 0.56.

[levibuzolic]

Still exists in 0.57.x, here's an updated Snack with a toggle to show the behaviour of in/out of a modal and using the JS/native implementations without needing to be edited: https://snack.expo.io/@levibuzolic/modal---safeareaview

[alessiocancian]

@bhardman1986 @erickjth @levibuzolic for modals and absolute positioned views use SafeAreaView from react-navigation (instead of react-native) like said before

[alvarotala]

still a thing..

[michalchudziak]

It works correctly with emulateUnlessSupported property. Without it, it's still broken. The issue is present on RNTester.

[cjpete]

Is there a recommended workaround for this? react-native-safe-area-view has some issues, and doesn't seem to be a straight replacement.

[nathggns]

This bug 100% still exists and is over a year old. Has anything been done on addressing this?

@michalchudziak what is the emulateUnlessSupported property?

[tncbbthositg]

What version of react-navigation's SafeAreaView fixed it for you guys? It's still broken for me with react-native's SafeAreaView and react-navigation's.

[oxy88]

Is there any way I can use SafeAreaView with Modal ?

[ericlewis]

Looking at this, and setSafeAreaInsets is being called often, without all of the actual values. I.e. only top value is returned, only bottom value is returned, multiple times. Doing this:

safeAreaInsets.bottom = safeAreaInsets.bottom == 0 ? safeAreaInsets.top : safeAreaInsets.bottom;

appears to fix the problem without anything weird, but seems like a hack. Will open a PR anyway.

[clanwce]

Still having issue with this.. Neither SafeAreaView from React Native nor the one from react-navigation is working for me.

[zhongwuzw]

Anyone can try https://github.com/facebook/react-native/pull/25150?

[adimshev]

Still not working (RN 0.59.9)

[nathggns]

We fixed this by using https://github.com/react-native-community/react-native-safe-area-view

[zhongwuzw]

@adimshev Hey, 0.59.9 don't apply the patch, you can cherry pick #25150.

[adimshev]

Me too, but I want to use native SafeAreaView.

[adimshev]

Is it applied in 0.59.10 ?

[zhongwuzw]

Still not, only in master branch and under test.

[adimshev]

Thank you!

And what about forceInset in native realization? Can we hope?

[caphun]

I have an older version of ReactNative so got it to work like this:

import {SafeAreaView} from 'react-navigation'
...
<Modal>
  <SafeAreaView>
    ...
  </SafeAreaView>
</Modal>

Using:

• react-native v0.59.10
• react-navigation v3.11.1