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.

[piotr-sobczyk]

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

@JonasHiltl I think this has been recently done in 5.1.5

[robertmunceanu]

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.

I am also facing this issue.

• If I have the PortalProvider inside the BottomSheetModalProvider, the bottom sheet modals do not present
• If the BottomSheetModalProvider is inside the PortalProvider, the components inside the Portal do not show

[litsdm]

I'm having the same issue since upgrading to @gorhom/bottom-sheet >= 5.1.5. What worked for me was Maisaan's answer in this thread and I just had to modify the zIndex of my Portal's child View container for it to display on top of the BottomSheetModal like so:

<Portal hostName="rootHost">
    <View {...props} style={[StyleSheet.absoluteFill, { zIndex: 1 }]}>
        {children}
    </View>
</Portal>

[YaoHuiJi]

I am also facing this issue.

• If I have the PortalProvider inside the BottomSheetModalProvider, the bottom sheet modals do not present
• If the BottomSheetModalProvider is inside the PortalProvider, the components inside the Portal do not show

hi @robertmunceanu , @Maisaan , have you found a solution? I tried both zIndex and FullWindowOverlay, but neither worked☹️

[robertmunceanu]

I am also facing this issue.

• If I have the PortalProvider inside the BottomSheetModalProvider, the bottom sheet modals do not present
• If the BottomSheetModalProvider is inside the PortalProvider, the components inside the Portal do not show

hi @robertmunceanu , @Maisaan , have you found a solution? I tried both zIndex and FullWindowOverlay, but neither worked☹️

Hi @YaoHuiJi ,
I needed the portal provider, and had to create a custom bottom sheet instead of using the BottomSheetModalProvider :/

[YaoHuiJi]

I am also facing this issue.

• If I have the PortalProvider inside the BottomSheetModalProvider, the bottom sheet modals do not present
• If the BottomSheetModalProvider is inside the PortalProvider, the components inside the Portal do not show

hi @robertmunceanu , @Maisaan , have you found a solution? I tried both zIndex and FullWindowOverlay, but neither worked☹️

Hi @YaoHuiJi , I needed the portal provider, and had to create a custom bottom sheet instead of using the BottomSheetModalProvider :/

Hi @robertmunceanu , I solved the issue in my app following this answer. , I’m not sure if this will help you, but you can give it a try.

<PortalProvider>
    <BottomSheetModalProvider>
         <>{children}</>
         <PortalHost name="OverlayProvider" />  // Make sure it’s the last children.
    </BottomSheetModalProvider>
</PortalProvider>

<Portal hostName="OverlayProvider">
  // your portal view
</Portal>