[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:

1. 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);

[origamih]

V2.3.1 Use patch-package and apply this patch:

diff --git a/node_modules/react-native-reanimated/src/reanimated2/core.ts b/node_modules/react-native-reanimated/src/reanimated2/core.ts
index 2e0c38a..6b134c6 100644
--- a/node_modules/react-native-reanimated/src/reanimated2/core.ts
+++ b/node_modules/react-native-reanimated/src/reanimated2/core.ts
@@ -383,9 +383,11 @@ if (!NativeReanimatedModule.useOnlyV1) {
         info: runOnJS(capturableConsole.info),
       };
       _setGlobalConsole(console);
-      global.performance = {
-        now: global._chronoNow,
-      };
+      if (global.performance == null) {
+         global.performance = {
+           now: global._chronoNow,
+         };
+       }
     })();
   }
 }

Or make change to this file: node_modules/react-native-reanimated/src/reanimated2/core.ts Line 386, remove this:

global.performance = {
     now: global._chronoNow,
 };

then add this:

if (global.performance == null) {
        global.performance = {
          now: global._chronoNow,
        };
      }

Hope that help, cheers!

[gorhom]

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