SQLite database in React Native

Introduction

SQLite is an open-source SQL database used for storing data in mobile devices in the form of text files. It supports all the relational database features. There is no need to establish any linking or connection for performing any operations on the database. It works like other SQL databases, where we can perform any query and get our desired output. Since all the data resides in a text file, access to it involves time taking tasks, so it is advisable to perform such operation in the background so that one cannot block the UI.

Here in this blog, we focused on how to connect our application with SQLite and perform basic crud operations. We will use the SQLite3 Native Plugin, which will work in both Android and iOS for performing our task.

Let us develop an application that performs the essential operation:

Register User: For saving user details(Create/insert)

View All User: Get all details of all users. (Read)

View Single User: Get all details of single users. (Read by Id)

Update User: Update details of a user. (Update by Id)

Delete User: Delete the user. (Delete by Id).

How to Use SQLite Storage? 

To begin with, we have to import a npm library react-native-SQLite-storage in our newly created project. For this we need to run this command on terminal:

Or 

After a successful installation, we need to update our pod file for the newly added package. For this run the command below:

Now in order to use this package, first of all, import this package in our app.js file.

and open the database using

We can use the DB variable to execute the database query whenever we need to make a database call.

Steps to use sqlite in our project

  1. Open the project directory and replace the following code.

2. Now make a src folder and then make a navigator folder in the src folder in the root directory of your project and generate a file homeNavigator.js and paste the following code.

3. Now make a component folder in the src folder in the root directory of your project and generate the following file Mybutton.js, Mytext.js and Mytextinput.js and paste the following code.

Mybutton.js

Mytext.js

Mytextinput.js

  • Now create another folder named screen which contains the following files:
  1. HomeScreen.js
  2. RegisterUser.js
  3. UpdateUser.js
  4. ViewAllUser.js
  5. ViewUser.js
  6. DeleteUser.js

and paste the following code in their respective files.

HomeScreen.js

RegiserUser.js

UpdateUser.js

ViewAllUser.js

ViewUser.js

DeleteUser.js

To Run the React Native App

Open the terminal and run the following command in order to run the application

  1. For Android

  1. For iOS 

Outputs

      On running following command you get the following :

Thanks for giving your valuable time. Keep reading and keep learning

Leave a Reply