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

Published in

The Startup

3 min readFeb 5, 2021

Wondering how it is possible to develop your first ever REACT NATIVE application in 2021 in just 10 days? Well, today we are living in a highly tech-driven world, where everything is possible if you are on the right path and equipped with the right tools. And this statement is 100% true when it comes to developing a mobile application with React Native.

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

Short Note: By the end of this article, we will have an app structure that you are surely able to run on a real device or simulator for testing!

Complete Project Ref 👇🏻

Setting Up Initial Routes, Login and Register Screen

Setup

In the first instance, we’re going to use a stack navigator. I mentioned earlier React Navigation pushes and pops routes, and it does so to and from a stack.

The stack navigator is a stack containing your app’s routes, where by default your first screen is your root screen. As you transition through your app’s screens, the new screen is placed on top of the stack.

A few notes on the above:

First, we’re importing all of our screens as you normally would in any React/React Native application
We’re then initiating our stack using createStackNavigator and creating a stack screen for each of our Initial Screen (Splash Screen)using their components
And on top of that we are mounting Auth Component (Login and Register Screen) and MaterialBottomNavigationComponent
Finally, we’re wrapping our stack screens with NavigationContainer, which is responsible for managing our app’s state

Splash Screen

Login Screen

A few notes on the Login Screen:

We are importing AsyncStorage from @react-native-async-storage/async-storageand initializing the values if any in ComponentDidMount() function
Using react-native-paper for UI, importing TextInput to accept EmailID and Password
When the login button is clicked, the data is validated (email and password). Later, it is checked if they exist in the AsyncStorage; if the values exist User is redirected to MaterialBottomNavigation else Error is generated and user has to Register to Login

Register Screen

A few notes on the Register Screen:

Using react-native-paper for UI, importing TextInput to accept all the necessary input fields.
For user profile image we are going to use react-native-image-crop-picker
When the register button is clicked, the data is validated (email, password and mobile number). And, is uploaded to the AsyncStorage; after that exist User is redirected to MaterialBottomNavigation else Error is generated about the reason user was not redirected.

Login and Register Screen UI