In this tutorial, we will learn to develop a react native app with Expo toolkit.

• Chapter 1. Setup and Project Initialisation
• Chapter 2. React Views and Components
• Chapter 3. React Navigation
• Chapter 4. Working with APIs
• Chapter 5. Styling and Design
• Chapter 6. Redux

Chapter 1. Setup and Project Initialisation

Introduction

React Native is a JavaScript framework for building native cross platform mobile apps. Expo is a complementary toolkit for React Native. It offers many additional APIs and is very helpful for app development.

Setup Expo Environment

With Expo CLI, you just need a recent version of Node.js. You can download the latest version of Node JS for nodejs.org.  Once Node.js is installed on the system, npm commands would work.

Install the Expo CLI by using the following command.

//Install Expo-cli from command line tools
npm install -g expo-cli

//Initalizes your project
expo init TUC

The Expo CLI will ask you to choose a template. In this tutorial, we will select the blank template and write the code from scratch. These templates are useful, for example you can select the "tabs" one, if your app design has bottom tabs and you want to implement it by default in your app.

After project is created, you can navigate to the project directory.

//Navigate to project directory
cd tucT

Start the Expo Server

You can start the expo server with the following command.

expo start   //or npm start

Expo CLI starts Metro Bundler, which is an HTTP server that compiles the JavaScript code of our app using Babel and serves it to the Expo app. It also pops up Expo Dev Tools, a graphical interface for Expo CLI.

Opening the app on phone

Install the Expo app on your device and scan the QR code you see in the terminal or in Expo Dev Tools.
Link the Expo App for Android and iOS.

If you are using a simulator or emulator, you may find the following Expo CLI keyboard shortcuts to be useful:

• Pressing i will open in an iOS simulator.
• Pressing a will open in an Android emulator or connected device.
• Pressing w will open in your browser. Expo supports all major browsers.

Chapter 2. React Views and Components

Create a View

First you need to add some dependencies before we move on.

yarn add the following libraries

yarn add react-native-paper react-native-safe-area-context

once installed run your project again with expo start and add the following line of codes into your App.js

...
import { SafeAreaProvider } from 'react-native-safe-area-context';

...
export default function App() {
  return (
    <SafeAreaProvider>
        <Text>Hello World</Text>
    </SafeAreaProvider>
  );
}

The SafeAreaProvider will help us to keep our content inside the notches and status bar. It will not let any overlay that's why it's called "safe area"

After adding this we will add a view folder where we'll have all our views.

mkdir views
cd views

Now create a new folder with the name "timetable-view" and add the following three files in it with right extensions.

in package.json add the following line of code:

{
    "name": "@openasist/view-timetable",
    "main": "index.js",
    "dependencies": {
      
    }
}  

and in index.js add the following to get a view with a app bar in it

import React from 'react';
import {
    View,
    SafeAreaView,
    Text
} from 'react-native';
import {Appbar} from "react-native-paper";


/**
 * Timetable View
 *
 * Sample View, not implemented at this moment
 **/

class TimetableView extends React.Component {
    static navigationOptions = {
        header: null
    };

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <SafeAreaView style={{flex:1}}>
                <Appbar style={{backgroundColor: "#005f50"}}>
                    <Appbar.Content title="Time Table" subtitle="" />
                </Appbar>
            </SafeAreaView>
        );
    }
}


export default TimetableView;

Now import and call the TimetableView component inside App.js file and in the SafeAreaProvider tags like this:

...
<SafeAreaProvider>
   <TimetableView/>
</SafeAreaProvider>

The following should be the result:

now add the following line of code to get sense of the new view and how will it look:

...
render() {
        return (
            <SafeAreaView style={{flex:1}}>
                ...
                <View style={{flex: 1, justifyContent: "center", alignItems:"center", backgroundColor: "grey"}}>
                    <Text style={{color: "white", fontSize:20}}>New View</Text>
                </View>
            </SafeAreaView>
        );
    }

A new view has been created and this is the way we'll create other views too.

React Navigation

on your terminal use command:

yarn add @react-navigation/native @react-navigation/native-stack

Now, we need to wrap the whole app in NavigationContainer. Usually you'd do this in your entry file, such as index.js or App.js:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}

After that create your screen stack inside App.js:

import * as React from 'react';
...
import { createNativeStackNavigator } from '@react-navigation/native-stack';

...
const Stack = createNativeStackNavigator();
export default function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen 
            name="Timetable" 
            component={TimetableView} 
            options={{ 
              headerShown: false
             }}/>
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );
}

Now you can add as many views inside Stack.Navigator by using Stack.Screen for example now we create a new view so that we can use navigation to navigate between screens.

Create a view same as we did in last chapter and then add it in Stack.Navigator like this:

... 
<Stack.Screen 
  name="TimetableDetail" 
  component={TimetableDetailView} 
  options={{ 
  title: 'Overview',
  headerStyle: styles.headerStyle,
  headerTintColor: headerTintColor,
  headerTitleStyle: styles.headerTitleStyle
  }}/>

Also add the styles to support the above mentioned screen

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  headerStyle: {
    backgroundColor: "#005f50",
  },
  headerTintColor: {
    color: '#fff'
  },
  headerTitleStyle: {
    fontWeight: 'bold',
  }
});