A Journey into React Native Development: Installation, Challenges, Solutions & Insights

React Native is a powerful framework for building mobile applications with a single codebase for both Android and iOS platforms. My journey into React Native development has been both enlightening and challenging. In this blog, I will share the problems I encountered, the solutions I found.

What is React Native?

React Native is an open-source framework created by Facebook that allows developers to build cross-platform mobile applications using JavaScript and React. It bridges the gap between web development and native mobile development, enabling developers to create apps with a native look and feel.

Problems I Encountered and How I Solved Them

1. Android SDK and Environment Setup Issues

   Problem: While setting up the environment, I encountered an error related to the Android SDK:

   FAILURE: Build failed with an exception.
   A problem occurred configuring project ':app'.
   > [CXX1101] NDK at C:\Users\username\AppData\Local\Android\Sdk\ndk\26.1.10909125 did not have a source.properties file 

   Solution:

   • Verified the Android SDK installation path.

   • Installed the NDK (Native Development Kit) since it was the cause of problem, but wasn't necessary for my project, but still had to install.

   • Removed the problematic NDK version from C:\Users\username\AppData\Local\Android\Sdk\ndk.

   Installed the required SDK version (35.0.0) using Android Studio.

2. Android Studio Not Detected by react-native doctor

   Problem: The command npx react-native doctor reported that Android Studio was not installed, even though it was.

   (you can also ignore this problem, if you are sure that android studio is installed, in your system)

   npx react-native doctor

   Solution:

   • Verified the installation of Android Studio.

   • Checked the PATH variable to ensure the correct paths to the Android SDK and Java Development Kit (JDK) were set.

   • Reinstalled Android Studio and ensured the command-line tools were properly installed.

3. Build Errors Due to Missing Dependencies

   Problem: Gradle build errors occurred due to missing dependencies or incorrect configurations.

   Solution:

   • Ran npx react-native doctor to identify and fix environment issues.

   • Installed the required dependencies using npm.

   • Cleared the cache using npm cache clean --force and reinstalled dependencies.

4. Metro Bundler Issues

   Problem: Metro Bundler failed to start due to port conflicts.

   Solution:

   • Terminated the process occupying the port using.

   npx kill-port 8081

   • Restarted the Metro server with

    npx react-native start

Conclusion

React Native has proven to be an excellent choice for building cross-platform mobile applications. Despite the challenges during setup and development, the framework's flexibility and efficiency make it worth the effort. By sharing my journey, I hope to assist and inspire other developers venturing into React Native development.

Happy coding!