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 the latest React Native versions (say 0.66 and above) With these latest RN versions

GraphQL has a role beyond API Query Language- being the backbone of application Integration
background Coditation

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:

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.

Want to receive update about our upcoming podcast?

Thanks for joining our newsletter.
Oops! Something went wrong.

Latest Articles

Optimizing Databricks Spark jobs using dynamic partition pruning and AQE

Learn how to supercharge your Databricks Spark jobs using Dynamic Partition Pruning (DPP) and Adaptive Query Execution (AQE). This comprehensive guide walks through practical implementations, real-world scenarios, and best practices for optimizing large-scale data processing. Discover how to significantly reduce query execution time and resource usage through intelligent partition handling and runtime optimizations. Perfect for data engineers and architects looking to enhance their Spark job performance in Databricks environments.

time
8
 min read

Implementing custom serialization and deserialization in Apache Kafka for optimized event processing performance

Dive deep into implementing custom serialization and deserialization in Apache Kafka to optimize event processing performance. This comprehensive guide covers building efficient binary serializers, implementing buffer pooling for reduced garbage collection, managing schema versions, and integrating compression techniques. With practical code examples and performance metrics, learn how to achieve up to 65% higher producer throughput, 45% better consumer throughput, and 60% reduction in network bandwidth usage. Perfect for developers looking to enhance their Kafka implementations with advanced serialization strategies.

time
11
 min read

Designing multi-agent systems using LangGraph for collaborative problem-solving

Learn how to build sophisticated multi-agent systems using LangGraph for collaborative problem-solving. This comprehensive guide covers the implementation of a software development team of AI agents, including task breakdown, code implementation, and review processes. Discover practical patterns for state management, agent communication, error handling, and system monitoring. With real-world examples and code implementations, you'll understand how to orchestrate multiple AI agents to tackle complex problems effectively. Perfect for developers looking to create robust, production-grade multi-agent systems that can handle iterative development workflows and maintain reliable state management.

time
7
 min read