Example of SQLite Database in React Native

May 7, 2019August 31, 2018 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:

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

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

and open the database using

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

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 response
  );
});

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 response

);

});

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

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

Installation of Dependencies

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

cd ProjectName

1	cd ProjectName

1. To use openDatabase we need to install react-native-sqlite-storage dependency.
Run the following command.

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

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

2. In this Example, we are going to use createStackNavigator component to navigate so you need to install react-navigation and react-native-gesture-handler dependencies. If you are new to React Navigation then visit Switch from One Screen to another using React Navigation 3.+ (Router) this will help you.
Run the following commands

npm install react-navigation --save

1	npm install react-navigation --save

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

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

This command will copy all the dependencies into your node_module directory. –save is optional, it is just to update dependencies in your package.json file.

Linking of Dependencies

After installing the dependencies you need to link it with your project using

react-native link

1	react-native link

After linking the dependency if you face Could not Compile Settings File project/android/settings.gradle error while building and installing the project then you can find the solution here.

This Linking will link react-native-gesture-handler and react-native-sqlite-storage but in some cases, Linker does not link the Android (IOS linking is fine, the problem is with Android only) project properly so please link the Android project manually. To link Android project please follow the below steps (If your Android project is properly linked then you can check and skip the step)

Go to the SqliteExample> android > app > build.gradle.
Scroll down and add the following dependency.

implementation project(':react-native-sqlite-storage')

1	implementation project(':react-native-sqlite-storage')

Open SqliteExample> android > settings.gradle and add the following lines.

include ':react-native-sqlite-storage'
project(':react-native-sqlite-storage').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sqlite-storage/src/android')

1 2	include ':react-native-sqlite-storage' project(':react-native-sqlite-storage').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sqlite-storage/src/android')

Open SqliteExample> android > app > src > main > java > com > sqliteexample> MainApplication.java and add the following lines in imports.

import org.pgsqlite.SQLitePluginPackage;

1	import org.pgsqlite.SQLitePluginPackage;

Scroll down and add the following line in getPackages after new MainReactPackage(). Please add a comma(,) and then add

new SQLitePluginPackage()

1	new SQLitePluginPackage()

Here we have done with our installation of the library. If you are still facing the trouble please comment below so that we can help you out from the problem.

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.

Just to confirm the dependencies here is the screenshot of the dependencies that we are using :

If you are on the same boat then let’s go further or please update your package.json and run npm install to install new dependencies.

For this Example, we are using the following structure. You have to make page directory in SqliteExample and components directory under that. Make the marked js files too.

You can download the code from Github and can run directly

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 Version 2+
//import {createStackNavigator} from 'react-navigation';
//For React Navigation Version 3+
import {createStackNavigator,createAppContainer} from 'react-navigation';
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',
    },
  },
});
//For React Navigation Version 2+
//export default App;
//For React Navigation Version 3+
export default createAppContainer(App);

/*Example of SQLite Database in React Native*/

import React from 'react';

//For React Navigation Version 2+

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

//For React Navigation Version 3+

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

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',