react-native-bottom-sheet: v4 | Not working with Reanimate v3 | Cannot read property toString of undefined
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;
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 1
- Comments: 15 (1 by maintainers)
Commits related to this issue
- Handle SequenceExpression in babel transform (#3531) ## Description Handle function invocations created via sequence (comma) expressions. E.g. `(0, _reactNativeReanimated.useAnimatedGestureHandler... — committed to software-mansion/react-native-reanimated by scottmas 2 years ago
- Handle SequenceExpression in babel transform (#3531) ## Description Handle function invocations created via sequence (comma) expressions. E.g. `(0, _reactNativeReanimated.useAnimatedGestureHandler... — committed to wordpress-mobile/react-native-reanimated by scottmas 2 years ago
same issue as above πππππ
Hi @gorhom ,
Canβt install reanimated v3 with Bottom Sheet v4
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.
import BottomSheet from '@gorhom/bottom-sheet/src';
import like this fixes the issue. it seems metro issueObserving same issue with Reanimated 2.8.0 (Expo) on web.
It seems to be the case https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/web-support/
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