Clone Experiment #2: Online Ticket Booking universal app for web & mobile using React Native
Tags: react, reactnative, clone, travel
Published: 2022-02-03 11:57:06

**Introduction**

We used Next.js and [NativeBase v3](https://nativebase.io/?utm_source=devto&utm_medium=Social&utm_campaign=Article&utm_id=Main+Website) to construct a Hotel and Flight checkout flow inspired by [MakeMyTrip](https://www.makemytrip.com/). The goal was to illustrate the adaptability of several NativeBase components, find out about any deficiencies with NativeBase, and try to overcome the shortcomings. This would allow us to improve NativeBase’s range of usability. We decided to name the project “Make Your Trip.” 
 
Here are the [instructions](https://docs.nativebase.io/installation) to install NativeBase in a Next.js project. 

**Challenges** 

While replicating the complex UI of MakeMyTrip, we came across a few hurdles. They were taken care of using different components offered by NativeBase. 

The overview of the challenges with their fixes are listed below:
 

- Animations

The header animation of the “Make Your Trip” is implemented using the simple NativeBase components and react hooks.

Here, on scroll,  we need to calculate the window height using the event listener, and then using react hook. We also changed the visibility of the header components.The following NativeBase components were used for the task. 

```javascript
React.useEffect(() => {
    // window is accessible here.
    window.addEventListener("scroll", changeVisibility);
  }, []);
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6568phcroct98ay6i6k8.gif)

- Tabs

We needed to construct the tab component to match the design. The following NativeBase components were used for the task.

1. HStack
2. Pressable
3. Divider

The state hooks used were:

```javascript
const [tabName, setTabName] = React.useState("AllOffers");
```
And changing the TabName value on onPress was done as follows. Here is an example:

```javascript
onPress={() => {
  setTabName("AllOffers");
}}
```

Now, we can easily check the value of tabName and render UI using ternary operator. Here is an example:

```javascript
borderBottomColor: tabName == "AllOffers" ? "#fd2578" : "f9fafb",
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tlldol5qy05ri1not5or.png)

And our goal of implementing the tab component is fulfilled.

**Responsive layout**

NativeBase provides a simple way to add [responsiveness](https://docs.nativebase.io/responsive) to your components.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4lj01rgtvwzmp3y69mxu.png)

Responsive syntax relies on the breakpoints defined in the theme object. 

For making our components responsive we need to provide the prop value as an object in which the actual values are defined against different breakpoints. 

For example:  

```javascript
w={{ sm:"24",md:"32",lg:"40",xl:"48" }}
// here sm,md,lg,xl depicts the screen sizes//
```

We can also do the same using the array syntax:

```javascript
w={[24, 48, 72]}.
// here value 24,48,72 depicts value for small,medium,large screen sizes//
```

**Conclusion**

With this experiment, we were able to showcase NativeBase’s capabilities extensively and dig deeper into Next.js. The ease with which Next.js integrated with NativeBase was a blessing for us. This ease of integration allowed us to execute a complex UI by writing minimal code without compromising the design. The code was written once and adapted for multiple screen sizes—mobile, web, and tablets—without any additional code.

We believe NativeBase can do more, especially since existing peers currently lack the Tabs component. It would also be wonderful if they had more versatile animation components. There is always scope for improvement, and the team is working tirelessly to make NativeBase better every day.