Placing an element above a bottom sheet modal

Bug

I’m trying to place a View with an absolute position at the bottom (bottom: 0) where the bottom sheet modals appear and regardless of the zIndex I give the View, I am unable to place it above the modal. The View does appear above a regular Bottom Sheet, but not a modal. Any idea why and how to do this?

Environment info

“@gorhom/bottom-sheet”: “^2”, “react-native”: “https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz”, “react-native-reanimated”: “~1.13.0”, “react-native-gesture-handler”: “~1.8.0”,

Steps To Reproduce

Use the pseudo code I pasted

Describe what you expected to happen:

The red line (View) at the bottom should appear above the bottom sheet modal

Reproducible sample code

Pseudo code to illustrate:

<View>
  <BottomSheetModal
    ref={MyModalRef}
    name="MyModal"
    index={1}
    snapPoints={MyModalSnapPoints}
    topInset={topSafeArea}
    animatedPosition={animatedModalPosition}
    handleComponent={Handle}>
    ...
  </BottomSheetModal>
  <View style={{ position: 'absolute', left: 0, right: 0, bottom: 0, zIndex: 10000000000, }}>
    <View style={{ width: '100%', height: 5, backgroundColor: 'red' }} />
  </View>
</View>

[kickbk]

Mo, after playing around with this for quite a while, I came up with a pretty convenient way to address positioning requirements with your repo and react navigation. I ended up wrapping each screen in a navigator with a withModalProvider. Since it expects a functional component with no props, I had to move the navigation and route props inside the screen components (see links). Then I was able to wrap the screen component.

Note: wrapping the screens should be handled outside the navigator or it will recreate a component every time and return errors. An example of the correct way to do this:

const WrappedAccountScreen = withModalProvider(AccountScreen);

export default function AccountNavigator() {
  return (
    <AccountStack.Navigator>
      <AccountStack.Screen
        name="Account"
        component={WrappedAccountScreen} // << Do not place withModalProvider(AccountScreen) here directly.
      />
    ...

Now placing components, such as a loader, at bottom: 0 would place them right above the nav bar. This is also convenient when placing the bottom sheet for multiple screens, so no need to include them in every screen, just in the provider module.

I wanted to share this solution for anyone looking to do the same.

[gorhom]

you can add that layer to the BottomSheetHandle and limit the snapPoints to show only the handle while its loading