react-native-reanimated: Problems reloading Android app while using Reanimated v2

Description

When I reload Android using R + R, everything’s okay. When I reload Android using Cmd + M -> Reload, the app crashes. When I reload Android using the key R in metro console, the app crashes.

Screenshots

https://user-images.githubusercontent.com/8364345/110551740-ff335e00-812d-11eb-9f87-c9ffee59e2ab.mov

Steps To Reproduce

Clone this repo: https://github.com/nelsonprsousa/rnn-testing/tree/test-rea-v2
Use test-rea-v2 branch
yarn android

Expected behavior

The app should reload with Cmd + M -> Reload and when we send the “R” key signal in metro console. iOS works as expected on all the scenarios.

Actual behavior

Android app crashes on reload.

Snack or minimal code example

I’ve made a new react-native application, added react-native-navigation and reanimated v2. Then I added the following code:

import React from 'react';
import {SafeAreaView, StyleSheet, View, Text} from 'react-native';
import Animated, {useAnimatedStyle} from 'react-native-reanimated';

const App: () => React$Node = () => {
  const animated = useAnimatedStyle(() => {
    return {
      transform: [{scale: 1}],
    };
  });

  return (
    <SafeAreaView>
      <Animated.ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={{backgroundColor: 'gray'}}>
        <View>
          <Text style={styles.footer}>Hello Reanimated v2!</Text>
        </View>
      </Animated.ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: 'white',
  },
  footer: {
    color: 'black',
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    height: 1500,
  },
});

export default App;

Please note that animated const isn’t used. If we comment that const (that’s not being used), everything works as expected. Also tried to really use it and got the same problem, so I am publishing this way for simplicity.

Package versions

React: 16.13.1
React Native: 0.63.4
React Native Reanimated: 2.0.0
React Native Navigation: 7.11.3
NodeJS: 14.6.0

About this issue

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

Commits related to this issue

Do not call triggerUI after catalyst instance is destroyed (#1839) fixes: #1815 There can be a situation when reanimated has been destroyed but there is still a runnable on UI queue that wants to tr... — committed to software-mansion/react-native-reanimated by deleted user 3 years ago

Most upvoted comments

Still no luck. I tried to re-install reanimated couple of times. I can’t debug my app and if I use 2.0.0 I get the LogBox timeout and for 2.0.1 I get the reanimated error about installation.

Same issue here. Even after clearing derived data, removing and reinstalling node_modules, clearing metro cache…

Upon further inspection looks like NativeReanimated.useOnlyV1 is always returning true, hence the isConfiguredCheck error, which indicates that somehow InnerNativeModule is null.

@jakub-gonet any ideas on a fix?

teuscm on Apr 27, 2021

I am facing the same problem as you @teuscm. I think NativeReanimated.useOnlyV1 is always returning true too. Did you manage to fix that?

el-banna on May 6, 2021

Upon further inspection looks like NativeReanimated.useOnlyV1 is always returning true, hence the isConfiguredCheck error, which indicates that somehow InnerNativeModule is null.

same here, I debugged the code and log out NativeReanimated.useOnlyV1 and it’s always true.

This might be caused because of one of the following -

Remote debugger might be on
For iOS , when the RCTBridge gets initialized outside of the AppDelete (so AppDelegate does not implement the RCTBridgeDelegate protocol). In this circumstance the jsExecutorFactoryForBridge function from UIResponder+Reanimated.mm is never called, and therefore global.__reanimatedModuleProxy is never setup for the JS layer to use , which in turn determines the useOnlyV1 flag. Make sure RCTBridgeDelegate protocol is implemented by a subclass of UIResponder and not NSObject

shreybansal011 on Jun 27, 2021

Currently, We do not support react-native-navigation.

Szymon20000 on Mar 17, 2021

Thanks @jakub-gonet it worked! I should’ve tried this earlier, my bad.

EDIT: Guess I spoke too soon, the warning is gone, but now it’s an error:

ghost on Mar 25, 2021

Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated’s babel plugin?, js engine: hermes Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes

MainApplication.java ==> @Override protected JSIModulePackage getJSIModulePackage() { return new ReanimatedJSIModulePackage(); } import com.facebook.react.bridge.JSIModulePackage; import com.swmansion.reanimated.ReanimatedJSIModulePackage;
babel.config.js module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ "react-native-reanimated/plugin", ], };
index.js Top level import 'react-native-gesture-handler'
build.gradle project.ext.react = [ enableHermes: true, // clean and rebuild if changing ]

HosamCS on Mar 12, 2022

2\. RCTBridgeDelegate

Can you elaborate on this process? I am not using any NSObject in my AppDelegate files anywhere for RCTBridge however I am wondering if I am somehow not instantiating something correctly

CristianAThompson on Jul 28, 2021

I was able to reproduce the issue without react-native-navigation.

Szymon20000 on Mar 17, 2021

Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated’s babel plugin?, js engine: hermes Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes

MainApplication.java ==> @Override protected JSIModulePackage getJSIModulePackage() { return new ReanimatedJSIModulePackage(); } import com.facebook.react.bridge.JSIModulePackage; import com.swmansion.reanimated.ReanimatedJSIModulePackage;

babel.config.js module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ "react-native-reanimated/plugin", ], };

index.js Top level import 'react-native-gesture-handler'

build.gradle project.ext.react = [ enableHermes: true, // clean and rebuild if changing ]

don’t know why but I think this works I’ve removed import 'react-native-gesture-handler' from my index.js because its conflicting with gestureDetector but now I’m not using it because its more hell to use it with reanimated.

SymntxHomendra51 on Apr 5, 2022

Still no luck. I tried to re-install reanimated couple of times. I can’t debug my app and if I use 2.0.0 I get the LogBox timeout and for 2.0.1 I get the reanimated error about installation.

ghost on Mar 25, 2021