Build a Reusable Bottom Sheet in React Native

npm install @gorhom/bottom-sheet

yarn add @gorhom/bottom-sheet@^5

npx expo install react-native-reanimated react-native-gesture-handler

npm install react-native-reanimated react-native-gesture-handler

yarn add react-native-reanimated react-native-gesture-handler

npx expo customize

module.exports = {
	presets: [
		... // don't add it here :)
	],
	plugins: [
		...
		'react-native-reanimated/plugin',
	],
};

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require("expo/metro-config");
const {
  wrapWithReanimatedMetroConfig,
} = require("react-native-reanimated/metro-config");
 
/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);
 
module.exports = wrapWithReanimatedMetroConfig(config);

npx expo start -c

npm start -- --reset-cache

yarn start --reset-cache

import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
export default function Layout({ children }) {
  return (
    <GestureHandlerRootView>
      <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
        <Stack/>
      </ThemeProvider>
    </GestureHandlerRootView>
  );
}

cd ios && pod install && cd ..

npx expo prebuild

import React, { useCallback, useRef } from "react";
import { Text, StyleSheet, View, Button } from "react-native";
import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";
 
const App = () => {
  // ref
  const bottomSheetRef = useRef<BottomSheet>(null);
 
  // callbacks
  const handleSheetChanges = useCallback((index: number) => {
    console.log("handleSheetChanges", index);
  }, []);
 
  // renders
  return (
    <View style={styles.container}>
      <Button title="expand" onPress={() => bottomSheetRef.current?.expand()} />
      <BottomSheet ref={bottomSheetRef} onChange={handleSheetChanges}>
        <BottomSheetView style={styles.contentContainer}>
          <Text>Awesome 🎉</Text>
          <Button
            title="close"
            onPress={() => bottomSheetRef.current?.close()}
          />
        </BottomSheetView>
      </BottomSheet>
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
  },
  contentContainer: {
    flex: 1,
    padding: 36,
    alignItems: "center",
  },
});
 
export default App;

import React from "react";
import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";
 
interface CustomBottomSheetProps extends BottomSheetProps {
  bottomSheetModalRef: React.RefObject<BottomSheet>;
  children: React.ReactNode;
  snapPoints?: string[];
}
 
const CustomBottomSheet: React.FC<CustomBottomSheetProps> = ({
  bottomSheetModalRef,
  children,
  snapPoints = ["30%"],
  ...props
}) => {
 
  return (
    <BottomSheet
      ref={bottomSheetModalRef}
      index={0}
      snapPoints={snapPoints}
      style={{
        zIndex: 10,
        elevation: 10,
      }}
      enableDynamicSizing={false}
      enablePanDownToClose={false}
      {...props}
    >
      <BottomSheetView style={{ flex: 1 }}>{children}</BottomSheetView>
    </BottomSheet>
  );
};
 
export default CustomBottomSheet;

import React, { useRef } from "react";
import { Text, StyleSheet, View, Button } from "react-native";
import BottomSheet from "@gorhom/bottom-sheet";
import CustomBottomSheet from "@/components/ui/CustomBottomSheet";
 
const App = () => {
  // ref
  const bottomSheetRef = useRef<BottomSheet>(null);
 
  // renders
  return (
    <View style={styles.container}>
      <Button title="expand" onPress={() => bottomSheetRef.current?.expand()} />
      <CustomBottomSheet
				children={
          <View style={styles.contentContainer}>
            <Text>Awesome 🎉</Text>
            <Button
              title="close"
              onPress={() => bottomSheetRef.current?.close()}
            />
          </View>
        }
        bottomSheetModalRef={bottomSheetRef}
      />
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
  },
  contentContainer: {
    flex: 1,
    padding: 36,
    alignItems: "center",
  },
});
 
export default App;

//...
const CustomBottomSheet: React.FC<BottomSheetProps> = ({
  bottomSheetModalRef,
  children,
  snapPoints = ["30%", "60%"],
  ...props
}) => {
  const renderBackdrop = useCallback(
    (backdropProps: any) => (
      <BottomSheetBackdrop
        {...backdropProps}
        pressBehavior="close"
        appearsOnIndex={0}
        disappearsOnIndex={-1}
      />
    ),
    []
  );
 
  return (
    <BottomSheet
      ref={bottomSheetModalRef}
      index={0}
      snapPoints={snapPoints}
      style={{
        zIndex: 10,
        elevation: 10,
      }}
      backdropComponent={renderBackdrop}
      enableDynamicSizing={false}
      enablePanDownToClose={true}
      {...props}
    >
      <BottomSheetView style={{ flex: 1 }}>{children}</BottomSheetView>
    </BottomSheet>
  );
};
 
export default CustomBottomSheet;