skip to Main Content

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.

2

Answers


  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>
    
    Login or Signup to reply.
  2. I’m getting the same error. Is there any solution? When I refresh my application on the first page of the bottom sheet, it crashes.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search