React Native

Common Errors in Running a Project (React-Native)

1. Could not connect to development server Error Message :

   Could not connect to development server

   Possible Solutions :

   • Ensure Metro bundler is running :

      npx react-native start

   • Restart the app :

      npx react-native run-android

   • If using a real device, ensure both your PC and device are on the same network.

   • Try running :

    adb reverse tcp:8081 tcp:8081

2. react-native-reanimated : Reanimated 2 failed to create a worklet Error Message :

   Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?

   Possible Solutions :

   • Ensure Reanimated is installed correctly :

      npm install react-native-reanimated

   • Add the Reanimated plugin in babel.config.js:

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

   • Restart Metro with :

      npx react-native start --reset-cache

   • For more detailed information on Reanimated setup, refer to the official documentation:

     Click to open link

3. react-native-maps: Map is blank on Android Possible Solutions:

   • Add the Google Maps API key in AndroidManifest.xml:

     <meta-data
     android:name="com.google.android.geo.API_KEY"
     android:value="YOUR_API_KEY"/>

   • Ensure dependencies are installed:

      npm install react-native-maps

   • For more detailed information on Reanimated setup, refer to the official documentation:

     Click to open link

4. react-navigation: The action 'NAVIGATE' was not handled Error Message :

   Found screens inside a NavigationContainer but GestureHandlerRootView is not used

   Possible Solutions :

   • Ensure the navigator is correctly defined in App.js :

   • For Example : import { NavigationContainer } from '@react-navigation/native'; export default function App() { return (

     <Stack.Navigator> Stack.Screen name="Home" component={HomeScreen} /> </Stack.Navigator>

     ); }

   • If using nested navigators, ensure that the screen is inside the correct navigator.

   • For more detailed information on Reanimated setup, refer to the official documentation:Click to open link

5. reat-native-image-picker: Image picker doesn't work Possible Solutions :

   • Add the Google Maps API key in AndroidManifest.xml :

     <uses-permission android:name="android.permission.CAMERA"/>
     <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

   • Rebuild the app :

     npx react-native run-android

   • For more detailed information on setting up react-native-image-picker, refer to the official documentation: Click to open link

6. react-native-gesture-handler: GestureHandlerRootView is not used Error Message :

   Found screens inside a NavigationContainer but GestureHandlerRootView is not used

   Possible Solutions :

   • Wrap your app in GestureHandlerRootView :

   • For Example : import { GestureHandlerRootView } from 'react-native-gesture-handler'; export default function App() { return ( <GestureHandlerRootView style={{ flex: 1 }}> <NavigationContainer> {/* Your screens */} </NavigationContainer> </GestureHandlerRootView> ); }

   • For more detailed information on `react-native-gesture-handler` setup, refer to the official documentation: Click to open link

7. Android Gradle Plugin requires Java 17 to run Error Message :

   Android Gradle plugin requires Java 17 to run. You are currently using Java <version>

   Possible Solutions :

   • Check the Java version :

      java -version

   • If it's not Java 17, update it :

      brew install openjdk@17

   • Set the Java environment :

    export JAVA_HOME=$(/usr/libexec/java_home -v 17)

8. Peer Dependency Conflict Error

Possible Solutions :

• Error : npm WARN [package] has unmet peer dependency [dependency]

• Fix : Manually install the required peer dependency

   npm install [dependency]@[version]

• Error : npm ERR! Could not resolve dependency

• Fix : Use --legacy-peer-deps to bypass conflicts.

   npm install --legacy-peer-deps

• Error : React Native is outdated, incompatible with current dependencies

• Fix : Upgrade React Native with:\

   npx react-native upgrade
  

• Error : npm ERR! Missing or invalid node_modules

• Fix : Delete node_modules and package-lock.json, then reinstall.

   rm -rf node_modules package-lock.json

 npm install

• Error : npm ERR! Failed to build or install native modules

• Fix : Ensure Android Studio is installed and properly configured. Rebuild the app:

   npx react-native run-android

• Find deprecated package:

 npm WARN deprecated react-native-image-picker@0.0.0: This package is deprecated.

• Replace deprecated packages or update to newer versions.

   npm install react-native-image-crop-picker

• Reinstall dependencies:

   rm -rf node_modules package-lock.json

 npm install

• Error : npm ERR! React Native version mismatch

• Fix : React Native versions in package.json, then run:

 npm ERR! React Native version mismatch: React Native requires [version] but you're using [installed version].

• Error : npm ERR! React Native CLI is outdated

• Fix : Use npx instead of the global CLI:

 npx react-native run-android

Note: Make sure that you do not use the ^ (caret) symbol while installing this package. Using ^ allows npm to automatically install a newer version, which can again lead to version mismatch problems.