This time I'm going to write a mobile app about a store using React Native.
There are several features that I need to achieve:
- Redux.
- Unit tests.
- Shopping cart.
- Recursive Categories/Product list. This is kinda special because I have to read some depth nested structure, but there is not a specific depth level.
- Java module: Native modules implementation.
The main structure, or at least an initial one is describe by the graphic below:
In order to get a better idea about how the app will looks like, I drawn some mockups:
There are 4 views, at least in the first iteration. I decided to make that because is enough for the initial requirement .
Now, I'll describe every view and all possible tasks that it requires:
- Home view
It's the first interface the user is able to interact with. Through this view, the user can see the main categories, go to the cart, and search a product. Let's see the features to make:
a. Search input. The user can search a product from here using a key word/phrase.
b. Search button. Used to start the search.
c. Main categories list.
d. Main button on the tab bar menu. The user can go back to Home using it.
e. Cart button on the tab bar menu. The user can go to the shopping cart from here.
- Recursive list view
Through this interface, the user can list every single category, and also subcategory and products if there are no more subcategories in the tree. Just because the depth level is unknown, is't necessary to make it recursive.
Features to make here:
a. Subcategory list.
b. Product list. When there are no subcategories, products are listed. Also, we'll have a button to go to the product detail.
- Product view
Thanks to this interface, the user is capable to see not only the details of the product but also, can add a specific quantity to the shopping cart if the user wishes it.
Features on this view: a. Back button available to get back to the list.
b. Product name.
c. Product price.
d. Product image.
e. Like/Unlike button.
f. Like counter.
g. Decrease product quantity.
h. Current quantity. Quantity to add to the cart.
i. Increase product quantity.
j. Go to cart view.
- Cart view
Shopping cart view is the final step before the user do the checkout.
In this view, the user can edit the product quantity to buy.
Features on this interface:
a. Back button to get back to where the user was.
b. Total amount for the current shop.
c. Product name, and product price.
d. Check option to add, or not to add this product to the current cart.
e. Add/Increase quantity buttons.
f. Subtotal amount. Basically product price multiplied by quantity.
g. Remove this product from the cart.
h. Checkout button. Pressing this button, the user can finish the shopping process.
Let's start!
In spite it seems like Home is the first view to make, I think it could be the Recursive list view, because at the end of the day, Home is just using this component with some initial data, so let's do that.
After a while, I got a first demo. No matter how depth the structure can be, it'll works:
By the way, if you are asking about why there are so much people with beard, I let you know I'm using placebeard.it to fake de images :D ...is a good images provider without restrictions to load them from an app.
Now it's time to build the home interface. In order to achieve that, I do need to change a little bit the stack navigator, because home requires a tab button navigator, but also, requires some others available views, like product detail and the recursive list interface, but we don't need it on the footer tab button.
The way to solve this, is to create an stack with the tab button navigator, and another one with the other two views. Graphically is more like
+Navigator
+---Tab Button Navigator
+------Home
+------Cart
+---Product Detail
+---Recursive List
With that in mind, I'm going to create the navigation structure using react-navigation, react-navigation-tabs, and react-navigation-stack libraries.
Also, there were need to run this command:
yarn add react-native-gesture-handler react-native-reanimated react-nat
ive-screens react-native-safe-area-context @react-native-community/masked-view
After coding for a little while, I got a first preview for the tab button footer:
Product detail is now in preview version, and it looks like above:
At this moment, our store is almost finish, at least in a first preview. We can add products to the cart, and then, we can see the shopping cart and make some editions as I show it below
After a while, I've implemented 3 kind of search.
- Search by name
- Search by price range
- Search by aviability
Java Module
One of the latest feature for this project is a Native Module, or Bridge, between our React Native / Javascript app, and native Java.
I wouldn't complicated myself on this one, I'll just make the "Hello World" of the Native Modules examples: a Toast message manager.
I'll show this message when the user has used a search, such as by name, or showing just available products.
There are two ways to do a Bridge for Android:
a. Creating a complete new projects where we just need to add the necessary files, and then imported it from our RN project. b. Add the bridge inside our existing RN project.
Guess what!, I'll choose the last one because I don't have time to deal with some details at compiling time in Android :)
So that, I just need to add a couple of files inside our main Java files:
And that's all. Now we are able to import our new StoreToastModule through NativeModules object using react-native library.
So, in order to use this new feature, we just need to add this line on the import's zone:
import { NativeModules } from 'react-native';
And then, we have to extract our new module to use it:
const { StoreToastModule } = NativeModules;
StoreToastModule.showToast('Showing all products');
So, we have finished our project, at least the functionality.
Now It's time to tidy up some parts, and then, make some unit tests.
Written with StackEdit.