Create a Booking App UIs Using React Native — Stack Navigator & Bottom Tab Navigator (Part 2)

Please read part 1 here.

Continuing from the part of how to create a booking app UIs using React Native, in this part 2, we will focus on compiling the Stack Navigator and Bottom Tab Navigator structure in the application.

Until the end of the second part of this article, we will not put the actual UI, but we will create application page files that contain a dummy UI first.

The points that will be discussed in the second part are as follows:

• Bottom Tabs Navigator implementation
• Stack Navigator implementation

1️⃣ Arrangement of Bottom Tabs Navigator

First of all, we will create a Bottom Tabs navigation file. Bottom Tabs is a navigation system containing a list of icons at the bottom of the screen that represent the meanings of the page, and when one of the icons is clicked, it will bring and display users to the page.

The Bottom Tabs that we will create are as follows:

There are two tabs: the Home tab and the My Orders tab.

Immediately, we created a new file called Home.js in a new folder called screens.

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

const Home = () => {
    return (
        <View
            style={{
                alignItems: 'center',
                flex: 1,
                justifyContent: 'center'
            }}
        >
            <Text
                style={{
                    fontSize: 28,
                    fontWeight: 'bold'
                }}
            >
                Home
            </Text>
        </View>
    )
}

export default Home;

Then, create a new file, MyOrders.js, in the screens folder.

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

const MyOrders = () => {
    return (
        <View
            style={{
                alignItems: 'center',
                flex: 1,
                justifyContent: 'center'
            }}
        >
            <Text
                style={{
                    fontSize: 28,
                    fontWeight: 'bold'
                }}
            >
              My Orders
            </Text>
        </View>
    )
}

export default MyOrders;

Two-page files have been created. Create one more new file in the screens folder, naming it BottomTabs.js.

import React from 'react';

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

import Home from './Home';
import MyOrders from './MyOrders';

const ReactNavigationBottomTabs = createBottomTabNavigator();

const BottomTabs = () => {
    return (
        <ReactNavigationBottomTabs.Navigator>
            <ReactNavigationBottomTabs.Screen name="Home" component={Home} />

            <ReactNavigationBottomTabs.Screen name="MyOrders" component={MyOrders} />
        </ReactNavigationBottomTabs.Navigator>
    )
}

export default BottomTabs;

As can be seen in the code above, the preparation of a bottom tabs navigation can be made by creating a new navigation with createBottomTabNavigator(), then declaring the navigator in the UI with the tag <NameBottomTabsNavigator.Navigator> and in it declare the list screen using the tag <NameBottomTabsNavigator.Screen> then fill in the props name and component of each screen.

2️⃣ Stacking Navigator

Our code above is still not displayed in the application. We will compile a stack navigator first; a stack navigator is a screen navigation system showing stacked one page with the next. A simple example is when we are on the list item page when we press one of the items. The item detail page will be displayed above the list item page now, And when you press the back button from the item detail page, the item detail page will be discarded and returned to the list item page stack. That’s how the stack navigator works: in the form of stacks of pages.

We will compile a stack navigator in the App.tsx file. Here is the stack navigator code that we created in this experiment.

import React from 'react';

import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

const Stack = createStackNavigator();

import BottomTabs from './screens/BottomTabs';

const App = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="BottomTabs" component={BottomTabs} />
            </Stack.Navigator>
        </NavigationContainer>
    )
}

export default App;

We declare <NavigationContainer>, create a new stack navigator, and declare it by <NameStackNavigator.Navigator> and in it display the list screen using the tag <NameStackNavigator.Screen> then fill in the props name and component of each screen.

We still only have a BottomTabs page to display in the Stack Navigator. The result can already be run like this.

Next, we will create the login page as the first active page when entering the application. Create a Login file.js in the screens folder and type the code below.

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

const Login = props => {
    return (
        <View
            style={{
                alignItems: 'center',
                flex: 1,
                justifyContent: 'center'
            }}
        >
            <Text
                style={{
                    fontSize: 28,
                    fontWeight: 'bold'
                }}
            >
                Login
            </Text>

            <TouchableOpacity
                onPress={() => props.navigation.replace("BottomTabs")}
                style={{
                    backgroundColor: 'teal',
                    borderRadius: 10,
                    marginTop: 20,
                    paddingHorizontal: 20,
                    paddingVertical: 10
                }}
            >
                <Text
                    style={{
                        color: 'white',
                        fontWeight: 'bold',
                        fontSize: 20
                    }}
                >
                    Go To Bottom Tabs
                </Text>
            </TouchableOpacity>
        </View>
    )
}

export default Login;

It can be seen that there are command code props.navigation.replace(‘BottomTabs’). The command is used to navigate to the BottomTabs page by replacing and not stacking on it because it is known that after the Login page, we will prevent the user from returning to the Login page when the back button is pressed.

The Login page has been created but not registered in our Stack Navigator. Open the App.tsx file. We edited it again to register the Login page on the Stack Navigator, don’t forget to add the initialRouteName property with the value “ Login” because we want to make the Login page the main page and first accessed when the application is run.

import React from 'react';

import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

const Stack = createStackNavigator();

import Login from './screens/Login';
import BottomTabs from './screens/BottomTabs';

const App = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="BottomTabs" component={BottomTabs} />
                <Stack.Screen name="Login" component={Login} />
            </Stack.Navigator>
        </NavigationContainer>
    )
}

export default App;

When run, we can try the application navigating from the Login page to the BottomTabs page.

Finally, we create the remaining pages we will register that have yet to be created, namely DestinationDetail.js, OrderSuccess.js and PersonalInformation.js, while creating them in the screens folder and filling the file with the following code.

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

const DestinationDetail = () => {
    return (
        <View
            style={{
                alignItems: 'center',
                flex: 1,
                justifyContent: 'center'
            }}
        >
            <Text
                style={{
                    fontSize: 28,
                    fontWeight: 'bold'
                }}
            >
                Destination Detail
            </Text>
        </View>
    )
}

export default DestinationDetail;

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

const OrderSuccess = () => {
    return (
        <View
            style={{
                alignItems: 'center',
                flex: 1,
                justifyContent: 'center'
            }}
        >
            <Text
                style={{
                    fontSize: 28,
                    fontWeight: 'bold'
                }}
            >
                Order Success
            </Text>
        </View>
    )
}

export default OrderSuccess;

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

const PersonalInformation = () => {
    return (
        <View
            style={{
                alignItems: 'center',
                flex: 1,
                justifyContent: 'center'
            }}
        >
            <Text
                style={{
                    fontSize: 28,
                    fontWeight: 'bold'
                }}
            >
                Personal Information
            </Text>
        </View>
    )
}

export default PersonalInformation;

And in App.tsx, we list all three pages.

import React from 'react';

import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

const Stack = createStackNavigator();

import Login from './screens/Login';
import BottomTabs from './screens/BottomTabs';
import DestinationDetail from './screens/DestinationDetail';
import OrderSuccess from './screens/OrderSuccess';
import PersonalInformation from './screens/PersonalInformation';

const App = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Login">
                <Stack.Screen name="BottomTabs" component={BottomTabs} />
                <Stack.Screen name="Login" component={Login} />
                <Stack.Screen name="DestinationDetail" component={DestinationDetail} />
                <Stack.Screen name="OrderSuccess" component={OrderSuccess} />
                <Stack.Screen name="PersonalInformation" component={PersonalInformation} />
            </Stack.Navigator>
        </NavigationContainer>
    )
}

export default App;

We now have all the needed pages, which can be pushed to git first. We will continue to create the UI based on the design in the following article.

Interested in realising your dream app to help your business and your target market? Contact Upscalix now.

This article is written by Upscalix Senior Frontend and Mobile Developer, Nova.