React Native setup for Andriod and IOS

React Native basically used to build native mobile application by using JavaScript and React. You can easily build mobile application with the help of JavaScript.

Setup React Native on Mac

There is a nice guide to setup React Native on the official website but sometimes it comes with some common errors with your system, related to permission. We are using Expo to setup React Native, Expo is a great tool and you don’t need to setup Xcode or Andriod Studio to using the simulator.

npm install -g expo-cli

Following command will setup the expo-cli on your system if you have correct permission, otherwise it will generate the error.

EACCES: Permission Denied

Access /usr/local/lib/node_modules

To fix this issue you need to follow the instructions given on the npmjs docs.

• Setup Expo with iPhone
• Setup Expo with Android Phone

Once the expo-cli successfully installed, then you have to create a project using expo. Go the the working directory and use the following command to create a project.

expo init MyProject

Above command will create a directory MyProject on your working directory and asking you to choose the template that you have to use to build your application.

By default, it is using blank template as you can see on the above screenshot. Hit enter to continue the initialization process. Once the process complete. Go the MyProject directory and run the following command.

expo start

Let’s Setup Expo with IOS

To run the application on your iPhone, you need install expo client application. Create an account with expo and sign into it. Now connect you phone on the same wifi network which you used on your laptop / desktop.

NPM start will ask you the option to sign into expo with username / email and password. Follow the given instructions on your terminal. After successfully sign in you need to just type the ? and it will show you all the options again and then type r to restart your application.

Once your application bundler restarted you will see your application on your expo client on your iPhone. Just tap the highlighted application and then start working on App.js file to reflect the changes on your application. For testing add the following codes in your App.js file.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.textStyle}>Hello World!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#4f5aac',
    alignItems: 'center',
    justifyContent: 'center',
  },
  textStyle: {
    color: '#fff', 
    fontSize: 30
  },
});

Above code will generate the Hello World text and change the background and text.

Let’s Start Expo with Android Phone

For Android Phone you don’t need to register an account. But yes, you need Expo Client app on your Android Device. Then Open the Expo App on your Android Phone and select Scan the QR code option. You can find the QR code on your terminal that generated on npm start command.

After processing it will render the app on your Android Device. Please feel free to ask any question if you stuck somewhere.