Modal Layering With Top Insets

[jfries289]

Current behaviour

We use modals in multiple places in our app, with some of them being nested. We share wrapped modal components as well.
We recently switched to using the react-native-paper modal component rather than the react-native one, and now our modals, which should be full screen, are being offset from the top and revealing the views beneath. I have found no way to turn this off, nor have I yet been able to find what is causing it in the react-native-paper code. I am currently attempting to use marginTop on the modals to adjust them, which sort of works, except that the adjustments differ from component to component, and between the same component reused in different places, and between iOS and Android. It's a mess.

Expected behaviour

How to reproduce?

Main modal implementations look like:

return (
    <Portal>
      <Modal
        visible={isVisible}
        onDismiss={() => { closeModal() }}
        contentContainerStyle={styles.modalContentContainer}
        testID="modal-component"
        style={[styles.modal, modalStyleOverride]}   //   <-- modalStyleOverride is passed in  with a marginTop adjustment
        theme={{ isV3: false }}
      >
        <Header ... />
        <View style={[styles.modalBody, addtlViewStyle]}>
          {useScrollView ? <ScrollView>{renderContent()}</ScrollView> : renderContent()}
        </View>
      </Modal>
    </Portal>
  )
...
const styles = StyleSheet.create({
  modal: {
    backgroundColor: colors.background,
    elevation: 0,
  },
  modalContentContainer: {
    flex: 1,
    height: "100%",
    elevation: 0,
    shadowOpacity: 0,
  },
...
})

and

  return (
      <Portal>
        <Modal visible={isVisible} onDismiss={closeModal} style={styles.modal} >
          <View style={styles.pdfViewContainer}>
            <SomeContentView ... />
          </View>
        </Modal>
      </Portal>
    )
}

const styles = StyleSheet.create({
  modal: {
    marginTop: Platform.OS === "ios" ? -64 : 0,
  },

Preview

The marked orange header should not be visible:

What have you tried so far?

Currently using marginTop to adjust, but's it's untenable

Your Environment

software	version
ios	17
android	14
react-native	0.73.11
react-native-paper	5.12.3
node	20.8.1
npm or yarn	4.6.0
expo sdk	50.0.21