Portal not displayed when it's inside BottomSheetModal

[JonasHiltl]

I have an App with a TabNavigator and in one of the Tab screens I display a BottomSheetModal. The provider for this BottomSheetModal is in the same screen, since I want the model to be displayed behind the TabBar.

But I also have a Portal in the model which I want to display above the TabBar, so I placed my PortalProvider and PortalHost outside of the screen above my TabNavigator, notably above the BottomSheetModalProvider. When the Portal has no custom hostname it uses the BottomSheetModalProvider as the PortalProvider, which I expected, since BottomSheetModalProvider wraps a PortalProvider.

But when a hostName is specified (see example below) the Portal is not displayed at all, like the PortalHost couldn't be found. So it skips the BottomSheetModalProvider but does not find the PortalHost above it.

<App>
  <PortalProvider>
    <TabNavigator>
      <TabScreen/>
    <TabNavigator/>
    <PortalHost name="AboveTabBar" />

An example screen in the TabNavigator:

const TabScreen = () => {
  return (
    <BottomSheetModalProvider>
      <Portal hostName="AboveTabBar">
        <Text>test</Text>
      </Portal>
      <BottomSheetModal>
        ...
      </BottomSheetModal>
    </BottomSheetModalProvider>
  )
}

Could this be fixed by using a custom hostName inside BottomSheetModalProvider, so that custom portals don't use that as the host?

[enchorb]

@gorhom bump?

[Maisaan]

I too am having this issue, I am making a select component and using it inside of a BottomSheetModal

This works, however my component is rendered on the same level as the bottom sheet. If i move the PortalHost outside of the BottomSheetModalProvider then the component does not render at all.

<PortalProvider> 
  <BottomSheetModalProvider> 
    { ... rest of code }
    <PortalHost name="SelectHost" /> 
  </BottomSheetModalProvider> 
</PortalProvider>

In the docs the use of FullWindowOverlay is recommended. However, again, if the PortalHost is outside of the BottomSheetModalProvider then i do not see my component being rendered, and if it is inside of the BottomSheetModalProvider then something is rendered and blocking the UI but nothing is displayed. This may part be due to the fact that i cannot pass the style prop to FullWindowOverlay as this property does not exist / is not supported by it.