Create a Booking App UIs Using React-Native — Project Initiation (Part 1)

4 min readSep 20, 2023

In this comprehensive guide, we will take you step by step through the process of crafting captivating UIs for a tour booking app using the power of React Native. This dynamic mobile application will encompass a range of essential features, including:

1. Tour Type Selection

2. Tour Details Page

3. Order Form

4. Order List Management

The design we will be implementing is as follows. Hopefully, it will facilitate your learning experience when tackling the UIs code challenge in React Native.

From that design to the final part of the article series, we will learn the implementation of:

React Navigation Stack
React Navigation Bottom Tabs
React Native Vector Icons
React Native Maps
React Hook Forms
React Native Swiper
List Rendering

For the first part, we will focus on project initiation first.

1. Project Initiation

We start the work by initializing a React-Native project using version 0.71.13. Assuming that Node.js is installed, run the following command in the terminal/command prompt.

npx react-native init TourApp --version="0.71.13“

2. Library Installation

Here are the libraries that we will use in this project:

React Navigation Stack
React Navigation Bottom Tabs
React Native Vector Icons
React Native Maps
React Hook Forms
React Native Swiper

Run the following long command to install all of those libraries.

yarn add @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/stack react-native-gesture-handler @react-navigation/bottom-tabs @react-native-masked-view/masked-view react-native-maps react-hook-form react-native-swiper react-native-vector-icons; bundle install; cd ios; pod install; cd ..;

To complete the installation of React Navigation in the index.js file, add the code below:

import ‘react-native-gesture-handler’;

And under the MainActivity.java file, add the following function:

@Override protected 
void onCreate(Bundle savedInstanceState) { 
  super.onCreate(null); 
}

Still in the MainActivity.java file, don’t forget to add the imports at the top of the code:

import android.os.Bundle;

To complete the React Native Maps installation, open the ios folder where there will be a file with the extension .xcworkspace. Open the file using XCode.

In the hierarchy section, refer to the “Info” file. Then, add the property Fonts provided by the application and one value containing FontAwesome.ttf.

3. Git Initiation and Push to Repository

The configuration of the libraries to be used has been successfully installed in the project. Now, let’s store the project in a repository using Git.

First, create a new repository on GitHub.