react-native-bottom-sheet: [v4] TypeError: global.performance.now is not a function
Bug
TypeError: global.performance.now is not a function
Environment info
Library | Version |
---|---|
@gorhom/bottom-sheet | ^4.1.5 |
react-native | ^0.66.3 |
react-native-reanimated | ^2.3.0 |
react-native-gesture-handler | ^2.1.0 |
Steps To Reproduce
- All installation steps for reanimated and gesture-handler have been done
Describe what you expected to happen:
- It works =)
Reproducible sample code
import React, {useCallback, useMemo, useRef} from 'react';
import {View, Text, StyleSheet, Button} from 'react-native';
import {BottomSheetModal, BottomSheetModalProvider} from '@gorhom/bottom-sheet';
import {
gestureHandlerRootHOC,
GestureHandlerRootView,
NativeViewGestureHandler,
} from 'react-native-gesture-handler';
const App = () => {
// ref
const bottomSheetModalRef = useRef<BottomSheetModal>(null);
// variables
const snapPoints = useMemo(() => ['25%', '50%'], []);
// callbacks
const handlePresentModalPress = useCallback(() => {
bottomSheetModalRef.current?.present();
}, []);
const handleSheetChanges = useCallback((index: number) => {
console.log('handleSheetChanges', index);
}, []);
// renders
return (
<BottomSheetModalProvider>
<View style={styles.container}>
<Button
onPress={handlePresentModalPress}
title="Present Modal"
color="black"
/>
<BottomSheetModal
ref={bottomSheetModalRef}
index={1}
snapPoints={snapPoints}
onChange={handleSheetChanges}>
<View style={styles.contentContainer}>
<Text>Awesome 🎉</Text>
</View>
</BottomSheetModal>
</View>
</BottomSheetModalProvider>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
justifyContent: 'center',
backgroundColor: 'grey',
},
contentContainer: {
flex: 1,
alignItems: 'center',
},
});
export default gestureHandlerRootHOC(App);
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 1
- Comments: 22 (1 by maintainers)
Links to this issue
Commits related to this issue
- fix: chrome debugger for iOS - issue reanimated https://github.com/gorhom/react-native-bottom-sheet/issues/771 — committed to leanh128/react-native-reanimated by deleted user a year ago
V2.3.1 Use patch-package and apply this patch:
Or make change to this file:
node_modules/react-native-reanimated/src/reanimated2/core.ts
Line 386, remove this:then add this:
Hope that help, cheers!
This is reanimated issue , fix will be released soon https://github.com/software-mansion/react-native-reanimated/commit/aef72c0875b559eecb7e10abaf00e49186d7ae55, for now I would advise to downgrade it to 2.2.4
@Biplovkumar If you are having this while debugger on then please disable that and configure flipper in your project as this is the default debugger in react native 66
it helped a lot. but this is a temporary fiix. please provide a permanent solution
I’m encountering this issue as well. Doesn’t happen when running in release mode. Only when debugging mode on iOS. Haven’t tested Android. Tried clearing node_modules, Pods, Podfile.lock, and doing fresh installs. No luck.
when upgrade 2.3.1 to 2.4.1 its works
still the same issue in the latest versions.
I upgraded from 2.3.1 -> 2.4.1 and the touch events still stopped working when a view was wrapped in a pan component. This only happens when debugging. Turning off debug works (obviously not a solution).
I guess this is not solution for us. Because a lot of developers are using react-native-debugger …