External contexts don't work inside modal bottom sheet

[gorhom]

External contexts don't work inside modal bottom sheet

[gorhom]

hi @a8t , i have tested your use-case and it seems working fine , i would advice to try it out on a bare project and see if it works

[zhigang1992]

I think the example here should be

<BottomSheetModalProvider>
    <ExternalProvider>
        <App/>
    </ExternalProvider>
</BottomSheetModalProvider>

where Portal context is maybe at the root of the app.

If you know which context it is, you can work around it by doing

const context = useContext(ExternalContext)
return (
    <Portal>
      <ExternalContext.Provider value={context}>
        <Text style={styles.text}>
          Text to be teleported to the root host
        </Text>
     <ExternalContext.Provider>
    </Portal>
)

https://snack.expo.io/@zhigang1992/portal-example

@gorhom

[gorhom]

hi @zhigang1992 , easy way to avoid this issue is by using PortalHost and keeping it in your custom providers:

const App = () => {
  return (
    <PortalProvider>
      <CustomProvider>
        <Navigator />
        <PortalHost name="custom_host" />
      </CustomProvider>
    </PortalProvider>
  )
}