Select component dropdown does not work with gorhom bottom sheet

[saimarshadsaim31]

I am using a select component in my project; overall, it works fine in normal places. But I also have a use case in which I want to use a select component inside of a bottom sheet. I am using the Gorhom bottom sheet in my project. Now the issue I am facing is that when I click the select option the dropdown appears underneath the bottom sheet I have tried to give styles like larger z index but the dropdown always renders below bottom sheet and when I close the bottom sheet it only stays there for a little bit and then disappears. Can some help me solve this???

[mrzachnugent]

Can you try this pattern?

If that doesn't work, the issue might be where you place the PortalHost in your root layout. It should not be the child of the bottom-sheet provider.

[saimarshadsaim31]

Hey @mrzachnugent, thanks for the reply. It was indeed a dumb mistake on my end. This was the problem:

 <BottomSheetModalProvider>
          <StatusBar style={isDarkColorScheme ? 'light' : 'dark'} />
          <Stack>
            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
            <Stack.Screen name="onboarding" options={{ headerShown: false }} />
            <Stack.Screen name="define-your-goals" options={{ headerShown: false }} />
            <Stack.Screen name="property-detail/[title]" options={{ headerShown: false }} />
          </Stack>
          <PortalHost />
</BottomSheetModalProvider>

Now every thing works fine.