Example of SQLite Database in React Native

by Snehal Agrawal

Here is an Example of SQLite Database in React Native. We are hoping you have read our previous post on Local Database in React Native App. SQLite database is one of the databases that we have discussed in our previous post. To define the SQLite we can say it is an open-source SQL database that stores data to a text file on a device. We can perform all the CRUD SQL transactions in this database and it is the most common database that we have heard of for mobile development. Let’s get started.

For SQLite database, we will use the SQLite3 Native Plugin which will work in both Android and iOS. It is based on Cordova SQLite plugin.

In this Example, we will make a HomeScreen with the option to go to other screens like

RegisterUser: To Register the User. (Create/Insert)
ViewAllUser: To View All Users. (Read)
ViewUser: To View Singel Users By Id. (Read)
UpdateUser: To Update the User.(Update)
DeleteUser: To Delete the User.

We will be having some custom components like Mybutton, Mytext, Mytextinput which will be used in place of react-native Button, Text, and TextInput.

How to Use

You just have to import the library like this:

1	import { openDatabase } from 'react-native-sqlite-storage';

and open the database using

1	var db = openDatabase({ name: 'UserDatabase.db' });

Now, whenever you need to make some database call you can use db variable to execute the database query.

db.transaction(function(txn) {

txn.executeSql(

query, //Query to execute as prepared statement

argsToBePassed[], //Argument to pass for the prepared statement

function(tx, res) {} //Callback function to handle the result

);

});

Please note down we are using callback function not real-time feedback because while running a query it does not provide the response instantly. Execution of query takes some time and give the response in the callback function.

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run

npm install -g react-native-cli

Run the following commands to create a new React Native project

react-native init ProjectName

If you want to start a new project with a specific React Native version, you can use the --version argument:

react-native init ProjectName --version X.XX.X

react-native init ProjectName --version react-native@next

This will make a project structure with an index file named App.js in your project directory.

Installation of Dependencies

This example is updated for the React Navigation 4.0+. For more about React Navigation 4 please have a look at Using React Navigation 4.0 in React Native apps.

To install the dependencies open the terminal and jump into your project

1	cd ProjectName

1. Install react-native-sqlite-storage dependency to use SQLite

1	npm install react-native-sqlite-storage --save

2. Install react-navigation dependency to import createAppContainer

1	npm install react-navigation --save

3. Install react-native-gesture-handler dependency to support gesture navigation

1	npm install react-native-gesture-handler --save

4. Install react-navigation-stack to import createStackNavigator

1	npm install react-navigation-stack --save

These commands will copy all the dependencies into your node_module directory.

CocoaPods Installation

After the updation of React Native 0.60, they have introduced autolinking so we do not require to link the libraries but need to install pods.

In this example we need to install the pods for react-native-gesture-handler and react-native-sqlite-storage.

Please use the following command to install CocoaPods

1	cd ios && pod install && cd ..

Database Setup

While working with React Native it provides two option:

You can make the database in runtime.
You can use the pre-populated database so that you can start working directly.

In this example, we will make the database on runtime and for the pre-populated database, You can visit Example of Pre Populated SQLite Database in React Native.

Example of SQLite

We will perform a complete CRUD operation in this example. Please create the following project structure and copy the code given below

Open the project directory and replace the following code

App.js

/*Example of SQLite Database in React Native*/
import React from 'react';
//For react-navigation 3.0+
//import { createAppContainer, createStackNavigator } from 'react-navigation';
//For react-navigation 4.0+
import { createAppContainer } from 'react-navigation';
import { createStackNavigator} from 'react-navigation-stack';

import HomeScreen from './pages/HomeScreen';
import RegisterUser from './pages/RegisterUser';
import UpdateUser from './pages/UpdateUser';
import ViewUser from './pages/ViewUser';
import ViewAllUser from './pages/ViewAllUser';
import DeleteUser from './pages/DeleteUser';

const App = createStackNavigator({
  HomeScreen: {
    screen: HomeScreen,
    navigationOptions: {
      title: 'HomeScreen',
      headerStyle: { backgroundColor: '#f05555' },
      headerTintColor: '#ffffff',
    },
  },
  View: {
    screen: ViewUser,
    navigationOptions: {
      title: 'View User',
      headerStyle: { backgroundColor: '#f05555' },
      headerTintColor: '#ffffff',
    },
  },
  ViewAll: {
    screen: ViewAllUser,
    navigationOptions: {
      title: 'View All User',
      headerStyle: { backgroundColor: '#f05555' },
      headerTintColor: '#ffffff',
    },
  },
  Update: {
    screen: UpdateUser,
    navigationOptions: {
      title: 'Update User',
      headerStyle: { backgroundColor: '#f05555' },
      headerTintColor: '#ffffff',
    },
  },
  Register: {
    screen: RegisterUser,
    navigationOptions: {
      title: 'Register User',
      headerStyle: { backgroundColor: '#f05555' },
      headerTintColor: '#ffffff',
    },
  },
  Delete: {
    screen: DeleteUser,
    navigationOptions: {
      title: 'Delete User',
      headerStyle: { backgroundColor: '#f05555' },
      headerTintColor: '#ffffff',
    },
  },
});
export default createAppContainer(App);

/*Example of SQLite Database in React Native*/

import React from 'react';

//For react-navigation 3.0+

//import { createAppContainer, createStackNavigator } from 'react-navigation';

//For react-navigation 4.0+

import { createAppContainer } from 'react-navigation';

import { createStackNavigator} from 'react-navigation-stack';

import HomeScreen from './pages/HomeScreen';

import RegisterUser from './pages/RegisterUser';

import UpdateUser from './pages/UpdateUser';

import ViewUser from './pages/ViewUser';

import ViewAllUser from './pages/ViewAllUser';

import DeleteUser from './pages/DeleteUser';

const App = createStackNavigator({

HomeScreen: {

screen: HomeScreen,

navigationOptions: {

title: 'HomeScreen',