React-native: Running react-native with Genymotion

[oren]

I am trying to follow the getting started tutorial and use Genymotion.
What are the steps I should take after Genymotion is running? I see an 'Add' button that ask me to 'select new virtual device' but I don't have any devices. At the bottom of the form I see 'Sign in to access all available virtual devices'.

Is that what I should do? sign in to Genymotion?
Another question - what command should I use to deploy the app into Genymotion? maybe it's the same command that deploy the app to my phone? react-native run-android ?

Maybe a separate documentation page for setting up a project with Genymotion would be helpful for others?

Thanks!

[chandu0101]

Genymotion Setup :

1) Create an account on their website
2) Install Oracle virtual box
3 )Get genymotion app and install
4) login with user and pass
5) click on +(Add) , install device
6) down load virtual device you want , and then start emulator
7) run react-native run-android , check emulator app should be running there.

above steps worked fine for me on my mac :)

[han4wluc]

8) ⌘+M to reload javascript

[chandu0101]

8) ⌘+M to reload javascript

this was not working on my mac ,so i reported them ,they said they're working on it :)

[oren]

I am following the steps (I picked Nexus 5 as my virtual device) and the emulator window shows a red screen tells me 'unable to download JS bundle. Did you forget to start the development server or connect your device'. btw, I am getting the same red screen on my phone.

OS: Ubuntu 15.04
node.js: v2.5.0
[email protected]
Phone: Android 4.4.4. Moto X. HW version: p30

[chandu0101]

some times i also get unable to download JS bundle ,but after few tries it just go away . wish i could help more ;)

[bsansouci]

@chandu0101 @oren try doing the reverse proxy thing adb reverse tcp:8081 tcp:8081 and hit reloadJS (this has been deterministically making it work).
You can setup auto-reload in the settings. I think it's called the "Menu" button on the sidebar inside genymotion.

[ide]

Android 5.x devices have also been a lot less troublesome so might want to try that if you can.

[shahbhavir]

@chandu0101 @oren following steps worked for me:
brew uninstall watchman
brew install --HEAD watchman
react-native run-android

Also, you could kill process
lsof -n -i4TCP:8081 | grep LISTEN
and then run react-native run-android

[oren]

Thank you @chandu0101 but i am on ubuntu 15.05 ):

[bsansouci]

Does the terminal that pops open when you run react-native run-android say anything?

[oren]

@bsansouci I run adb reverse tcp:8081 tcp:8081 after react-native run-android but it didn't help.
I also tried hitting 'RELOAD JS' button that appears at the bottom of the emulator and also the one that shows up after I hit the Menu button but it didn't do anything.

Here is the terminal output of the command react-native run-android:

Starting JS server...
Building and installing the app on the device (cd android && ./gradlew installDebug)...
:app:preBuild UP-TO-DATE
:app:preDebugBuild UP-TO-DATE
:app:checkDebugManifest
:app:preReleaseBuild UP-TO-DATE
:app:prepareComAndroidSupportAppcompatV72300Library UP-TO-DATE
:app:prepareComAndroidSupportSupportV42300Library UP-TO-DATE
:app:prepareComFacebookFrescoDrawee061Library UP-TO-DATE
:app:prepareComFacebookFrescoFbcore061Library UP-TO-DATE
:app:prepareComFacebookFrescoFresco061Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipeline061Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipelineOkhttp061Library UP-TO-DATE
:app:prepareComFacebookReactReactNative0110Library UP-TO-DATE
:app:prepareOrgWebkitAndroidJscR174650Library UP-TO-DATE
:app:prepareDebugDependencies
:app:compileDebugAidl UP-TO-DATE
:app:compileDebugRenderscript UP-TO-DATE
:app:generateDebugBuildConfig UP-TO-DATE
:app:generateDebugAssets UP-TO-DATE
:app:mergeDebugAssets UP-TO-DATE
:app:generateDebugResValues UP-TO-DATE
:app:generateDebugResources UP-TO-DATE
:app:mergeDebugResources UP-TO-DATE
:app:processDebugManifest UP-TO-DATE
:app:processDebugResources UP-TO-DATE
:app:generateDebugSources UP-TO-DATE
:app:processDebugJavaRes UP-TO-DATE
:app:compileDebugJavaWithJavac UP-TO-DATE
:app:compileDebugNdk UP-TO-DATE
:app:compileDebugSources UP-TO-DATE
:app:preDexDebug UP-TO-DATE
:app:dexDebug UP-TO-DATE
:app:validateDebugSigning
:app:packageDebug UP-TO-DATE
:app:zipalignDebug UP-TO-DATE
:app:assembleDebug UP-TO-DATE
:app:installDebug
Installing APK 'app-debug.apk' on 'Google Nexus 5 - 5.1.0 - API 22 - 1080x1920 - 5.1'
Installed on 1 device.

BUILD SUCCESSFUL

Total time: 38.412 secs

This build could be faster, please consider using the Gradle Daemon: http://gradle.org/docs/2.4/userguide/gradle_daemon.html
Starting the app (adb shell am start -n com.awesomeproject/.MainActivity)...
Starting: Intent { cmp=com.awesomeproject/.MainActivity }

And here is the screenshot of my Nexus 5 emulator:

[bsansouci]

And does it open another shell with the JS server (React Packager) running in it?

[chandu0101]

@oren try increasing DEFAULT_MAX_CALL_TIME value

projectname/node_modules/react-native/packager/react-packager/src/JSTransformer/index.js line no : 26

const DEFAULT_MAX_CALL_TIME = 6000000;

[oren]

@bsansouci I don't see another shell
@chandu0101 increasing it didn't help

[bsansouci]

@oren Huh... That might be the problem? The first thing it should do is open the dev server that looks like this:

[kkganesan]

@bsansouci :+1: for auto-reload tip.
Also had to turn on WiredSSID inside the GM emulator to talk to http.

[WaKeMaTTa]

@han4wluc :+1: for

8) ⌘+M to reload javascript

On Ubuntu is ctrl + M

[rainbowhat]

I'm also facing this issue :(

[newyu]

Check list:
-device's(such as emulator or smart phone) wifi connection
-react-native server status

[flexzero]

@oren
try following:

$ git clone https://github.com/facebook/watchman.git
$ cd watchman
$ ./autogen.sh
$ ./configure
$ make
$ sudo make install

then

react-native start

then try

react-native run-android

The problem is they didn't mention that how can we install watchman(on linux) on the android development setup docs as react-native development server requires watchman to be installed.

note: run the react-native start and react-native run-android from two separate terminal instance.

[bucketzxm]

@flexzero I still have the same error with your method. It seems that genymotion's default ip address is 192.168.56.xxx ,and it can not be modified. My localhost ip address is 192.168.1.xxx. Is there any solution for this problem ? thank you !

[SeyfertCode]

where is the "Reload Js" option?
i was trying with 4.4, 5.0, 5.1 and 6.0 android :/

[rc12]

For me it was menu button on the right hand side. It will load a menu with option "Reload JS".
That's it. Reload your changes.

[christopherdro]

Hey there! Closing this issue since it's been tagged as a question appropriate for Stack Overflow.
We are trying to keep GitHub issues strictly for bugs.

Thanks!

[Noitidart]

Searching on search engines gives this topic. Which doesn't help. This was the stackoverflow solution that helped - http://stackoverflow.com/a/35960019/1828637

[megamind2301]

@chandu0101 with the same steps followed i get an error saying:
`
FAILURE: Build failed with an exception.

• What went wrong:
  A problem occurred configuring project ':app'.
  The SDK directory '/home/userName/Android/Sdk' does not exist.

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 19.286 secs
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/android-setup.html
`