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.

[Jordan-Nelson]

I am seeing this issue on version 0.55.2

[aplex-dex]

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.