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

simulator_screenshot_B3D309C9-ED3D-430A-9C5C-23CC0FA861C1

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 1
Comments: 22 (1 by maintainers)

Links to this issue

reactjs - Expo app throwing errors when trying to install react-native-maps-directions after full reinstall - Stack Overflow

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

Most upvoted comments

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!

+67

origamih on Dec 23, 2021

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

+28

gorhom on Dec 9, 2021

@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

ehtisham-ali-emumba on Jan 25, 2022

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!

it helped a lot. but this is a temporary fiix. please provide a permanent solution

Biplovkumar on Jan 12, 2022

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.

tomgreco on Dec 9, 2021

when upgrade 2.3.1 to 2.4.1 its works

guinduarte on Feb 22, 2022

    "react": "17.0.2",
    "react-native": "0.67.1",
    "react-native-reanimated": "^2.3.1",

still the same issue in the latest versions.

Biplovkumar on Jan 25, 2022

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

NathanNovak on Mar 14, 2022

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

I guess this is not solution for us. Because a lot of developers are using react-native-debugger …

WilliamRayo on Feb 6, 2022