Clone Experiment #4: Responsive login and checkout flow app for web & mobile

Introduction

NativeBase maintains over 17,000 GitHub stars as a popular choice for building mobile and web applications from a single codebase. The team created a checkout flow inspired by Nykaa using Next.js and NativeBase v3 to evaluate component versatility and identify improvement areas. The experiment successfully demonstrated how "the ease with which Next.js integrated with NativeBase was a blessing."

View the Live Demo

Challenges

Creating a Nykaa-inspired checkout interface required thoughtful component composition. While NativeBase offered numerous primitive components, the team combined multiple elements to build custom components matching specific design requirements without sacrificing code quality.

Tabs

Custom tab components were constructed using:

• HStack
• Pressable
• Divider

const [tabName, setTabName] = React.useState("Login");
 
<Pressable
  p="2"
  pb="4"
  pr="8"
  // @ts-ignore
  onPress={() => {
    setTabName("Login");
  }}
  borderBottomWidth="3px"
  _light={{
    borderBottomColor:
      tabName == "Login" ? "#fd2578" : "coolGray.50",
  }}
  _dark={{
    borderBottomColor:
      tabName == "Login" ? "primary.700" : "customGray",
  }}
>

Design Layout

NativeBase's array syntax streamlines responsive design implementation through defined breakpoints:

const breakpoint = {
  base: 0,
  sm: 480,
  md: 768,
  lg: 992,
  xl: 1280
}

Responsive values can be specified as objects:

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

Or using array syntax:

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

Design Tokens

NativeBase employs design tokens for streamlined, consistent development. Common properties have abbreviated forms:

color='red.400'
py={2}
bg="blue.500"
my={4}

Findings

Achieving cross-platform compatibility while maintaining minimal code requires careful abstraction. NativeBase simplifies this through design tokens, pseudo props, and utility props. Here's a practical example demonstrating light/dark mode support:

<VStack>
  <Text
    fontWeight="medium"
    _light={{
      color: tabName == "Address" ? "#fd2578" : "coolGray.900",
    }}
    _dark={{
      color:
        tabName == "Address" ? "coolGray.50" : "coolGray.400",
    }}
  >
    2 - Address
  </Text>
  <Text
    fontSize="sm"
    _light={{
      color:
        tabName == "Address" ? "coolGray.500" : "coolGray.400",
    }}
    _dark={{
      color:
        tabName == "Address" ? "coolGray.50" : "coolGray.400",
    }}
  >
    XYZ, Street 12, 96 Avenue
  </Text>
</VStack>

The _light and _dark pseudo props enable seamless theme switching without duplicating logic.

Conclusion

This experiment showcased NativeBase's extensive capabilities alongside Next.js integration benefits. The framework enabled building sophisticated UIs with minimal code while maintaining design fidelity across mobile, tablet, and web platforms, all from a single codebase. Though the team encountered challenges designing complex interfaces, combining multiple NativeBase components with React hooks created effective custom solutions. The team identified that "NativeBase can do more," particularly regarding component gaps competitors currently address, and remains committed to continuous platform improvements.