Trouble shooting React Native apps

react-native

When debugging React Native build issues in your app, it would be helpful to have React Native's demo app on your local environment to verify if the problem happens there too or not. If problem also shows in demo app, this means the issue is not related to your project, but to your build tools or your dev environment. If the problem doesn't happen in demo app, then it's most likely due to your project dependencies or react native version and so on. To install and start the demo app run this in terminal:

npx @react-native-community/cli@latest init AwesomeProject
npm start

If you need information about your setup during debug or for reporting a problem on GitHub use this command:

npx react-native info

Here are some common issues I have run into:

Android Studio fails on Build > Rebuild Project with error: Unable to make progress running work...

If you get this error add the following snippet to bottom of your android/build.gradle file:

gradle.startParameter.excludedTaskNames.addAll(
        gradle.startParameter.taskNames.findAll { it.contains("testClasses") }
)

For more info: https://github.com/gradle/gradle/issues/25747

Webview scrolling slow and without momentum on iOS

Add decelerationRate='normal' to WebView:

import WebView from 'react-native-webview';

<WebView
  style={styles.webView}
  decelerationRate='normal'
  source={{
    uri: 'myweburl',
  }}
  ...
/>

For more info: https://github.com/react-native-webview/react-native-webview/issues/1070

Hot reloading not working on connected iPhone

If you start the app via npm run ios on your usb-connected iphone and changes in code do not automatically show on your phone or if metro bundler in terminal shows this warning:

warn No apps connected. Sending "reload" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB.

Make sure your iPhone and Macbook are connected to the same WiFi network. Then go to iPhone Settings > Privacy & Security > Local Network and enable it for your app which should be listed there. Solution was suggested here: https://stackoverflow.com/a/64805856/884177

Android Studio not recognizing connected Android phone

If Android Studio doesn't recognize your USB-connected phone, go to android settings disable USB debugging in developer options and disconnect your phone and close Android Studio. Then start Android Studio again, connect your phone via USA, and enable USB debugging again. Now your phone should show up in AS's Device Manager.

Updating Pods after adding/removing dependencies

If you install or uninstall react native dependencies, it's a good practice to always cd into ios folder and run pod install there to avoid Xcode build breaking.

Unpairing iPhone

If you want to run your app on iOS simulator, but npm run ios keeps trying to run it on your iPhone device, you need to go to Xcode > Product > Destination > Manage Run Destinations and unpair your phone.

No logging in terminal when running on iOS

If you run your app via Xcode and you are not getting any logs in terminal, it could be because you used a Release scheme rather than a Debug scheme.

Unable to boot the Simulator (iOS)

If you keep getting the error Unable to boot the Simulator when trying to run iOS simulator, you need to clean Xcode cache as shown in this video: https://www.youtube.com/watch?v=38MIOYZOcHg

Android Studio throws error during build: A problem occurred starting process 'command 'npm''

  • Close Android Studio
  • From inside android folder run command: ./gradlew --stop to stop gradle daemon.
  • Start Android Studio from command line: open -a /Applications/Android\ Studio.app.
    For more info see this post.

If problem keeps reccuring, you may need to change Gradle JDK in Android Studio as suggested here: https://github.com/expo/expo/issues/28309#issuecomment-2405560702

For more trouble shooting tips go to: https://reactnative.dev/docs/troubleshooting