# React Native ![](https://docs.pixelstrap.net/laravel/taxido/assets/images/icons/errors.png) Common Errors in Running a Project (React-Native) -------------------- 1. **Could not connect to development server**\ \ **Error Message :**
```html Could not connect to development server ``` **Possible Solutions :** * Ensure Metro bundler is running :
```html npx react-native start ``` * Restart the app :
```html npx react-native run-android ``` * If using a real device, ensure both your PC and device are on the same network.
* Try running : ```html adb reverse tcp:8081 tcp:8081 ``` 2. **react-native-reanimated : Reanimated 2 failed to create a worklet**\ \ **Error Message :**
```html Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin? ``` \ \ **Possible Solutions :**
* Ensure Reanimated is installed correctly :
```html npm install react-native-reanimated ``` * Add the Reanimated plugin in **babel.config.js**:
```html module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: ['react-native-reanimated/plugin'], }; ```
* Restart Metro with :
```html npx react-native start --reset-cache ```
* For more detailed information on Reanimated setup, refer to the official documentation: [Click to open link](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/) 3. **react-native-maps: Map is blank on Android**\ \ **Possible Solutions:**
* Add the Google Maps API key in **AndroidManifest.xml**:
```html ``` * Ensure dependencies are installed:
```html npm install react-native-maps ``` * For more detailed information on Reanimated setup, refer to the official documentation: [Click to open link](https://github.com/react-native-maps/react-native-maps#readme) 4. **react-navigation: The action 'NAVIGATE' was not handled**\ \ **Error Message :**
```html 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.Screen name="Home" component={HomeScreen} /> \ \ \ ); \ } * 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](https://reactnavigation.org/docs/getting-started)
5. **reat-native-image-picker: Image picker doesn't work**\ \ **Possible Solutions :** * Add the Google Maps API key in **AndroidManifest.xml** :
```html ``` * Rebuild the app :
```html 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](https://github.com/react-native-image-picker/react-native-image-picker) 6. **react-native-gesture-handler: GestureHandlerRootView is not used**\ \ **Error Message :**
```html 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 (\ \\ \\ {/\* Your screens \*/}\ \\ \\ );\ }
* For more detailed information on \`react-native-gesture-handler\` setup, refer to the official documentation: [Click to open link](https://github.com/software-mansion/react-native-gesture-handler#readme) 7. **Android Gradle Plugin requires Java 17 to run**\ \ **Error Message :**
```html Android Gradle plugin requires Java 17 to run. You are currently using Java ``` \ \ **Possible Solutions :** * Check the Java version :
```html java -version ``` * If it's not Java 17, update it :
```html brew install openjdk@17 ``` * Set the Java environment :
```html 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\ ```html npm install [dependency]@[version] ``` * Error : npm ERR! Could not resolve dependency * Fix : Use --legacy-peer-deps to bypass conflicts.
```html npm install --legacy-peer-deps ``` * Error : React Native is outdated, incompatible with current dependencies * Fix : Upgrade React Native with:\
```html npx react-native upgrade ``` * Error : npm ERR! Missing or invalid node\_modules * Fix : Delete node\_modules and package-lock.json, then reinstall.
```html rm -rf node_modules package-lock.json ``` ```html npm install ``` * Error : npm ERR! Failed to build or install native modules * Fix : Ensure Android Studio is installed and properly configured. Rebuild the app:
```html npx react-native run-android ``` * Find deprecated package: ```html npm WARN deprecated react-native-image-picker@0.0.0: This package is deprecated. ``` * Replace deprecated packages or update to newer versions.
```html npm install react-native-image-crop-picker ``` * Reinstall dependencies:
```html rm -rf node_modules package-lock.json ``` ```html npm install ``` * Error : npm ERR! React Native version mismatch * Fix : React Native versions in package.json, then run: ```html 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: ```html npx react-native run-android ``` {% hint style="warning" %} 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. {% endhint %}