Creating new screens

In this tutorial, you will learn how to replace an existing screen or create an entirely new screen component and place it in the navigation stack against a route. You may also be interested in our tutorial for adding custom screens into the Tab Bar. Before starting, make sure you have already set up your Git repo for app development.

To replace an existing screen in the app’s navigation stack, you can use the replaceScreenComponent from navigationApi. For example, if you want to change the LoginScreen with an entirely new Screen Component, create a new component in the ‘custom_code’ directory and import it in the ‘index.js’ file where you will apply the replaceScreenComponent method.

// MyCustomLoginScreen.js


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


const MyCustomLoginScreen = props => (
   <View 
     style={{flex: 1, justifyContent: "center", alignItems: "center"}}
   >	
     <Text>Custom login screen</Text>
   </View>
);

export default MyCustomLoginScreen;

In applyCustomCode in index.js

// index.js


import React from "react";
import {NativeModules} from "react-native";
import MyCustomLoginScreen from "./MyCustomLoginScreen";
const {RNCustomCode} = NativeModules;

export const applyCustomCode = externalCodeSetup => {
  externalCodeSetup.navigationApi.replaceScreenComponent(
"LoginScreen",
MyCustomLoginScreen
  );
};

Next, in order to create a new screen and add it to a new route in the navigation stack, you can use addNavigationRoute from navigationApi

// MyCustomScreen.js


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


const MyCustomScreen = props => (
   <View 
     style={{flex: 1, justifyContent: "center", alignItems: "center"}}
   >	
     <Text>My Custom screen</Text>
   </View>
);

export default MyCustomScreen;

In applyCustomCode in index.js

// index.js


import React from "react";
import {NativeModules} from "react-native";
import MyCustomScreen from "./MyCustomScreen";
const {RNCustomCode} = NativeModules;

export const applyCustomCode = externalCodeSetup => {
  externalCodeSetup.navigationApi.addNavigationRoute(
"customScreen",
"MyCustomScreen",
MyCustomScreen,
"All" // "Auth" | "noAuth" | "Main" | "All"
  );
};

addNavigationRoute method as the last argument requires you to specify to which navigator you want to add the route. You can choose one of these “Auth”, “noAuth”, “Main”, or “All”. App uses the react-navigation internally with the following navigator structure:

Root
  - Auth
  - noAuth
     - Main
     - All 

– “Root” navigator is SwitchNavigator which depending on the login status shows “Auth” or “noAuth” navigator. 
– “Auth” navigator is StackNavigator that contains all the authentication related routes such as: “LoginScreen”, “SignupScreen”, “CodeVerificationScreen”, “ForgotScreen” etc.
– “noAuth” is StackNavigator that contains “Main” and “All” navigators.
– “Main” is BottomTabNavigator which shows the Tab Bar WordPress menu described here. Use this navigator name to register new routes on App’s tab bar.
– “All” is StackNavigator which handles all other routes that are not accessible directly from App’s Tab Bar, whether they are accessible from the More menu or from some “Main” navigator screen.

Finally, for special cases where you might need to add a new screen after login or signup, like a landing page for the app before the user reaches the actual app content, you can use the combination of setFilterAfterAuthRoutes and setInitialAfterAuthRoute methods. For example, you want to show MyCustomScreen after a user logs into the app. For that you can do the following:

// index.js


import React from "react";
import {NativeModules} from "react-native";
import MyCustomScreen from "./MyCustomScreen";
const {RNCustomCode} = NativeModules;

export const applyCustomCode = externalCodeSetup => {
  const {navigationApi} = externalCodeSetup;

  navigationApi.setFilterAfterAuthRoutes(afterAuthRoutes => {
	return {
       ...afterAuthRoutes, 
       "MyCustomScreen": MyCustomScreen
      };
  });
  
  navigationApi.setInitialAfterAuthRoute(props => {
	return "MyCustomScreen";
  });
};