v4 | Not working with Reanimate v3 | Cannot read property toString of undefined

[rado196]

Bug

I'm using React Native with Fabric, and for fabric, I need to install react-native-reanimated ^3.0.0-rc.0 to get it to work,

Environment info

Library	Version
@gorhom/bottom-sheet	4.4.2
react-native	0.69.1
react-native-reanimated	3.0.0-rc.0
react-native-gesture-handler	2.5.0

Steps To Reproduce

It happened when the screen with BottomSheet is rendered.

Reproducible sample code

import styles from './styles';
import React, { forwardRef, useCallback, useEffect, useRef } from 'react';
import { View } from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';

const SwipeableModal = forwardRef(function (
  { children, points = ['25%', '50%'] },
  ref
) {
  const refModal = useRef();

  const onChange = useCallback((index) => {
    console.log('SwipeableModal.onChange: ', index);
  }, []);

  useEffect(() => {
    ref.current = {
      open: () => refModal.current?.snapToIndex(1),
      close: () => refModal.current?.close(),
    };
  }, []);

  return (
    <View style={styles.container}>
      <BottomSheet
        ref={refModal}
        enablePanDownToClose={true}
        snapPoints={points}
        index={1}
        onChange={onChange}
      >
        {children}
      </BottomSheet>
    </View>
  );
});

export default SwipeableModal;

[hirvesh]

Observing same issue with Reanimated 2.8.0 (Expo) on web.

[gmiller1763]

I am also experiencing this issue when using Expo on the web. Any guidance would be much appreciated. Thanks!

[RobertSasak]

I think you need to somehow extend your webpack.config.js to also run react-native-reaanimated/plugin on @gorhom/bottom-sheet . See my solution for bare project here https://github.com/software-mansion/react-native-reanimated/issues/2994#issuecomment-1211247103

[tanlucvo]

Observing same issue with Reanimated 2.8.0

[Albert-Gao]

does this lib even support for the web, i found nothing on the doc

[devalnor]

does this lib even support for the web, i found nothing on the doc

It seems to be the case https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/web-support/

[Albert-Gao]

@devalnor thanks, got it now, so it depends on reanimated, if reanimated supports, than this lib supports :D

[numandev1]

import BottomSheet from '@gorhom/bottom-sheet/src'; import like this fixes the issue. it seems metro issue

[scottmas]

I get this error too on web for Expo web using reanimated 2.10.0 and I have added the required snippet for web support.

createExpoWebpackConfigAsync(
    {
      ...env,
      babel: {
        dangerouslyAddModulePathsToTranspile: ["@gorhom"],
      },
    },
    argv,
  );

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 5 days with no activity.

[anisurrahman072]

Hi @gorhom ,

Can't install reanimated v3 with Bottom Sheet v4

[kaiyes]

same issue as above 👆👆👆👆👆

[vdr-mm-quan]

Can't install reanimated v3 with Bottom Sheet v4 Facing the same issue!

[Sofronijev]

import BottomSheet from '@gorhom/bottom-sheet/src'; import like this fixes the issue. it seems metro issue

This worked for me! Upgraded to expo SKD 49 and react reanimated 3.3.0 caused sheet not to open at all, now it works again