React Native - Installation and Setup

-
Hey Guys!!

Good Day! Basically I am an Android Developer who's doing stuffs in Java/Kotlin. So naturally, I am not curious about hybrid apps because of it lack of look and feel. Until, I have read about React Native somewhere and get to know that is not using webview to render other views like TextView, ListView, etc. 

So How it's working?

It uses native components in both IOS and Android depends on its platform. Interesting right? Yeah it is. Definitely, it bridges the lack of look and feel in Cross-platform apps.

Okay. Good. How can I start that?

React Native has its own pretty good documentation. You can to the link, https://facebook.github.io/react-native/docs/getting-started.html and check it out.

Let's Install 

Actually, we can install it in two ways:

(i) With Create Native React App - For purely javascript code
(ii) With React Native CLI - For both javascript and native code

(i) With Create Native React App

In this way, we don't need Android Studio or XCode to be installed. You can directly write JavaScript code to support both the platforms. But we can't use any native specific components in this way.

  • First, Let's install Nodejs. You can download the package in Node.js site. 

         Note : I have downloaded v7.10.1, Because, React native doesn't support the latest v8 yet. (at the time of writing).

  • Next, we can install WatchMan. As per doc of React Native, its not mandatory to install that. But I found its good to install it, to avoid some errors in future. You can find the package and instructions to install, here.
  • Now we can directly install Create React Native App directly in terminal using npm, using the following command. 
                           
                                  npm install -g create-react-native-app
  • Now we are good to create new React Native project. Use the following commands to do so.
create-react-native-app MyProject
  • The project has been created now. Now we can navigate to the project location and start exploring it.
                          cd MyProject
                                   npm start
  • Now QR code and an local url will be generated in terminal.
  • To run the application on Android or IOS devices, we have to install Expo app in it. Expo is available at both Google playstore and AppStore. Also both your computer and device should use the same wireless network. Using Expo, we can view our React native application's changes live with hot reloading. 

(ii) With React Native CLI 

This way is very useful to use both Android and IOS features and specific components/codes with the benefit of JavaScript. It requires the installation of Android or IOS, or both. (Depends on your need and familiarity withe the languages.)

  • Before starting installation of CLI, we can install Android Studio or XCode and make it ready. You can find instructions, requirements of installation for Android Studio, here and for Xcode, here.
  • It requires to install Node and Python2. So now we can proceed with installation of Node.js by downloading it, here.  Note : I have downloaded v7.10.1, Because, React native doesn't support the latest v8 yet. (at the time of writing).
  • We have to install Python2 from here.
  • Next, we can install WatchMan. You can find the package and instructions to install, here.
  • Then, Yarn should be installed to fasten up your project creation and setup for CLI. You can download it, here.
  • Now we can install CLI with following command in terminal.

                                      npm install -g react-native-cli
  • Now we can create new project with following command:

                                     react-native init AwesomeProject
  • Then make your physical device or Emulator ready to run the application. And navigate to project's location and enter the following command.

                                     cd AwesomeProject
                                     react-native run    -android (for Android) react-native run-ios (for IOS)
  • Now you can view the application in device. And you can modify App.js file as your wish. You can install any editor for that. I am using Atom, in case you're curious;) That's it. Installation and setup for React Native was done. In next post, we can explore React Native basics. Until then, Stay Tuned!! Byeee!!!

Comments

Post a Comment

Popular posts from this blog

FlatList - PullToRefresh, Load More and Filtering implementation

-
Image
Hey Guys!! Good Day!!! In last post , we have seen how to render FlatList using React Native Elements. Today, Let's see how to implement filtering functionality, load more functionality and pull to refresh functionality. (i) First, let's see how to implement filtering data from FlatList . Initially, we have to set some fields in State as below:                         isLoading - to show/hide ActivityIndicator                          dataSource - to set the values to FlatList                         dataBackup - to store the values as backup  Let's fetch data from api, on app's launch and set the values to dataSource and dataBackup and use that to render it in FlatList . Then we can set FlatList with itemSeparator  - to show our custom bottom line, header  - to add Searchbar at the top of it.                                   <FlatList                                          ....                                          ....            
Read more

AsyncStorage in React Native

-
Image
Hey Guys!! Good Day!! AsyncStorage Component is a simple storage system, that is globally available to React Native Application. It is persistent, means data that has been stored will continue to exist even when quiting or restarting Application or your phone. Its also asynchronous, as its name implies.  The following are some of the main methods for AsyncStorage setItem getItem removeItem clear multiSet multiGet multiRemove Optionally, we can add a callback to the methods. To know more methods in AsyncStorage, refer AsyncStorage . setItem This method is to save key and its value in AsyncStorage.                   AsyncStorage.setItem('key', 'value')                                         .then( () =>{                                                 //Operation to do                                        }); getItem This method is to get the saved value, using its key.                    AsynStorage.getItem(
Read more

FlatList - HorizontalList and GridList

-
Image
Hey Guys!! Good Day!!! In last post , we have seen how to implement pull to refresh, scroll and filtering feature in FlatList. Today, let's see how to implement a FlatList as horizontal list and also as header of another FlatList. Making FlatList as Horizontal one is so easy in React Native with a single property, horizontal. Setting that to {true} will work as expected. And making FlatList to have two columns is also simple in React Native. It needs a property, numColumns , where we can pass the no. of columns to be implemented. Let's combine both of the features.i.e., At top of the page, lets have a horizontal list and below that let's have a grid of 2 columns, like below: Nice na??!! So we can make the grid one as our main list and the top horizontal list as the header of the list. For that, ListHeaderComponent is to be used. import React, { Component } from 'react' ; import { AppRegistry, FlatList, StyleSheet, Image, View,
Read more