React Native is the hot favorite of developers who want to build a cross-platform mobile app.<\/p>\n
The technology lets them use JavaScript along with Facebook\u2019s React Library for robust integration with the native platforms and enhance performance.<\/p>\n
Based on the \u201clearn once, write anywhere\u201d philosophy, React Native<\/a> has no single way of developing applications. You can install it on different operating systems to know it better.<\/p>\n In this post, we\u2019ll focus on installing React Native on Ubuntu 17.10.<\/p>\n Install Android Studio and run Java-based \u201cHello world\u201d app for Android. Proceed only when you are done with these steps.<\/p>\n You need to have the following installation packages: <\/b>1. Install NodeJS\u00a0\u00a0<\/b><\/strong><\/strong><\/p>\n To install NodeJS, which is a popular javascript implementation, you\u2019ll need to take the following steps:-Open a terminal (Ctrl+Alt+ t<\/b><\/strong>)-Enter the following commands:<\/p>\n <\/b>2. Install NPM\u00a0<\/b><\/strong><\/p>\n After installing NodeJS, proceed to install NPM or the Node Package Manager. You can check if it has already been installed or not using these commands:<\/p>\n When NPM is already installed, this will return –<\/p>\n If not, it will return –<\/p>\n To NPM, run the following command in terminal:<\/p>\n <\/b>3. Install Autotools-dev\u00a0<\/b><\/strong><\/p>\n Before you go ahead and install Watchman, you need to first install Autotools-dev, which is a package that accompanies several other tools i.e aclocal automake. To install it, copy and paste the following commands in the terminal:<\/p>\n <\/b>4. Install Watchman<\/b><\/strong><\/p>\n Once you\u2019re done installing Autotools-dev, go ahead and install Watchman<\/a>, which is a tool developed by Facebook for watching the file system. It is necessary to install the tool if you are aiming for best results.<\/p>\n Here are the commands you need to copy and paste in the terminal to install Watchman:<\/p>\n <\/b>5. Install Flow\u00a0<\/b><\/strong><\/p>\n Flow will let you easily add the static type checking to JavaScript. Additionally, it helps prevent bugs and also, facilitates better code documentation. In fact, many React Native documentation and source code already use it and therefore, you need to install it right away.<\/p>\n The command to install Flow are:<\/p>\n Note: <\/b><\/strong>You can put the flow executable anywhere on your PATH. It does not have to be in \/use\/local\/bin<\/p>\n 6. Install React Native<\/b><\/strong><\/p>\n When you\u2019re done with steps 1 through 5, the next step is to install React Native. It\u2019s important to note that you will need to make use of sudo\u00a0to install React Native as a root. The reason behind this is that we\u2019re going to install it globally. Here\u2019s the code, which you need to use:<\/p>\n Users who\u2019ve installed NPM using a different method can proceed to install React Native as a normal user with this code:<\/p>\n When you\u2019re done with installing all the prerequisite packages, you can go ahead and start creating your own app(s)!<\/p>\n Let\u2019s create demo project in React Native for test all of the above installations.<\/b><\/strong><\/p>\n Start by creating an app project with the following command:<\/p>\n However, you need to remember that it may take several minutes to create a project initially.<\/p>\n The next step is to set up an Android device and run the project on the same. You can run a project in a real Android device or by using an emulator.<\/p>\n We chose to go ahead with the tutorial by using a real Android device belonging to a team member.<\/p>\n Begin by plugging in the device and checking the manufacturer code by using lsusb\u00a0command:<\/p>\n There were a number of devices that were connected with USB. We went ahead with our Android device, which was:<\/p>\n From this line of code, you\u2019ll require these four digits, which are a part of the device ID:<\/p>\n 22b8:2e76\u00a0\u2013 Device ID<\/p>\n 22b8 \u2013 First four-digit identifier for Motorola<\/p>\n Next, you need to copy and paste the following code in the terminal:<\/p>\n Following this, you\u2019ll be able to view the complete list of devices attached.<\/p>\n TA9300GLMK \u00a0device<\/p>\n Start with the MyFirstDemoApp<\/strong> project, for which you\u2019ll require two terminals to run the code.<\/p>\n Here\u2019s the code on one terminal:<\/p>\n A failed code indicates that the<\/strong> default React Native port is being used by other services in the system. You can then proceed to try the following code:<\/p>\n If this code runs successfully, you can make the following changes to the app: Well, that\u2019s it! You\u2019ve successfully installed React Native on Ubuntu 17.10. We hope that it was a successful attempt for you, just like it was for us. Let us know how did you fare in a comment!<\/p>\n","protected":false},"excerpt":{"rendered":" React Native is the hot favorite of developers who want to build a cross-platform mobile app. The technology lets them use JavaScript along with Facebook\u2019s React Library for robust integration with the native platforms and enhance performance. Based on the \u201clearn once, write anywhere\u201d philosophy, React Native has no single way of developing applications. You … Continue reading How to install React Native on Ubuntu 17.10<\/span> Walkthrough<\/h2>\n
1.\u00a0<\/b>Prerequisites<\/b><\/strong><\/h2>\n
2.\u00a0<\/b>Installation Packages<\/b><\/strong><\/h2>\n
\n– NodeJS
\n– NPM
\n– Autotools-dev
\n– Watchman
\n– Flow
\n– React Native<\/p>\n3.\u00a0Start Installing Everything One by One<\/b><\/strong><\/h2>\n
# sudo apt-get install -y build-essential\r\n# curl -sL https:\/\/deb.nodesource.com\/setup_4.x | sudo -E bash \r\n# sudo apt-get install -y nodejs<\/pre>\n
# which npm<\/pre>\n
# \/usr\/local\/bin\/npm<\/pre>\n
#npm not found.<\/pre>\n
# curl http:\/\/npmjs.org\/install.sh | sh<\/pre>\n
# sudo apt-get install autotools-dev\r\n\r\n# sudo apt-get install aclocal\r\n\r\n# sudo apt-get install automake<\/pre>\n
# git clone https:\/\/github.com\/facebook\/watchman.git<\/a>\r\n\r\n# cd watchman\r\n\r\n# git checkout v4.9.0 \u00a0\u00a0\u00a0\u00a0# the latest stable release\r\n\r\n# .\/autogen.sh\r\n\r\n# .\/configure\r\n\r\n# make\r\n\r\n# sudo make install<\/pre>\n
# wget https:\/\/github.com\/facebook\/flow\/releases\/download\/v0.62.0\/flow-linux64-v0.62.0.zip\r\n\r\n# unzip flow-linux64-v0.62.0.zip\r\n\r\n# cd flow\r\n\r\n# sudo mv flow \/usr\/local\/bin\/flow<\/pre>\n
# sudo npm install -g react-native-cli<\/pre>\n
# npm install -g react-native-cli<\/pre>\n
4. Create Project\u00a0<\/b><\/strong><\/h2>\n
# react-native init MyFirstDemoApp<\/pre>\n
5.\u00a0Setting Up an Android Device<\/b><\/strong><\/h2>\n
# lsusb\r\n\r\nBus 002 Device 002: ID 8087:8000 Intel Corp.\r\n\r\nBus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub\r\n\r\nBus 001 Device 002: ID 8087:8008 Intel Corp.\r\n\r\nBus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub\r\n\r\nBus 004 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub\r\n\r\nBus 003 Device 003: ID 046d:c077 Logitech, Inc. M105 Optical Mouse\r\n\r\nBus 003 Device 002: ID 046d:c31d Logitech, Inc. Media Keyboard K200\r\n\r\nBus 003 Device 006: ID 22b8:2e76 Motorola PCS\r\n\r\nBus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub<\/pre>\n
Bus 003 Device 006: ID 22b8:2e76 Motorola PCS<\/pre>\n
# adb devices<\/pre>\n
6.\u00a0Running the Project<\/b><\/strong><\/h2>\n
# cd\u00a0MyFirstDemoApp\r\n\r\n# react-native run-android<\/pre>\n
# adb reverse tcp:8081 tcp:8081<\/pre>\n
\n-Open index.android.js in your text editor
\n-Change “Welcome to React Native” to “My First Demo APP in React Native on Android”
\n-Press the menu button (F2 by default, or \u2318-M in Genymotion) and select Reload JS to see the change
\n-Run adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal to see your app’s logs<\/p>\nConclusion<\/b><\/strong><\/h2>\n