Problems reloading Android app while using Reanimated v2

[nelsonprsousa]

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

1. Clone this repo: https://github.com/nelsonprsousa/rnn-testing/tree/test-rea-v2
2. Use test-rea-v2 branch
3. 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

[github-actions[bot]]

Issue validator

The issue is valid!

[nelsonprsousa]

I was able to debug a little bit this problem.

Here's what I found using logcat:

Using Android Studio:

[AlgoPole]

Since I loaded reanimated 2 I can't see all my applications on my simulator. I think there is trouble between Reanimated 2 and the others components and modules. Moreover, I ve got the message: cant find NativeReanimated.

[Szymon20000]

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

[Szymon20000]

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

[danilobuerger]

@Szymon20000 why does rea not support rnn? What specifically doesn't work with rnn?

[Szymon20000]

If I remember correctly rnn creates several react native instances and react-native-reanimated can work only with one instance of RN.

[nelsonprsousa]

@Szymon20000 should this bugfix be included in v2.0.1? I upgraded to this new version but still can't reload on Android 🤔

[Szymon20000]

No, It's not included in 2.0.1

[ghost]

@Szymon20000 Is there a chance that this could also cause an issue where we can't use the debugger? For me, after I upgraded to latest version of reanimated, I get this error every time when I try to turn on debugging: LogBox failed to load in 1s and the app fails to load the JS bundle after this point.

[nelsonprsousa]

No, It's not included in 2.0.1

Oh, that explains it :) Sorry, I am noob, can you teach me how can we see if a specific commit is included in a release version?

Thank you

[jakub-gonet]

@nelsonprsousa you can click on commit that was merged in PR https://github.com/software-mansion/react-native-reanimated/commit/fc7f2fb6cb802aed6a6aaf3f4436da8f37c411cc

Then under description are branches and tags with commit.

[nelsonprsousa]

@nelsonprsousa you can click on commit that was merged in PR fc7f2fb

Then under description are branches and tags with commit.

Oh, cool!

But now I am confused. @Szymon20000 said it's not included in 2.0.1, but the commit contains the 2.0.1 tag?! Maybe I am not reading it properly?

Thank you 👍

[jakub-gonet]

If I'm not mistaken we cherry-picked some commits with JS only changes to release 2.0.1. In this case, the 2.0.1 tag isn't pointing to the right place, sorry about that. This patch should be included in the next version with native changes i.e. 2.1.0.

[nelsonprsousa]

If I'm not mistaken we cherry-picked some commits with JS only changes to release 2.0.1. In this case, the 2.0.1 tag isn't pointing to the right place, sorry about that. This patch should be included in the next version with native changes i.e. 2.1.0.

I see. No worries, thanks man 🙏

[ghost]

I'm running into this after upgrade:

But the install instructions haven't been update I guess because even after following everything, I still see this warning.

[jakub-gonet]

@justinairbase clear all caches (Gradle, XCode, node_modules) and make sure you ran pod install after upgrading.

[ghost]

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:

[jakub-gonet]

Run yarn start --reset-cache to clear the metro cache. Make sure to add a plugin as well.

[ghost]

Run yarn start --reset-cache to clear the metro cache. Make sure to add a plugin as well.

Thanks for the quick reply. I. already did those things. Back to my original question: Is the installation steps still valid for v2.0.1?

[jakub-gonet]

Yes, it's still valid.

[ghost]

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.

[teuscm]

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?

[sthitajena]

Tried these and works for me

1. Upgrade node
2. Downgrade node version 10.16.0
3. Remove node module
4. npm start

[el-banna]

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

[chj-damon]

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.

[Ranta-cyber]

I had the same issue on Android and fight with it two long days but for me the solution was close the remote debugger and in Android settings, delete app data and cache and reload the app and finally all works fine

[shreybansal011]

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 -

1. Remote debugger might be on
2. 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

[CristianAThompson]

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

[h1nson]

Hi guys, finally i solved this issue by install react-native-reanimated@alpha, do not use react-native-reanimated@next!

[HosamCS]

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

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

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

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

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

[SymntxHomendra51]

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

1. MainApplication.java ==> @Override protected JSIModulePackage getJSIModulePackage() { return new ReanimatedJSIModulePackage(); } import com.facebook.react.bridge.JSIModulePackage; import com.swmansion.reanimated.ReanimatedJSIModulePackage;
2. babel.config.js module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ "react-native-reanimated/plugin", ], };
3. index.js Top level import 'react-native-gesture-handler'
4. 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.