Build coffee shop application in React Native
By: Turmunkh Nergui
- Setting up the environment
- Exception Handling
- Shopping Cart
Have you ever wondered how the popular iOS and Android applications are made? I wondered as well. That’s why I tried to spend some time recreating the Starbucks application using React Native.
It’s a simple application, with multiple tabs that point to different features. It allows you to choose a location and purchase a coffee directly from the app. The application allows you to manage funds through your application and subscribe to purchase coffee beans as well. We chose to implement an example Woods Coffee application because we love their coffee!
I’d like to share this great experience with all of you. The application definitely needs some improvements as well. But I wish this article could be of use to you.
In order to build this application, I used the following stacks:
- React Native
- Styled Components
Setting up the Environment
Basically I followed the tutorial on the official React Native website.
I installed the node, watchman, and XCode. If you are using an M1 Mac, there are additional instructions that you can follow to make the React Native framework work.
I’m assuming you are familiar with XCode, Firebase and Stripe. If you are not, there are many great articles on the internet that could help you set up.
Now we get to the fun part. The process is what I enjoy the most during application development. Obviously the end result is important but feeling the excitement of building an application is the crucial part for me. The part I focused on smooth and detailed interfaces that quickly respond to the users’ interactions and provide visual feedback.
The whole project is structured like the following:
Whenever I start a new project, I start by implementing the core components. By core, I mean the theme & the common components that I’m going to use throughout the project.
For the implementation of our core library, I’ve used the styled-components & the React Native core components. I have used styled-components for multiple web projects and I wanted to try out the React Native version. If you are familiar with developing the web with plain CSS and want to add some JS to your CSS, I’d recommend using styled-components.
Moving on, we can specify the colors and the most important specification of our development: base space. We use the base space to calculate the spacing between the different components. Most of the spaces in the design can be calculated by finding the fibonacci number of the given number multiplied by the base space.
Theme will be used to build up the rest of the components that we are going to use to build our components. Now onto the next part: Engineering the gears or building the components.
- Remote Image
- Safe Area Screen
Deep dive into component development
This component is basically our core. If you want a single component that could position your element in the center, apply background color, or build your next unique components, this is the main element that will do the job. We target this component to support every system specific property. What that means is it will support every style that can be found here: Layout and View props. On top of that, we have the freedom to customize some of the properties to meet our needs. We always look for ways to efficiently & effectively pass properties that could fasten the development. One thing we did was to optimize some of the parameters such as padding & margin. Previously, we specified padding and margin like the following:
Few things that I did not like this approach was that if we want to add more styles, the component would look like the following:
But this approach is not effective since the junior engineers would have to figure out what each of the styles do. And imagine if they copy and pasted this code to every single file we have and it would be a large file with similar looking codes everywhere. Copy a few of this in a single file, and bam, you have 300 lines of code for the component that renders red box that renders texts and that’s it. That’s why we wanted to limit what we are going to pass to the core elements. One of the optimizations we made was to pass our padding or margin as an array.
Instead of passing multiple padding options, we can only use a single option that could be expanded to accept multiple variations of the style that can be applied to the element. The implementation could look something like the following:
The array is deconstructed to the direction of the element & the number is calculated using fibonacci sequence which is multiplied by the base space number. This way we can simply pass the lower number that could result in the correct ratio of the corresponding elements of the application.
2. Remote Image
This is a simple image rendering component that fast loads the image on react native apps. We used react-native-fast-image library which provides us with multiple features such as caching & preloading the images. We added a loading state & aspect ratio feature that comes pretty handy.
3. Safe Area Screen
This simple component originated from the React Native SafeAreaView component which helps to render the content within the safe boundaries of the device.
We modified it to apply our default background color & keyboard dismissing functionality. If the user wants to hide the keyboard, it is possible to dismiss it by touching anywhere on the screen.
Center is probably the most used throughout the application. It centers any elements to the center of the parent element. By default, it centers horizontally. But if you pass the full property, it’ll center both horizontally and vertically.
We love the grid. It ensures consistency to the whole application layout. There is no default component that we can use out of the react native. We decided to build one where it imitates the behavior of the web grid.
Main two points of this component are:
- The grid will be fluid which means that it will scale and resize.
- The spacing between the grid columns and rows are customizable.
The implementation looks like the following:
6. Queue & Stack
Queue is a simple component that places elements into the row & takes any space between the elements. Stack solves the same problem but in a column direction. Main difference is that we wanted our components to be as simple as possible. These components help with the overall structure of the application layout. The main problem we are trying to solve is code efficiency & readability & simple to use components.
Let’s compare the following to code. By having the queue, what we’re achieving is we can simply specify the gap between the two elements without any extra components. On top of that any developer can look into the code & see that the elements are in a row position. You can simply add another element into the queue & it will automatically take a space between the items again. On the other hand, for the second implementation, you have to add another component to take space.
Text is the most simple component here. It wraps the React Native text component & applies any customization we need. It will apply the default font family and accepts variants to apply the necessary font size, line height, and text decorations. In the end, we only pass the variant & color to the text component which makes it utterly simple. You can see the example below to check out the example.
Let’s end here today. We discussed how we structured our whole project & what kind of technologies and additional libraries we used to achieve this result. Our main focus today was on the core components because this is simply the most important piece of our application. We’ll pick up from the additional component & into the navigation in the future.
If this type of work interests you, or if you have any questions about the above implementation, please don’t hesitate to reach out! Our website is nestsolutions.llc or you can reach us at firstname.lastname@example.org