Example of SQLite Database in React Native

August 21, 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
  );
});

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

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

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 commands will copy all the dependencies into your node_module directory. –save is optional, it is just to update dependencies in your package.json file.

CocoaPods Installation

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

cd ios && pod install && cd ..

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