V4 don't works with Modal

[Jawkx]

Issue

<SafeAreaView/> not working inside Modal, using useSafeAreaInset() and it is working correctly. At V3 it was working correctly.

I created a demo repo to better demonstrate it and help reproduce the bug here, with screenshot in the README.md there

Working on V3 just broke on V4. Sorry can't really help with the problem because i'm not really familiar with native codes

Version:

package	version
react	17.0.2
react-native	0.68.1
react-native-modal	11.5.6
react-native-safe-area-context	4.2.4

This specific versioning is due to my app use this exact version**

[zsomborgellerfi]

I am experiencing the same issue after upgrading the package.

[JeremyBradshaw7]

Had the same issue myself, I think it's because in a modal it's actually outside the app-level SafeAreaProvider. What I find works when in a modal is wrapping your SafeAreaView with another SafeAreaProvider with flex 0, eg:

<SafeAreaProvider style={{flex: 0}}>
  <SafeAreaView edges={['top']}>
    {this.renderInner()}
  </SafeAreaView>
</SafeAreaProvider>

[VictorioMolina]

Same here, after upgrading my react native project to v. 0.68. To fix it, just wrap your modal childs inside a new provider, locally:

<Modal
  animationType="slide"
  visible={visible}
  hardwareAccelerated
  statusBarTranslucent
  transparent
  onRequestClose={onClose}
>
  <SafeAreaProvider>
    <Map
      searchBarPlaceholder={searchBarPlaceholder}
      showsUserLocation={showsUserLocation}
      onClose={onClose}
    />
  </SafeAreaProvider>
</Modal>

[ammarfaris]

Same here, after upgrading my react native project to v. 0.68. To fix it, just wrap your modal childs inside a new provider, locally:

<Modal
  animationType="slide"
  visible={visible}
  hardwareAccelerated
  statusBarTranslucent
  transparent
  onRequestClose={onClose}
>
  <SafeAreaProvider>
    <Map
      searchBarPlaceholder={searchBarPlaceholder}
      showsUserLocation={showsUserLocation}
      onClose={onClose}
    />
  </SafeAreaProvider>
</Modal>

Thanks @VictorioMolina and @JeremyBradshaw7 .. Almost giving up looking for solution for ios..again, thanks!

[sergeushenecz]

I have same issue after update.

[JB712]

Got the same issue but VictorioMolina got the solution ! Thanks! (https://github.com/th3rdwave/react-native-safe-area-context/issues/279#issuecomment-1159644248)

Is the issue still going on with RN0.69 and RN0.70 ? Or is it specific to 0.68 ?

[jacobp100]

Yes - you need another SafeAreaProvider inside the modal

[MetaBenji]

Why is another provider required? It's not a good pattern to have multiple providers within the app. Apps can have a lot of modals so having a provider within each modal is cumbersome and prone for developers in the future to run into issues by not knowing this is necessary.

[jacobp100]

It’s necessary because the safe area changes, and the provider establishes a new context for safe areas. Just make your own modal abstraction that includes the safe area