Getting "Error: If you want to use Reanimated 2 then go through our installation steps" when remote debug is enabled
See original GitHub issueBug
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
- Run the app, either in simulator or on device
- enable remote debugging
- 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:
- Created 2 years ago
- Comments:7 (1 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
reanimated 2 does not support remote debugging:
see https://docs.swmansion.com/react-native-reanimated/docs
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?