react-native: Modal component does not support SafeAreaView bottom margin
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
- Run the Snack on an iPhone X simulator
- Find
render()and note the two options (one with modal, one not) - Comment the options appropriately and see the issue
- Remember, you need to run this on an iPhone X to see the problem
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 31
- Comments: 32 (6 by maintainers)
Commits related to this issue
- support SafeAreaView bottom margin Fix for issue: https://github.com/facebook/react-native/issues/18177 — committed to elelad/react-native by elelad 5 years ago
- Removed autoresizing mask for modal host container view (#25150) Summary: Fixes #18177 . Related #24497. Autoresizing mask would conflict with `AutoLayout`. For example , it would impact `SafeAreaVie... — committed to facebook/react-native by zhongwuzw 5 years ago
- Removed autoresizing mask for modal host container view (#25150) Summary: Fixes #18177 . Related #24497. Autoresizing mask would conflict with `AutoLayout`. For example , it would impact `SafeAreaVie... — committed to M-i-k-e-l/react-native by zhongwuzw 5 years ago
You can use SafeAreaView from react-navigation. It works for me
import { SafeAreaView } from 'react-navigation';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
Having the same issue here. The SafeAreaView in react-navigation is a nice workaround but React Native’s built-in SafeAreaView should work.
Hi, guys. @damikdk, @hyungtae3713 We can use react-native-safe-area-view instead of
react-navigation. Becausereact-native-safe-area-viewpackage is used insidereact-navigation.Still having issue with this… Neither SafeAreaView from React Native nor the one from react-navigation is working for me.
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.
This bug 100% still exists and is over a year old. Has anything been done on addressing this?
@michalchudziak what is the emulateUnlessSupported property?
“SafeAreaView bottom margin is not being honored in a Modal” is still bothering me （react-native: 0.55.4）
Looking at this, and
setSafeAreaInsetsis 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:appears to fix the problem without anything weird, but seems like a hack. Will open a PR anyway.
Just as an update as of v 0.57.1 the issue still exists.