Gain insights into building applications with React Native Expo. Learn essential development concepts to create career opportunities and enhance your skills using familiar web technologies.

final.tar.gz

React Native

firstapp

components

states

style

flex

sound

camera

forms

forms_bonus

forms_bonus-solution

navigation

stack_challenge_solution

drawer_navigation

effect

storage

todo

React Native-test

You’ll learn to build applications using React Native Expo. It’s an amazing technology for web developers to learn building apps using technologies they would already be familiar with. It would be an amazing opportunity for companies to train their developers on this instead of hiring new app developers. 

This course contains a complete package with the most commonly used concepts in application development. It would create a foundation for you to explore this technology further.

Taking this course would open doors to many opportunities out there to progress further in your career as application developer.

Building Applications with React Native

Let's implement the Stack Navigator.



# Important terms to know

- `createNativeStackNavigator`: We’ll use this function to create two properties—`Screen` and `Navigator`. These help us create the `StackNavigator`.

- `NavigationContainer`: This is a wrapper component that wraps around the navigators used to manage our different navigators. It is usually used in the root component of our application (`App.js`).

node_modules/
.expo/
dist/
npm-debug.*
*.jks
*.p8
*.p12
*.key
*.mobileprovision
*.orig.*
web-build/
package-lock.json

# macOS
.DS_Store


import { StatusBar } from 'expo-status-bar';
import React from 'react';

import PageA from './components/PageA';
import PageB from './components/PageB';
// import PageC here

import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="PageA" >
        <Stack.Screen name="PageA" component={PageA} />
        <Stack.Screen name="PageB" component={PageB} />
        {/* Add Stack.Screen for PageC here */}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});


module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};


React

Dart

GoJS React

Typescript React

Vue.js

> **Note:** Once the server starts, click the URL next to “Your app can be found at:” to view the output.


---
Let’s go through the code to analyze the navigation flow.

# The `App.js` file
We’ll initialize the `StackNavigator` in the `App.js` file:

- **Lines 4–5:** We create two components, `PageA` and `PageB`, which will be our screens in the `components` folder. Therefore, we need to import them into the file.

- **Lines 9–10:** We import the `NavigationContainer` and `createNativeStackNavigator`.

- **Line 12:** We execute `createNativeStackNavigator` and store the result in the `Stack` variable, which contains the `Navigator` and `Screen` properties.

- **Lines 16–22:** Here, we create our navigator. We use the `Stack.Navigator` component to create the navigator. We also pass the `initialRouteName` property, which is the name of the screen that will be displayed first. We use `Stack.Screen` to add the different screens in our navigator. Next, we use the `component` property to pass the actual component that will be displayed. Finally, we use the `name` property to reference the screen when we navigate to it.


# The `PageA.js` file
Our first screen will be `PageA`. It will have a single button to navigate to `PageB`.

- **Line 4:** Every screen has a prop called `navigation`, which we can use to navigate to other screens.

- **Lines 7–9:** To navigate to `PageB`, we use the `navigation.navigate` method. We pass the name of the screen as the argument. We pass the function to the `onPress` handler of the `TouchableOpacity` component.

# The `PageB.js` file
Our second screen is `PageB`. We create a button to navigate to `pageA`.

There are other methods in the `navigation` object, such as:
- `navigation.push('RouteName')`
- `navigation.popToTop()`
- `navigation.goBack()`

> **Tip:** You can read more about navigation methods in the[React Navigation](https://reactnavigation.org/docs/en/navigation-prop.html) documentation.



Interact with the code editor in this lesson to learn about the Stack Navigator.

Welcome to the Course

Let's Get Started With React Native

Creating Our First Application

Handling Forms

Assessment on the Basics of React Native

Navigating Between Screens

Build a Music Player Application Using React Native

The useEffect Hook

Assessment on Navigating the Components and their Lifecycle

AsyncStorage

The Todo List Application

To-do List Assessment

Connecting To External API's

Assessment on APIs

State Management

Firebase

Password Manager

Final Quiz

Conclusion

The Stack Navigator

Important terms to know