Setup Facebook React-native sample (empty) project on Ubuntu

setup_howto.txt

# author:
# @Bartosz Kosarzycki
#

sudo apt-get install npm
sudo npm install -g react-native-cli
sudo ln -s /usr/bin/nodejs /usr/bin/node
cd /home/user/your/project/path
react-native init AwesomeProject
cd AwesomeProject
react-native run-android

==================== if something goes wrong:  ==============================
check node.js version
> node --version
v0.10.25

if it's below 0.12 upgrade your node.js:

sudo apt-get install -y curl
curl -sL https://deb.nodesource.com/setup_0.12 | sudo bash -
sudo apt-get install -y nodejs

>  node --version
v0.12.7

=================================================

Check your adb version:
adb version
Android Debug Bridge version 1.0.31

if it's below 1.0.32 upgrade your adb tools
> adb version
Android Debug Bridge version 1.0.32
Revision 09a0d98bebce-android

====== "Unable to download JS bundle" ===========================================
#
# In order to run the Facebook react app you need to start the JS server on the PC and forward port 8081 to the phone
#

> sudo react-native start
(or 
> sudo react-native start > /dev/null 2>&1 &  
to start in the background)

> adb reverse tcp:8081 tcp:8081
(Note that this option is available on devices running android 5.0+ (API 21).!!!)

These commands could get me to deploy the app to device using Ubuntu.

But changes to index.android.js aren't reflecting when I save the file and do
react-native run-android

Could it be because of watchman? I compiled and installed it on Ubuntu 14.04 but I'm not sure if it is working.

Hi bornfree,
To have the changes automatically reflect on the device (it worked for me in the following way - as soon as I changed any *.js file - the app on the phone reloaded), you need to:

1. Install the app on the phone with react-native run-android
2. Ensure that you have the port 8081 forwarded from the phone to the PC
3. Run the JS (Facebook react) server on the PC
4. Ensure that you have the adb >= 1.0.32 and an Android Phone/Emulator >= 5.0
5. Ensure that you have an active adb connection with the phone with "adb devices" saying something like:
   123456780bdbafd7 device
6. If there is no connection from the phone to the PC (i.e. "Unable to download JS bundle") try to run react-native start with the sudo privileges
7. Check the "Auto reload on JS change" option in your app. In order to enter the "debug menu" shake your device.

Checkout the sample app in facebook react native:

https://github.com/kosiara/android-facebook-react-native-simple-example

Hi @kosiara, I have installed nodejs with the right version and also adb. But if I run react-native run-android i get this errors:

> Could not resolve all dependencies for configuration ':app:_debugCompile'.
   > Could not find com.android.support:appcompat-v7:23.0.0.
     Searched in the following locations:
         file:/home/user/.m2/repository/com/android/support/appcompat-v7/23.0.0/appcompat-v7-23.0.0.pom
         file:/home/user/.m2/repository/com/android/support/appcompat-v7/23.0.0/appcompat-v7-23.0.0.jar
         https://jcenter.bintray.com/com/android/support/appcompat-v7/23.0.0/appcompat-v7-23.0.0.pom
         https://jcenter.bintray.com/com/android/support/appcompat-v7/23.0.0/appcompat-v7-23.0.0.jar
     Required by:
         myApp:app:unspecified
   > Could not find com.android.support:appcompat-v7:23.0.0.
     Searched in the following locations:
         file:/home/user/.m2/repository/com/android/support/appcompat-v7/23.0.0/appcompat-v7-23.0.0.pom
         file:/home/user/.m2/repository/com/android/support/appcompat-v7/23.0.0/appcompat-v7-23.0.0.jar
         https://jcenter.bintray.com/com/android/support/appcompat-v7/23.0.0/appcompat-v7-23.0.0.pom
         https://jcenter.bintray.com/com/android/support/appcompat-v7/23.0.0/appcompat-v7-23.0.0.jar
     Required by:
         myApp:app:unspecified > com.facebook.react:react-native:0.11.0
   > Could not find com.android.support:support-v4:21.0.3.
     Searched in the following locations:
         file:/home/user/.m2/repository/com/android/support/support-v4/21.0.3/support-v4-21.0.3.pom
         file:/home/user/.m2/repository/com/android/support/support-v4/21.0.3/support-v4-21.0.3.jar
         https://jcenter.bintray.com/com/android/support/support-v4/21.0.3/support-v4-21.0.3.pom
         https://jcenter.bintray.com/com/android/support/support-v4/21.0.3/support-v4-21.0.3.jar
     Required by:
         myApp:app:unspecified > com.facebook.react:react-native:0.11.0 > com.facebook.fresco:fresco:0.6.1 > com.facebook.fresco:drawee:0.6.1
         myApp:app:unspecified > com.facebook.react:react-native:0.11.0 > com.facebook.fresco:fresco:0.6.1 > com.facebook.fresco:imagepipeline:0.6.1

But I don't have this directories /home/user/.m2/repository/.... My ANDROID_HOME is set right. I have also set file local.properties with the right sdk.dir in myApp/android.

SOLVED

Install package Extras > Android Support Repository to Android SDK Manager.

@phlegx
Exactly, I always install all available extras
from Android SDK Manager. That's probably why I have not stumbled on that error.
Thanks for the tip!

Hi @kosiara

Nice tutorial. I got node v5.0.0 and nodejs v0.10.25, that is correct? ❓

wakematta@wm-pc:~/github/testApp$ node --version
v5.0.0

wakematta@wm-pc:~/github/testApp$ nodejs -v
v0.10.25

Any help on how to debug react native apps using chrome on Ubuntu? I have a pretty old question at Stackoverflow without a solution still. Can you help me with this?