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

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.

Follow the commands provided by GitHub. Run these commands via the terminal/command prompt.

Now, the project has been successfully pushed to the repository. We will start implementing the user interface in the second part of this article.

continue on part 2.