Display bottom sheet above react navigation bottom tab bar

[bo3hm]

Ask your Question

First of all thanks for the great package, I really appreciate your work. I'm currently trying to implement it in our app, and it works great on screens without a bottom tab bar, i.e the bottom tab bar of React Navigation created with createBottomTabNavigator. Unfortunately on screens with the tab bar it looks like this:

Ideally the bottom sheet should be stacked above the navigation, like this.

Is this currently possible or do you have any hints how to easily do this?

Sorry, if this question already came up and I've missed it, but any help would be appreciated

[ferrannp]

@bo3hm you can use https://github.com/gorhom/react-native-portal to achieve it. I did it myself too and it works.

[bo3hm]

@bo3hm you can use https://github.com/gorhom/react-native-portal to achieve it. I did it myself too and it works.

Interesting. Thanks, I'll give it a try.

[shwetsolanki]

@ferrannp do you have any example for usage?

FYI: I am using react-native-navigation

[gorhom]

@bo3hm you will need to use BottomSheetModal and add its provider to the root component of you application 👍

[mrmarktyy]

@bo3hm you will need to use BottomSheetModal and add its provider to the root component of you application 👍

Would you mind provide some snippet code to solve this issue by using BottomSheetModalProvider? thank you

[kickbk]

root component of you application

I am still unable to do this with react-navigation. The bottom tab bar is created within <Navigation /> component which is typically placed in App.js. If you surround this component with a BottomSheetModalProvider, then the modal will appear from the bottom of the window, which is "below" the tab bar (not below but same point, so it covers it).
Next, you create a <Stack.Navigator> which contains a <BottomTab.Navigator>, which in turn contains <BottomTab.Screen> components. surrounding these with a any component is very tricky, but it's possible via a custom tabBar option in the <BottomTab.Navigator>. However, it will still have no effect since the height of the window is still 100% from the bottom.
The only point where the window height of 100% is the actual SCREEN height is within the BottomTab.Screen. There, indeed, you can surround the content with a <BottomSheetModalProvider>.

The problem is that you cannot share THE SAME BottomSheetModal with several screens. If you create a BottomSheet component and place it inside each screen, it will generate a new modal for each screen.
This becomes a problem when you want to trigger showing a common BottomSheetModal via state change, because doing something like the code below will trigger each one of the BottomSheet components:

useEffect(() => {
  if (alert) {
    ref.current?.present();
  }
}, [alert, ref]);

I experimented with adjusting the handleOnContainerMeasureHeight callback by passing tabBarHeight as an option to <BottomSheetModalProvider tabBarHeight={tabBarHeight}> after fetching it with useBottomTabBarHeight, and storing in state.
It's obviously not a great solution.

@gorhom, can think of a way to surround all screens in react navigation with a provider which will emerge from above the tab bar, or some other solution? Maybe making BottomSheetModalProviderWrapper aware of the bottom tab bar?

[SylarRuby]

I get. So in your App.js you'd wrap your main stack around BottomSheetModalProvider then BottomSheetModal anywhere in your app:

App.js:

[..]
<NavigationContainer>
  <BottomSheetModalProvider>
      <RootStack />   
  </BottomSheetModalProvider>
</NavigationContainer>

[edmondso006]

I wrote a blog post about this. Here is the link if you are interested.
https://dev.to/edmondso006/react-native-custom-bottombar-navigation-with-bottomsheet-1ep9

[RemyMachado]

For those of you who are still struggling, here's a concrete example without using react-native-portal, as the author of the lib stated:

@bo3hm you will need to use BottomSheetModal and add its provider to the root component of you application

First, the provider:

// App.jsx
import { BottomSheetModalProvider } from '@gorhom/bottom-sheet'


const App = () => {
  return (
    <BottomSheetModalProvider>
      <Navigation /> // this is my app entry component (react-navigation Navigator), use yours
    </BottomSheetModalProvider>
  )
}

// Home.jsx
// inside any descendant component (e.g. App > BottomSheetModalProvider > Navigation > ** > Home)

import React, { useCallback, useMemo, useRef } from 'react'
import { BottomSheetModal } from '@gorhom/bottom-sheet'
import { View, Button, StyleSheet, Text } from 'react-native'

const Home = () => {
  const bottomSheetModalRef = useRef<BottomSheetModal>(null)

  // variables
  const snapPoints = useMemo(() => ['25%', '50%'], [])

  // callbacks
  const handlePresentModalPress = useCallback(() => {
    bottomSheetModalRef.current?.present()
  }, [])
  const handleSheetChanges = useCallback((index: number) => {
    console.log('handleSheetChanges', index)
  }, [])

  return (
    <View>
        <Button onPress={handlePresentModalPress} title="Present Modal" color="black" />
        <BottomSheetModal ref={bottomSheetModalRef} index={1} snapPoints={snapPoints} onChange={handleSheetChanges}>
          <View style={styles.contentContainer}>
            <Text>Awesome 🎉</Text>
          </View>
        </BottomSheetModal>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    justifyContent: 'center',
    backgroundColor: 'grey',
  },
  contentContainer: {
    flex: 1,
    alignItems: 'center',
  },
});

The documentation needed:

• author comment: Display bottom sheet above react navigation bottom tab bar #249 (comment)
• API: https://gorhom.github.io/react-native-bottom-sheet/modal/usage

I'm using v4 (alpha).

[tungduonghgg123]

For those of you who expects the modal to appear right away with index={1} like it works with BottomSheet:
It won't, you have to implement: bottomSheetModalRef.current?.present() like that of #249 (comment)

[0xknon]

I wrote a blog post about this. Here is the link if you are interested. https://dev.to/edmondso006/react-native-custom-bottombar-navigation-with-bottomsheet-1ep9

I followed this and this solve most of the use cases.

However, if the I need to use useNavigation, or other navigator depending functions or hook, inside the bottom sheet, I need the Portal under the navigator.

[nielpattin]

I get. So in your App.js you'd wrap your main stack around BottomSheetModalProvider then BottomSheetModal anywhere in your app:

App.js:

[..]
<NavigationContainer>
  <BottomSheetModalProvider>
      <RootStack />   
  </BottomSheetModalProvider>
</NavigationContainer>

umm, why this have 2 unlike react ? I try this and it worked ?

news?