Trouble shooting React Native apps

react-native

When debugging React Native issues it would be helpful to have RN's demo app on your local environment to verify whether problem happens there as well or not. If problem shows there too, then it is not related to your code, but probably to your build tools/settings. If the problem doesn't happen in demo app, then it's most likely due to your code or dependencies or version of RN you are using. To install and start RN's demo app run:

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

Also make sure to alway open your project in Xcode by double clicking your project's [projectName].xcworkspace file in root of your project to avoid Xcode build errors related to missing paths/modules.

Here are some 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/facebook/react-native/issues/44501

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