Display bottom sheet above react navigation bottom tab bar

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

[gorhom]

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

[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: https://github.com/gorhom/react-native-bottom-sheet/issues/249#issuecomment-776284053
• API: https://gorhom.github.io/react-native-bottom-sheet/modal/usage

I’m using v4 (alpha).