Facing problems in debug mode while using the latest React Native version (say 0.66 and above)?

We are using React Native for more than 2 years now, however, recently (mainly on M1 machines) we are facing problems in debug mode when using latest React Native versions (say 0.66 and above) With these latest RN versions we are using latest version of react-navigation/drawer as well which internally uses react-native-reanimated. This reanimated library is majorly causing trouble in debug mode. 

Facts:

• https://github.com/software-mansion/react-native-reanimated/issues/2430
• https://github.com/software-mansion/react-native-reanimated/issues/1875 
• https://github.com/react-navigation/react-navigation/issues/9423 
• Solution we are providing is for core React Native project (haven’t tried on expo and you may see different behavior on expo, but solution may still work)
  

What we tried: 

• We were using the React Native version above 0.66 (^0.66.3 to be precise) and react-native-animated version was ^2.2.0. 
• One of our colleagues has an old mac machine (with intel chip) where the above versions worked without troubling him. However, on M1 mac we tried steps like below stated here - https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/
• Change in android/app/build.gradle 
• Change in babel.config.js 
• Change in MainApplication.java
• This worked if we were not running in debug mode, however, as soon as you turned to debug mode it started throwing errors. 
• Then, started setting up reanimated 2 by downloading the tgz file from here
• Select any valid build link (scroll down to end of page)
• Download .tgz file 
• Extract it using command “tar zxvf <filename>”
• Run command “yarn add file:<extracted file name>.tgz>”
• In our case it was ”yarn add file:react-native-reanimated-2.3.1.tgz”
• Then just run following command “cd android && gradlew clean” 
• While compiling it showed us errors like “one file found with OS independent path <lib/armeabi-v7a/libreactnativejni.so> 

To resolve above issue added below block of snippet in apps’ build.gradle file

packagingOptions {

pickFirst 'lib/armeabi-v7a/libreactnativejni.so'
pickFirst 'lib/x86_64/libreactnativejni.so'
pickFirst 'lib/x86/libreactnativejni.so'
pickFirst 'lib/arm64-v8a/libreactnativejni.so'
pickFirst 'lib/armeabi-v7a/libfolly_json.so'
pickFirst 'lib/x86_64/libfolly_json.so'
pickFirst 'lib/x86/libfolly_json.so'
pickFirst 'lib/arm64-v8a/libfolly_json.so'
pickFirst 'lib/armeabi-v7a/libglog.so'
pickFirst 'lib/x86_64/libglog.so'
pickFirst 'lib/x86/libglog.so'
pickFirst 'lib/arm64-v8a/libglog.so'
pickFirst 'lib/armeabi-v7a/libjscexecutor.so'
pickFirst 'lib/x86_64/libjscexecutor.so'
pickFirst 'lib/x86/libjscexecutor.so'
pickFirst 'lib/arm64-v8a/libjscexecutor.so'
pickFirst 'lib/armeabi-v7a/libhermes.so'
pickFirst 'lib/x86_64/libhermes.so'
pickFirst 'lib/x86/libhermes.so'
pickFirst 'lib/arm64-v8a/libhermes.so'

    }

• Please note above so files may change depending on what you’re using also it may not show the error at all. 
• Again, we were able to run the application without any issues in normal mode, however, as soon as we switched to debug mode, the application started crashing. This time there weren’t any logs or any clue why this was happening. This was the last step we took (in many days) to try and resolve the issue so that we could use the latest React Native version, but unfortunately there wasn’t a way out. 
• It’s said that chrome debugging support with hermes in 2.3.0-alpha.2 but it didn’t work for us (specifically on M1 machines) 
• Flipper is another option to be used for debugging instead of Hermes debugger with the latest React Native version, however, we don’t want to integrate a new component all together considering tight timelines, but one can certainly give it a try.  
  

Solution:

And thus here was our solution which worked on M1 machine which was nothing else than to downgrade the existing React Native version to:

"react-native": "0.62.0",
"react-native-reanimated": "2.2.0"
“react”: “17.0.1”

Please make sure you’re also running 
“react-native link” command, libraries are saying that they support auto-linking but not all are and that solved the issue for us. 

Few of other important points are: 

1. If you encounter duplicate resources issue run command - 
rm -rf android/app/src/main/res/raw*
rm -rf android/app/src/main/res/drawable*

2. If you encounter "unknown: ReactNative: Exception in native call"
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
‍

This works well in all modes and we could now debug the issues. I hope you will find the post insightful and if there’s any update you want us to provide please don’t hesitate to contact or please comment below.