Reactive Native enables you to be able to program an app for both ios and android. It incorporates both React and Native platform capabilities.

Install React Native with Expo

React Native can be installed in a number of different ways. The approach taken below does not use xCode but the expo app that can be downloaded from the Android play store or the Apple app store.

Installation Guide

First you are going to need to download the Expo app from the app/play store.

In your terminal, type the following to install Create React Native App globally. This uses the expo SDK, which will enable you to launch the app on a mobile device.

npm install -g create-react-native-app

Navigate to where you would like to put the project folder and then execute the following command in your terminal.

create-react-native-app <project-name>

You then want to move into that folder and start running the app. Type the following into your terminal.

cd <project-name>
yarn start

Once the server has loaded, you will see a QR code. Use the camera on your phone/ the expo app, and you app will be launched within your mobile device.

Routing to Different Screens

Routing in React is quite straightforward hopwever in React Native you need a few libraries.

Explanation on How to Route to Screens

Packages needed for routing. ``` yarn add react-navigation yarn add react-navigation-stack yarn add react-native-gesture-handler ```

The code and each component needed.

//App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from './components/HomeScreen';
import NewScreen from './components/NewScreen';

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen
  },
  New: {
    screen: NewScreen
  }
});

const AppContainer = createAppContainer(AppNavigator);

//components/HomeScreen.js
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

export default class Homescreen extends Component {

  render() {
    return (
       <View>
        <Button>
            <Text>
                Home
            </Text>
        </Button>
       </View>
    )
  }
}

//components/NewScreen.js
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

export default class Homescreen extends Component {
  render() {
    return (
       <View>
        <Button onPress={() => this.props.navigation.navigate('New')}>
            <Text>
                New
            </Text>
        </Button>
       </View>
    )
  }
}

Styling the App

Styling can be done in a number of ways. Below is an example of some in-line styling that was implemented.

Example of Styling

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

<Button style={styles.button} onPress={() => this.props.navigation.navigate(‘New’)}> New

… const styles = StyleSheet.create({ button: { padding:‘30%’, backgroundColor:‘#07B162’ }, text: { fontSize: 20, textAlign: ‘center’, color:‘white’, fontWeight: ‘bold’ } }) …