Doesnt work with react-native-webview

[hungdev]

Hi,

[jacobp100]

It will work for this, but you’ve not provided code so I can’t see where you’ve gone wrong. Make sure you’ve read and understood the documentation too

[hungdev]

@jacobp100 could you take a look at where I'm wrong? my App.js

    <SafeAreaProvider>
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <AppContainer />
          <Toast config={toastConfig} />
        </PersistGate>
      </Provider>
    </SafeAreaProvider>
  );

In app container

  return (
    <>
      <SafeAreaView style={{flex: 1}} edges={['top', 'bottom', 'left', 'right']}>
        <PrivacyPolicyModal
          isOpen={isOpenPrivacy}
          url={url.MunchGoPolicies} />
      </SafeAreaView>
    </>
  );

PrivacyPolicyModal.js

export default function PrivacyPolicyModal(props) {
  const {
    isOpen, onClose, url } = props;
  const insets = useSafeAreaInsets();
  console.tron.log('url', url);
  return (
    <Modal isVisible={isOpen} animationIn='slideInUp' onBackdropPress={onClose} style={{ margin: 0,  }}>
      <View>
        <TouchableOpacity>
          <Text>Done</Text>
        </TouchableOpacity>
      </View>
      <WebView source={{ uri: `https://reactnative.dev/docs/safeareaview` }}
        style={{ flex: 1 }} />
    </Modal>
  );
}

[jacobp100]

In your last example, wrap the inner contents of your modal in a SafeAreaProvider AND a SafeAreaView (in that order - SAP is on the outside)

Also, no need to wrap a modal in a SafeAreaView (second example) - it does nothing