Create and Organize Welcoming Screens in React Native Project

Welcoming screens are the first user interaction in any mobile/web application. They usually consist of three main screens, Login Screen, Create Account Screen, and Home Screen. In this blog, I will explain how to include these screens in your frontend React Native Project using the react-navigation package. Here are straight forward steps to help you organize these screens:

Installing react-navigation

First, you need to install the required packages in your frontend react-native project. The following command will install the dependencies to create the navigation structure in your application.

npm install @react-navigation/native

You will also need to installreact-native-gesture-handlerthat is used by this navigator.

npm install react-native-gesture-handler

You might need some other dependencies such as react-native-reanimatedor react-native-screens. Just check the React Navigation main page for more info.

Create navigation between your screens

You will be placing your navigation between the screens in your App.js . We will be using basic navigation of a stack of all the screens and store them in an object of createStackNavigator from the react-navigation-stack package that you will have to import along with the react-navigation.

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import CreateAccountScreen from './src/screens/CreateAccountScreen';
import HomeScreen from './src/screens/HomeScreen';
import LoginScreen from './src/screens/LoginScreen';
const AppNavigator = createStackNavigator(
  {
     Home: HomeScreen,
     Login: LoginScreen,
     CreateAccount: CreateAccountScreen
  }
);
export default createAppContainer(AppNavigator);

Notice how I’m importing all the screens files which I will be creating later in this blog. If you don’t specify the default screen that would show when you first open the app, it will be the first one you choose to put in your AppNavigator object. However, you can choose the default one by including the initialRouteName inside the AppNavigator as follows:

const AppNavigator = createStackNavigator(
  {
     Home: HomeScreen,
     Login: LoginScreen,
     CreateAccount: CreateAccountScreen
  },
  {
     initialRouteName: 'Login'
  }
);

Create the screens

As I mentioned before, the welcoming screens consist of three screens, Login Screen, Create Account Screen, and Home Screen. You will be creating a file for each one. The best practice to place these screens is creating a src/screens folder inside your project that will have all your application screens.

This is just a rough example of how they will look like:

• LoginScreen.js

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

const LoginScreen = () => {
  return (
    <View>
      <Text>LoginScreen</Text>
    </View>
  );
}

export default LoginScreen;

• HomeScreen.js

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

const HomeScreen = () => {
  return (
    <View>
      <Text>HomeScreen</Text>
    </View>
  );
}

export default HomeScreen;

• CreateAccountScreen.js

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

const CreateAccountScreen = () => {
  return (
    <View>
      <Text>CreateAccountScreen</Text>
    </View>
  );
}

export default CreateAccountScreen;

Hope that helps you to organize the first part of your screens in your frontend react-native application. Watch for my next blog on how to switch between these screens. If you have anything you would like to add, please comment below.