Integrating React Native with SQLite

1. Overview

This document explains how to integrate React native with SQLite DB.

2. Technologies and Tools Used

The following technologies and tools have been used to create a sample react application and integrating with it SQLite.

Technologies:

React Native
JavaScript
Node JS
SQLite

Tools:

Visual Studio Code
Android Studio

3. Use Case

Assume that there is a requirement to maintain user data within the mobile application.

4. Architecture

After completing react native environment setup please follow the below steps.

To create a sample project in react native, Execute the command in cmd prompt or visual studio terminal – npx react-native init <project name>
Now the project will be created. To run the project first get into your project folder and execute the command – npx react-native run-android
It will open in the virtual device and you can check it.
To install SQLite – npm install react-native-sqlite-storage –save
To import SQLite in your program– import { openDatabase } from ‘react-native-sqlite-storage’;
To open Database– openDatabase({ name: ‘user_db.db’, createFromLocation : 1})
To make some database call you can use db variable to execute the below 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 ); });

Project Code – reactsqlite

Home Screen