Clone Experiment #2: Online Ticket Booking universal app for web & mobile using React Native

Introduction

The team constructed a Hotel and Flight checkout flow inspired by MakeMyTrip using Next.js and NativeBase v3. The objective was to "illustrate the adaptability of several NativeBase components, find out about any deficiencies with NativeBase, and try to overcome the shortcomings." This effort was termed "Make Your Trip."

See the NativeBase installation instructions for Next.js projects.

Challenges

While replicating the complex UI of MakeMyTrip, the team encountered several obstacles that were addressed using different NativeBase components.

Animations

The header animation utilized simple NativeBase components and React hooks. On scroll, the window height was calculated via event listener, then state updates modified header component visibility:

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

Tabs

The tab component was built using:

• HStack
• Pressable
• Divider

State management employed:

const [tabName, setTabName] = React.useState("AllOffers");

TabName updates occurred on press:

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

Conditional rendering used ternary operators:

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

Responsive Layout

NativeBase provides straightforward responsiveness implementation. Responsive syntax relies on theme-defined breakpoints.

Component props accept object values with breakpoint-specific assignments:

w={{ sm:"24",md:"32",lg:"40",xl:"48" }}
// sm, md, lg, xl depict screen sizes

Array syntax is also supported:

w={[24, 48, 72]}
// values correspond to small, medium, large screen sizes

Conclusion

This experiment successfully demonstrated NativeBase's extensive capabilities alongside deeper Next.js exploration. The seamless Next.js and NativeBase integration enabled building complex UIs with minimal code while maintaining design fidelity. A single codebase adapted across mobile, web, and tablet platforms without additional modifications.

The team identified growth opportunities: introducing a Tabs component and expanding animation capabilities. "The team is working tirelessly to make NativeBase better every day."