Example of SQLite Database in React Native

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:

and open the database using

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

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

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

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

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

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.

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

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

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


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:

  1. You can make the database in runtime.
  2. 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











To Run the React Native App

Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running
react-native run-ios (macOS only).

If you are facing null is not an object (Evaluating ‘NativeModules[“SQLite”][method]’) like the screenshot below.

Then open SQLiteProject/node_modules/react-native-sqlite-storage/src/android/build.gradle
and replace


As I was using the react-native:0.58.4 and the defined version was react-native:0.14.+, so just removed the version and added plus(+) for the latest version available and it worked for me. I have also updated compile with implementation because of Gradle 3.+ that Google announced at IO17. If you have no idea about the compile to implementation update then you can visit here, You will find the detailed answer to your question.

Here are the screenshots of the final outcome.


This is how you can use SQLite Database in React Native Application. If you want to see how to use pre-populated SQLite database then please visit Example of Pre Populated SQLite Database in React Native.

If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂

How useful was this post?

Click on a star to rate us!

Average rating / 5. Vote count:

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

24 replies
  1. Naresh
    Naresh says:

    I am doing POC on Sqlite with React Native. when i try execute below line getting complie time error. import org.pgsqlite.SQLitePluginPackage, it is expecting from value

    • Snehal Agrawal
      Snehal Agrawal says:

      Can you please check the SQLite version you are using?
      We have used the following version for the example. If you are using any other version then please let me know so that we can run the trial with that or share the screenshot of the log to help you out.
      “react-native-sqlite-storage”: “^3.3.6”,

    • Snehal Agrawal
      Snehal Agrawal says:

      Hello Naresh,
      Finally, I faced the same problem now and find a solution. Please open the following file


      and replace
      compile ‘com.facebook.react:react-native:0.14.+’ (Or other version)
      compile ‘com.facebook.react:react-native:+’

      This will solve your problem.

  2. Ali
    Ali says:

    why using setstate in constructor in VIEWAllUSERS.js ?
    because in react lifecycle we should not use setstate in constructor

    • Snehal Agrawal
      Snehal Agrawal says:

      Setting up state in constructor means you are assigning some default value to the state variable. If you do not want to setState in constructor you can skip it but if you try to get the value without setting the value then it will give you a state undefined error so you have to remember that first set the state and then get the value from state.

  3. Tara
    Tara says:

    I am using SQLite version 3.3.9. I am trying to run on the ios, i get the following error on the screen –

    null is not an object (evaluating ‘NativeModules[“SQLite”][method]’)






    global code

    • Snehal Agrawal
      Snehal Agrawal says:

      Are you talking about React?
      Web platform does not support SQL database. You can use the browser database to store the data in your browser. Can you please confirm which web technology you want to use?

  4. Jose Carlos
    Jose Carlos says:

    Hello my name is jose carlos, this is a great example to be able to integrate sqlite to react native I only have a question that I will appreciate the quick answer.

    How can I check where this database is physically stored in order to open it with a manager and check its data?

  5. Jose Carlos Carpio Lam
    Jose Carlos Carpio Lam says:

    I wanted to know one more thing about the sql
    query I see that in the example do a SELECT of a field but as it would be
    if I want to look for part of the id, the name of the user in the same query,
    I would appreciate your help. Thanks in advance

      • Jose Carlos Carpio Lam
        Jose Carlos Carpio Lam says:

        already great look this is my table and I did a like to search by name but in addition to search by name I want to search by its id
        “SELECT * FROM tabla1 where name like ?”,
        [‘%’ + input_user + ‘%’],

        • Snehal Agrawal
          Snehal Agrawal says:

          Try this:

          The concept is you can add as many as “?” you want in place of dynamic values and after that, you have to pass the array of values you want to pass but please be aware to manage the sequence of the values.

          “SELECT * FROM tabla1 where id = ? AND name like ?”,
          [id_value_here, ‘%’ + input_user + ‘%’],

  6. Pratibha
    Pratibha says:

    i have run on android device getting error please help

    Information:java: Errors occurred while compiling module ‘app’
    Information:javac 1.8.0_152-release was used to compile java sources
    Error:(3, 26) java: cannot find symbol
    symbol: class ReactActivity
    location: package com.facebook.react
    Error:(5, 35) java: cannot find symbol
    symbol: class ReactActivity
    Error:(11, 5) java: method does not override or implement a method from a supertype
    Error:(5, 26) java: cannot find symbol
    symbol: class ReactApplication
    location: package com.facebook.react
    Error:(8, 26) java: cannot find symbol
    symbol: class ReactNativeHost
    location: package com.facebook.react
    Error:(16, 61) java: cannot find symbol
    symbol: class ReactApplication
    Error:(18, 17) java: cannot find symbol
    symbol: class ReactNativeHost
    location: class com.sqliteexample.MainApplication
    Error:(40, 10) java: cannot find symbol
    symbol: class ReactNativeHost
    location: class com.sqliteexample.MainApplication
    Error:(18, 56) java: cannot find symbol
    symbol: class ReactNativeHost
    location: class com.sqliteexample.MainApplication
    Error:(39, 3) java: method does not override or implement a method from a supertype


Leave a Reply

Want to join the discussion?   Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.