React native app crashes with using @gorhom/bottom-sheet

Question

I'm using @gorhom/bottom-sheet to display bottom sheet with backdrop component but it crashes the app and gives this error

ERROR TypeError: _$$_REQUIRE(_dependencyMap[1], "./_getTag") is not a function (it is undefined)

This error is located at: in TapGestureHandler (created by BottomSheetBackdropComponent) in BottomSheetBackdropComponent in Unknown (created by BottomSheetBackdropContainerComponent)

Here is my code

import CustomButton from './custom-button';
import {
  Text,
  View,
  StatusBar,
  ScrollView,
  TouchableOpacity,
  Dimensions,
} from 'react-native';
import NavBar from '../components/navbar';
import Ionicons from 'react-native-vector-icons/Ionicons';
import FontAwesome from 'react-native-vector-icons/FontAwesome6';
import BottomSheet, {
  BottomSheetBackdrop,
  BottomSheetModal,
  BottomSheetView,
} from '@gorhom/bottom-sheet';
import {useCallback, useMemo, useRef, useState} from 'react';
import {StyleSheet} from 'react-native';
import {GestureHandlerRootView} from 'react-native-gesture-handler';
import {DataTable} from 'react-native-paper';
import SwitchSelector from 'react-native-switch-selector';

interface BottomSheetProps {
  bottomSheetRef: any;
  child: any;
  index: number;
  onDismiss?: Function;
}

const BottomSheetContainer = ({
  bottomSheetRef,
  child,
  index,
  onDismiss,
}: BottomSheetProps) => {
  const bottomSheetModalRef = useRef<any>(null);
  const snapPoints = useMemo(() => ['25%', '50%', '70%', '100%'], []);

  const renderBackdrop = useCallback(
    (props: any) => (
      <BottomSheetBackdrop
        appearsOnIndex={0}
        disappearsOnIndex={-1}
        {...props}
      />
    ),
    [],
  );

  return (
    <BottomSheetModal
      index={index}
      onDismiss={() => {
        if (onDismiss) {
          onDismiss();
        }
      }}
      ref={bottomSheetRef}
      backdropComponent={renderBackdrop}
      enablePanDownToClose={true}
      snapPoints={snapPoints}>
      <View style={styles.contentContainer}>{child}</View>
    </BottomSheetModal>
  );
};

const styles = StyleSheet.create({
  contentContainer: {
    flex: 1,
    backgroundColor: 'white',
  },
});

export default BottomSheetContainer;

I'm getting this error after opening the bottom sheet modal. If I remove backdrop component it works well but with no backdrop component. Backdrop component is needed.

Answer 1

The error you're encountering seems related to the react-native-gesture-handler library. It appears that the TapGestureHandler is not being recognized or imported correctly, leading to the error you mentioned.

npm install @gorhom/bottom-sheet react-native-gesture-handler

Make sure that import this to the top of the file:

import { TapGestureHandler } from 'react-native-gesture-handler';

wrap your component here:

<BottomSheetBackdrop appearsOnIndex={0} disappearsOnIndex={-1}>
  <TapGestureHandler>
    .
    .
    .
  </TapGestureHandler>
</BottomSheetBackdrop>