One Person Use, No Internet Required and SQLite DB — React Native (Part 2)

The most unique feature of this product or application is that it can manually be configured for any type of requirement, i.e., for E-Commerce or Small Scale Shops for keeping track of their inventory and purchases. This article is a continuation of the previous blog check it before referring this blog (Refer — https://medium.com/swlh/built-your-mobile-app-in-10-days-with-react-native-abdeafce0dfc)

React Native One Person Use, No Internet Required and Complete SQLite

Complete Project Ref 👇🏻

Creating Sub Category, Show Sub- Category and Orders Screen

The complete SQLite DB call depends on this ONE function and returns Promise on Success and Reject on Error.

Add Sub- Category Screen

Firstly, we are going to connect our code to the “Local Database” from SQLite Storage. Here, we are going to fetch all parent categories and are giving option to select to which “Category” our “Sub-Category” belongs.

import { openDatabase } from 'react-native-sqlite-storage';
const db = openDatabase({ name: ‘SQLite.db’, location: ‘default’, createFromLocation: ‘~SQLite.db’ });

Code to link with local storage (package used ‘react-native-sqlite-storage’)

A few notes on the same:

• The code is to accept details from user regarding the sub-category.
• Details include- Parent Category via dropdown and sub-category name only.
• The code creates a sub category and link it to the category in such a way that, when the parent category is deleted all the sub-categories link to the same are deleted.
• Similar process of “Cascade Delete” is implemented for Products also, only the level of detail accepted are more, i.e., Price, GST Number and HSN Number.

Add Sub- Categories Screen

Show Sub- Category Screen

The UNIQUE feature of the page is the filter at the Header for moving between different Sub-Categories Option from the Category (refer image below for more understanding)

A few notes on the UI:

• This UI is created WITHOUT using External Package for the filter purpose and is really simple to implement.
• We are basically using flexWrap: "wrap", flexDirection: “row” and using FlatList to render all the other Category option.
• And, onPress: we call database of sub-catogories belonging to that Category.
• The latter part is just rendering the FlatList with the subcategories we received from the database.
• If NO Sub- Categories are returned display — “No Sub Categories”; i.e., if the database length on retrieval is zero we display this message.

View Sub- Categories Screen

Order Screen

A few notes on the Screen:

• This Screen is mainly to display all the selected products with the respective price.
• The “Bottom Left” shows the total cost for all the picked products.
• The “Bottom Right” will check out all the details and accept name for the purchase for “History”
• All the information is stored in “History ” for future reference and get the complete cost required for the same.

Reference Link

• GitHub Repo
• Youtube Video