question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Getting "Error: If you want to use Reanimated 2 then go through our installation steps" when remote debug is enabled

See original GitHub issue

Bug

I have a freshly initiated app, using npx react-native init, and I’ve installed the bare minimum dependencies.

When I have remote debugging enabled and running the app on iOS (simulator & device) I’m getting these errors when I try and present the BottomSheetModal:

Error: If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/installation

This error is located at:
    in BottomSheet (created by BottomSheet)
    in PortalHost (at PortalProvider.tsx:13)
    in PortalProvider (at BottomSheetModalProvider.tsx:186)
    in BottomSheetModalProviderWrapper (at App.js:55)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409)
    in BaseNavigationContainer (at NavigationContainer.tsx:91)
    in ThemeProvider (at NavigationContainer.tsx:90)
    in NavigationContainer (at App.js:28)
    in App (at shapp/index.js:12)
    in PersistGate (at shapp/index.js:11)
    in Provider (at shapp/index.js:10)
    in Root (at renderApplication.js:47)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:107)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:134)
    in AppContainer (at renderApplication.js:40)

and

Uncaught Error: If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/installation
    at isConfiguredCheck (core.ts:41)
    at makeMutable (core.ts:252)
    at useSharedValue (Hooks.ts:24)
    at useScrollable (useScrollable.ts:13)
    at BottomSheet (BottomSheet.tsx:192)
    at renderWithHooks (ReactNativeRenderer-dev.js:10121)
    at updateForwardRef (ReactNativeRenderer-dev.js:12278)
    at beginWork (ReactNativeRenderer-dev.js:14789)
    at Object.invokeGuardedCallbackProd (ReactNativeRenderer-dev.js:93)
    at invokeGuardedCallback (ReactNativeRenderer-dev.js:318)

On android (simulator & device) the app just crashes when I enable debugging. This may not be related to this issue though.

But when I disable remote debugging, everything works fine.

Environment info

Library Version
@gorhom/bottom-sheet ^3
react-native 0.64.1
react-native-reanimated ^2.1.0
react-native-gesture-handler ^1.10.3

Steps To Reproduce

  1. Run the app, either in simulator or on device
  2. enable remote debugging
  3. present the bottom sheet modal using bottomSheetModalRef.current.present();

Reproducible sample code

import React from 'react';
import {View} from 'react-native';
import Button from '../components/Button/Button';

import {BottomSheetModal, BottomSheetModalProvider} from '@gorhom/bottom-sheet';
import Text from '../components/Text/Text';

function StartScreen({navigation}) {
  const bottomSheetModalRef = React.useRef(null);

  const handleButtonPress = () => {
    bottomSheetModalRef.current.present();
  };

  return (
    <>
      <View>
        <Button variant="secondary" name={'login'} onPress={handleButtonPress}>
          Logga in
        </Button>
      </View>
      <BottomSheetModalProvider>
        <BottomSheetModal
          ref={bottomSheetModalRef}
          index={1}
          snapPoints={[268, 268]}
          keyboardBehavior="interactive"
          keyboardBlurBehavior="restore">
          <View>
            <Text>HEJ</Text>
          </View>
        </BottomSheetModal>
      </BottomSheetModalProvider>
    </>
  );
}

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

6reactions
vonovakcommented, May 27, 2021

reanimated 2 does not support remote debugging:

As the library uses JSI for synchronous native methods access, remote debugging is no longer possible. You can use Flipper for debugging your JS code, however connecting debugger to JS context which runs on the UI thread is not currently supported.

see https://docs.swmansion.com/react-native-reanimated/docs

2reactions
yolpsoftwarecommented, Nov 9, 2021

I understand that REA2 does not allow us to use remote debugging.

So, what tools do you guys use to debug your Javascript code? I have heard Flipper is the way to go, but apparently it is not supported in the Expo Managed Workflow.

Do you exclude all Reanimated 2 code (including bottom-sheet) whenever you need to debug something?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Installation | React Native Reanimated - Software Mansion
Please note that Reanimated 2 doesn't support remote debugging, only Flipper can be used for debugging. First step is to install react-native-reanimated alpha ......
Read more >
Error: Unable to Start Debugging on the Web Server
When you try to debug an ASP.NET application running on a Web server, you may get this error message: Unable to start debugging...
Read more >
Troubleshooting | React Navigation
Troubleshooting. This section attempts to outline issues that users frequently encounter when first getting accustomed to using React Navigation.
Read more >
React Native App crashes when trying to debug remotely and ...
Okay so it seems like Remote Debugging is not possible after installation of reanimated 2, using Flipper for debugging instead.
Read more >
The Current State of Debugging on React Native - Part One - G2i
Turbo modules broke remote debugging for React Native on all JavaScript. Until now you might have not been impacted by this if you...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found