React Navigation is a popular library for routing and navigation in a React Native application. In this tutorial, you will build a social media application to explore how to navigate mobile application screens using react-navigation.

React Navigation is a popular library for routing and navigation in a React Native application.

This library helps solve the problem of navigating between multiple screens and sharing data between them.

At the end of this tutorial, you will have a rudimentary social network. It will display the number of connections a user has and provide a way to connect with additional friends. You will use this sample application to explore how to navigate mobile application screens using react-navigation.

This tutorial was verified with Node v14.7.0, npm v6.14.7, react v16.13.1, react-native v0.63.2, @react-navigation/native v5.7.3, and @react-navigation/stack v5.9.0.

Step 1 — Creating a New React Native App

First, create a new React Native app by entering the following command in your terminal:

npx react-native init MySocialNetwork --version 0.63.2

Then, navigate to the new directory:

cd MySocialNetwork

And start the application for iOS:

npm run ios

Alternatively, for Android:

npm run android

Note: If you experience any problems, you may need to consult troubleshooting issues for React Native CLI.

This will create a skeleton project for you. It doesn’t look much like a social network right now. Let’s fix that.

Open up App.js:

nano App.js

Replace the contents of App.js with the following code to display a welcome message:

App.js

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

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Welcome to MySocialNetwork!</Text>
      </View>
    );
  }
}

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

export default App;

Save the file. Now, when you run the application, a Welcome to MySocialNetwork! message will appear in your simulator.

In the next step, you will add more screens to your application.

#react-native #react