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

Sankalp Pandey

Software Engineer

Introduction

With more than 17K stars on GitHub, NativeBase is today one of the go-to libraries for creating Mobile and Web applications using a single codebase. With the release of NativeBase version v3 and its upgraded features with vast arrays of components, we wanted to test out the components on offer by NativeBase.

We used Next.js and NativeBase v3 to create a checkout flow that was inspired by Nykaa. We intended to illustrate the adaptability of several NativeBase v3 components for this experiment, as well as find out about any deficiencies with NativeBase v3. A key goal was also to overcome shortcomings so as to improve the usability of NativeBase.

The final result of the experiment looked like this. Live Demo

Challenges

Replicating Nykaa’s checkout flow was challenging. With the help of primitive components on offer by NativeBase, we were able to craft out a custom component that meets our design needs without dropping the code quality.

NativeBase does offer a vast array of components but sometimes those components don’t fit the design requirements and to overcome that we incorporated several other components on offer from NativeBase to achieve the required design requirements.

Tabs

We needed to construct the tab component to match the design. We worked around other NativeBase V3 components and designed our own Tab component. We had used the following components

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

When it comes to designing a responsive layout NativeBase with its array syntax makes light work of the task.

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

Responsive syntax relies on the breakpoints defined in the theme object. For making our components responsive we needed to provide the prop value as an object in which the actual values are defined against different breakpoints.


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

The above can be achieved using the array syntax:


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

Design Tokens

NativeBase uses its own design tokens to make the development smooth and consistent. For example, we normally use background color, but In NativeBase we have used bg that not only makes the code minimal and saves time 😄. Below is just some example of that:


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

Findings

The idea of using the same code base that works across all platforms is not new, we have been trying to accomplish that with the help of various means. Not only using the same code base but also adding different features like adding the different colors for text and background to show the switch from light mode to dark mode.

To achieve all these by keeping the code minimal is sometimes tedious. But with NativeBase the task is simplified. Using different design tokens, Pseudo Props and Utility Props on offer by NativeBase helps us to keep the code minimal and also helps us to make the code compatible for all the platforms like mobile, tabs, and web.

To show these in action here is an example:


			<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>

In the above code example, we can see that just by using _light and _dark (here light and dark denotes the light and dark mode ) and props we can easily make the text color different in light and in dark mode.

Conclusion

With this experiment, we were able to showcase NativeBase capabilities extensively and dig deeper into key concepts of 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 with minimal code without compromising a single bit of design. The code was written once and adapted for multiple screen sizes—mobile, web, and tablets—without any additional code.

We ran into some issues while designing such a complex UI design, but we were able to overcome them by combining the other NativeBase V3 components with the state hook to create bespoke components that meet our demands. We believe NativeBase can do more, especially since existing peers currently lack the Tabs component. The team is working tirelessly to make NativeBase better every day.

Getting Started

Introduction

Examples

Blogs

Contribution Guidelines

Community