React Native: Emulator stuck on "loading from localhost:8081.."

Question

Screenshot from Android phone running the app

I am working on a react-native project and I run it on my android phone via USB debugging and the command "react-native run android".

It was working all fine but now even though the build is successful, the app gets stuck on the white screen "loading from localhost:8081". No changes were made in any of the app files.

I tried running the react-native demo app (using react-native init) and I still face the same issue.

Solutions I tried but still same issue:

1. rm -rf node_modules && npm install
2. adb reverse tcp:8081 tcp:8081
3. Running it on Android Emulator from Android Studio.
4. Using the command npm run android

This is what shows up in the command line:

lenovo@lenovo-Lenovo-ideapad-500S-14ISK:~/IRMSold$ react-native run-android Scanning folders for symlinks in /home/lenovo/IRMSold/node_modules (6ms) JS server already running. Building and installing the app on the device (cd android && ./gradlew installDebug)...

Configure project :app WARNING: Configuration 'compile' is obsolete and has been replaced with 'implementation' and 'api'. It will be removed at the end of 2018. For more information see: http://d.android.com/r/tools/update-dependency-configurations.html

Configure project :react-native-google-signin WARNING: Configuration 'compile' is obsolete and has been replaced with 'implementation' and 'api'. It will be removed at the end of 2018. For more information see: http://d.android.com/r/tools/update-dependency-configurations.html WARNING: The specified Android SDK Build Tools version (23.0.3) is ignored, as it is below the minimum supported version (27.0.3) for Android Gradle Plugin 3.1.1. Android SDK Build Tools 27.0.3 will be used. To suppress this warning, remove "buildToolsVersion '23.0.3'" from your build.gradle file, as each version of the Android Gradle Plugin now has a default version of the build tools.

Configure project :react-native-vector-icons WARNING: Configuration 'compile' is obsolete and has been replaced with 'implementation' and 'api'. It will be removed at the end of 2018. For more information see: http://d.android.com/r/tools/update-dependency-configurations.html WARNING: The specified Android SDK Build Tools version (26.0.1) is ignored, as it is below the minimum supported version (27.0.3) for Android Gradle Plugin 3.1.1. Android SDK Build Tools 27.0.3 will be used. To suppress this warning, remove "buildToolsVersion '26.0.1'" from your build.gradle file, as each version of the Android Gradle Plugin now has a default version of the build tools.

Task :app:installDebug Installing APK 'app-debug.apk' on 'Lenovo X3a40 - 6.0.1' for app:debug Installed on 1 device.

BUILD SUCCESSFUL in 13s 66 actionable tasks: 1 executed, 65 up-to-date Running adb -s 567bf688 reverse tcp:8081 tcp:8081 Starting the app on 567bf688 (adb -s 567bf688 shell am start -n com.irms/com.irms.MainActivity)... Starting: Intent { cmp=com.irms/.MainActivity }

Kindly help me out, as I tried every other fix I could find online.

Answer 1

In my case, problem is due to file handle limit. Once, I refresh the limit by following command, application starts to running without any problem.

echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_user_watches && echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_queued_events && echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_user_instances && watchman shutdown-server

I am using Ubuntu 18.04.

Answer 2

Check if the device has the computer 8081 port forwarded by using

adb reverse --list

If you don't get any results you should create a reverse socket connection so your device can access the Metro Server

adb reverse tcp:8081 tcp:8081

For some reason it still didn't work, so I pressed ENTER in this window (Metro Bundler Window) and waited until it got to 100 % and then the app began displaying on my Phone.

Answer 3

My problem was with Watchman, which was somewhat tricky to identify because React Native happily bundled my app, transferred and launched the APK ! It kept kicking up an error about permissions on /tmp/name-state (where name is your name) so I had to chmod 0700 /tmp/name-state (to reduce permissions on that directory) then create a new app npm react-native init appName after that I started Metro again from another terminal (make sure you're in the new project directory) and ran npm react-native start. Then I could launch appName via react-native run-android.

Answer 4

You should waiting the state of package server to run perfectly. Until "Loading dependency graph, done.". If doesn't you will be stuck in loading from localhost 8081.

Answer 5

Have you tried this?

WARNING: The specified Android SDK Build Tools version (23.0.3) is ignored, as it is below the minimum supported version (27.0.3) for Android Gradle Plugin 3.1.1. Android SDK Build Tools 27.0.3 will be used. To suppress this warning, remove "buildToolsVersion '23.0.3'" from your build.gradle file, as each version of the Android Gradle Plugin now has a default version of the build tools.

Answer 6

Maybe your 8081 port is already in use.

Try the first solution in here https://facebook.github.io/react-native/docs/troubleshooting

$ sudo lsof -i :8081 $ kill -9

Answer 7

I would like to share my experience

On android emulator react-native run-android was freezing at loading. While the same was running on iOS simulator. In my case I enabled debug js remotely on iOS simulator and found that i had supplied string value to a Boolean property.Once i corrected the issue it ran on android emulator.

Lesson Learnt : Android build are not that forgiving so run with ios and fix any errors you get on debugger that might lead to freezing of your emulator at Loading. from 8081

Answer 8

There could be several cases where you can't connect to the debugger:

The device and host machine definitely should be on the same network. Either connect your mobile to your PC's network or your pc to the mobile hotspot. In some cases on real devices, you might need to run adbe reverse command:

adb reverse tcp:8081 tcp:8081

Uninstall the app, stop the packager, and restart the packager with reset cache option:

npm start -- --reset-cache

And then, run it on the device again.

shake your device and in the menu choose dev settings

in the debug server host & port for device section enter your pc ip address via port 8081 like this: 192.168.1.3:8081

Answer 9

Killing the process which was already running on port 8081 worked for me

In Windows-

netstat -ano | findstr :8081

tskill TypeyourPID

Thanks, @luttius

Answer 10

I'd been stuck per days and the problem was related to Watchman Permissions. See the verified solution and I hope this help someone

Homebrew Permissions for Watchman on Muti-user Mac