How to run react-native app on Android emulator (or a physical device) in Android Studio? - react-native

I'm trying to run my react native app on either an Android Studio emulator or my physical device. I've followed the instructions at https://reactnative.dev/docs/environment-setup under the React Native CLI Quickstart tab, and initialised the 'AwesomeProject' app from that page, but I'm finding the instructions unclear. For instance it says do the following on the command line: npx react-native start which starts up a process of some sort. Then it says to enter: npx react-native run-android, but the command line is blocked by the previous process. If I try the latter either in another command prompt or without first running the former command, I get an error Unrecognized command "run-android". I should say I have an emulator running from Android Studio before doing all this.
So failing getting it running via the react-native CLI, how do I get it running from within just Android Studio? I've never used Android Studio before, so I have no idea what the process is. Googling hasn't helped either. But as I said, I have managed to get an emulator installed and running.
Any help getting this going either via react-native CLI or from within Android Studio would be greatly appreciated.
edit: I've found how to run my app in Studio, but it pops up an 'Edit configuration' dialogue and says there's no Module selected. But in the module dropdown box there's nothing to select.

You can try following the below steps:
Make sure that you have 2 environment variables set in your system.
ADB variable which is set to the path of "platform-tools" in your system like below:
ANDROID_HOME variable set to SDK path, where android was installed.
Now execute below commands in command prompt and start you emulator or connect your phone which has development settings ON before this:
Open your command prompt in admin mode.
Delete node_modules folder
Execute: npm install
Execute: npm install -g react-native && npm install -g #react-native-community/cli
Execute: npx react-native init
Go to android folder in your react-native project and execute: npx gradlew clean
Come back to main folder and execute: adb reverse tcp:8083 tcp:8083. (You need to check the status of your connected devices by executing adb devices. It will show you the connected devices.)
You also need to make sure that your index.bundle is created. If not than you may create it by executing: npx react-native bundle --platform android --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --dev false --reset-cache --assets-dest android/app/src/main/res/
Finally execute: npx react-native run-android --port=8083

Related

Getting Building iOS bundle error when trying to build an android app - expo -react-native

I was able to build app using expo build:android previously. However, after upgrading to latest expo version I get following error:
connect ECONNREFUSED 127.0.0.1:19001
Set EXPO_DEBUG=true in your env to view the stack trace.
I also see the following lines in the log:
Publishing to channel 'default'...
Building iOS bundle
I don't added ios to my app.json, I only need to build an android apk. To do that I use expo build:android -t app-bundle
I also removed package-lock.json and node_modules and run npm install, but I get the same error.
I run expo start on another cmd and then run expo build:android -t app-bundle still get same error
Also when I clear expo cache, see the following log:
Restarting Metro Bundler...
Starting Metro Bundler on port 19001.
Couldn't adb reverse: adb.exe: error: Invalid source port: 'undefined'
I had faced same issue myself and found the solution. Expo is looking for localhost:19001 which is not running. Just follow following steps and it should work as expected:
Run expo start no terminal and once it opens up the
browser where you will find this line written Starting Metro
Bundler on port 19001.
Now open another terminal instance and run expo build:android.

react-native run-android not working on ubuntu 16.04

i have a problem with react native in ubuntu, i have installed,
java jdk 8 (both javac --version) as well as echo $JAVA_HOME gives the proper output.
I have also installed android studio and set the android environment variables as well as the tools and echo $ANDROID_HOME gives output of the sdk location.
I have also installed gradle version 4.4.
I am unable to start the android app using react-native run-android. can any one let me know if i have missed something during installation.
And react-native as well as android studio works fine as I am currently using react-native start to start the metro builder as well as the other react-native cli commands. also android studio and gradle is also able to generate debug as well as release apks with no problems.
The error i get,
Scanning folders for symlinks in /home/igate-naveed/Documents/ReactNative/mobile-app-android/node_modules (16ms)
Starting JS server...
Building and installing the app on the device (cd android && ./gradlew installDebug)...
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/getting-started.html
First of all you need to create a project like this:
react-native init myProjectName
Then, start an emulator from Android Studio... Afterwards:
npm install && npm start
in your project directory, and from another terminal, inside your project directory, run :
react-native run-android
Is this working?
Instead of using the npm install manager, I used yarn and it worked for me. In your project directory, just do:
(project-directory)$ yarn
Update the gradle version.
Create new project:
react-native init projectname
Uninstall the npm pack.
Reinstall the npm pack again.
npm start
react-native start
react-native run-android

how to run github project of react native

I'm getting an error while I'm doing react-native run-android
error:
Command `start` unrecognized. Make sure that you have run `npm install` and that you are inside a react-native project.
Inside your root directory where package.json is placed along with other directories like android/ios, run the command npm install. Then run
react-native link (not compulsorily required, required in case there are third party libraries to be linked). Then run react-native run-android (supposing you don't have sdk path problem and you have an emulator running).
This is the most common way of starting a git project. Let me know if you face other problems.

React native unable to load scripts automatically appear disappear in android

I am running $react-native run-android. it is working properly, also, I am able to see the changes on android emulator. I have created 3 components and also tested it on android device.
But now, suddenly, it is asking me unable to load script from assets 'index.android.bundle' Also, I have reverted the changes and started but still I am seeing this error.
After serching on internet, I performed,
1. npm start
2. react-native start
3. adb kill-server and adb start-server
but all in vein.
Last, I found and performed below commands,
$ mkdir android/app/src/main/assets
$ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
$ react-native run-android
I am able to resolve above error with above commands, but now, when I am changing App.js file, it is not getting reflected on emulator. please help.
My steps performed: http://sachin4java.blogspot.in/2017/12/unable-to-load-scripts-from-assets.html
I have tried many things as found on internet, but no one worked.
I removed installed node, NPM and nodejs
I installed it again with : http://sachin4java.blogspot.in/2017/12/react-native-setup-in-ubuntu-16.html
Then I installed in new version in Android studio AVD image named 'Nexus_5X_API_26(AVD)'.
Now, I am able to see the code changes reflecting and red error screen gone.

How to open and run React-Native app?

I'm new to React and React-Native I'm trying to open a React-native app I cloned from github. I've done a npm install and I did a npm start in the command line. It says: "Running Packager on port 8081" and then a bunch of other builds beneath it. I tried going to local host 8081 and 8081/hot but I can't see the app. Does anyone know how to run and test an react-native app on the browser?
follow the below step
1) Go to project directory
after use this CLI
2) react-native run-android
it can run only either emulator or real device so we can first start the emulator after the try above command
more details see this doc
Inside your project directory for bundle js.
3) react-native start
or
3) react-native start --reset-cache
After installing packages,
open src folder--->open in terminal
--->$ npm start
react-native run-ios --simulator="iPhone 5s"
If you have an installation with android and ios folders, you should run yarn android or yarn ios.