10

SQLite3 Native Plugin for React Native

 3 years ago
source link: https://reactnativeexample.com/sqlite3-native-plugin-for-react-native/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

react-native-sqlite-2

SQLite3 Native Plugin for React Native for Android, iOS, Windows and macOS. This plugin provides a WebSQL-compatible API to store data in a react native app, by using a SQLite database on the native side.

Inspired by fantastic work done by Nolan Lawson. It should be a drop-in replacement for react-native-sqlite-storage. It works pretty well with PouchDB on React Native app.

Getting started

Add react-native-sqlite-2 to your dependencies:

$ npm install react-native-sqlite-2 --save
Shell

Link native dependencies

From react-native 0.60 autolinking will take care of the link step but don't forget to run pod install.

$ react-native link react-native-sqlite-2
Shell

iOS/macOS

If using cocoapods in the ios/ directory run

$ pod install
Shell

Android

Please make sure AndroidX is enabled in your project by editting android/gradle.properties and adding 2 lines:

android.useAndroidX=true
android.enableJetifier=true

Usage

import SQLite from "react-native-sqlite-2";

const db = SQLite.openDatabase("test.db", "1.0", "", 1);
db.transaction(function (txn) {
  txn.executeSql("DROP TABLE IF EXISTS Users", []);
  txn.executeSql(
    "CREATE TABLE IF NOT EXISTS Users(user_id INTEGER PRIMARY KEY NOT NULL, name VARCHAR(30))",
    []
  );
  txn.executeSql("INSERT INTO Users (name) VALUES (:name)", ["nora"]);
  txn.executeSql("INSERT INTO Users (name) VALUES (:name)", ["takuya"]);
  txn.executeSql("SELECT * FROM `users`", [], function (tx, res) {
    for (let i = 0; i < res.rows.length; ++i) {
      console.log("item:", res.rows.item(i));
    }
  });
});
JavaScript

There is a test app in the test directory.

Using with PouchDB

It can be used with pouchdb-adapter-react-native-sqlite.

import PouchDB from "pouchdb-react-native";
import SQLite from "react-native-sqlite-2";
import SQLiteAdapterFactory from "pouchdb-adapter-react-native-sqlite";

const SQLiteAdapter = SQLiteAdapterFactory(SQLite);
PouchDB.plugin(SQLiteAdapter);
var db = new PouchDB("mydb", { adapter: "react-native-sqlite" });
JavaScript

Troubleshooting

Row too big to fit into CursorWindow (Android)

You can set a limited windowSizeBytes for CursorWindow and try-catch the exception by adding following code to your MainApplication.onCreate in MainApplication.java:

try {
  Field field = CursorWindow.class.getDeclaredField("sCursorWindowSize");
  field.setAccessible(true);
  field.set(null, 100 * 1024 * 1024); //the 100MB is the new size
} catch (Exception e) {
  if (DEBUG_MODE) {
    e.printStackTrace();
  }
}

Note that it requires Android 9 (API level 28).

GitHub

SQLite3 Native Plugin for React Native for iOS, Android, Windows and macOS. — Read More

Latest commit to the master branch on 12-11-2020
Download as zip

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK