SQLite with expo-sqlite in React Native

Introduction

SQLite lets your app save and read data on the device. Using expo-sqlite helps you work with SQLite easily in React Native apps.

You want to save user notes or settings locally on the phone.

You need to store a list of items that the user can add or remove.

You want to keep data available even when the app is closed or offline.

You want to organize data in tables and run simple queries.

You want a small database without needing an internet connection.

Syntax

React Native

import * as SQLite from 'expo-sqlite';
const db = SQLite.openDatabase('mydb.db');

db.transaction(tx => {
  tx.executeSql('SQL QUERY', [], (tx, results) => {
    // handle results
  });
});

Use openDatabase to create or open a database file.

Use transaction to run SQL commands safely.

Examples

Open or create a database named 'test.db'.

React Native

const db = SQLite.openDatabase('test.db');

Create a table called 'items' with columns 'id' and 'name' if it doesn't exist.

React Native

db.transaction(tx => {
  tx.executeSql('CREATE TABLE IF NOT EXISTS items (id INTEGER PRIMARY KEY NOT NULL, name TEXT);');
});

Insert a new item named 'Apple' into the 'items' table.

React Native

db.transaction(tx => {
  tx.executeSql('INSERT INTO items (name) VALUES (?);', ['Apple']);
});

Select all rows from 'items' and log them to the console.

React Native

db.transaction(tx => {
  tx.executeSql('SELECT * FROM items;', [], (tx, results) => {
    console.log(results.rows._array);
  });
});

Sample App

This app creates a local SQLite database and a table called 'items'. It shows a button to add new items. When you press the button, a new item is saved and the list updates to show all items.

React Native

import React, { useEffect, useState } from 'react';
import { View, Text, Button, FlatList } from 'react-native';
import * as SQLite from 'expo-sqlite';

const db = SQLite.openDatabase('mydb.db');

export default function App() {
  const [items, setItems] = useState([]);

  const fetchItems = () => {
    db.transaction(tx => {
      tx.executeSql('SELECT * FROM items;', [], (tx, results) => {
        setItems(results.rows._array);
      });
    });
  };

  const addItem = () => {
    const newItem = 'Item ' + (items.length + 1);
    db.transaction(tx => {
      tx.executeSql('INSERT INTO items (name) VALUES (?);', [newItem], () => {
        fetchItems();
      });
    });
  };

  useEffect(() => {
    db.transaction(tx => {
      tx.executeSql(
        'CREATE TABLE IF NOT EXISTS items (id INTEGER PRIMARY KEY NOT NULL, name TEXT);',
        [],
        () => fetchItems()
      );
    });
  }, []);

  return (
    <View style={{ flex: 1, padding: 20 }}>
      <Button title="Add Item" onPress={addItem} />
      <FlatList
        data={items}
        keyExtractor={item => item.id.toString()}
        renderItem={({ item }) => <Text>{item.name}</Text>}
      />
    </View>
  );
}

Important Notes

Always run database commands inside transaction for safety.

Use placeholders ? in SQL to avoid errors and injection.

Remember to update your UI state after database changes to show fresh data.

Summary

expo-sqlite lets you store data locally in a small database.

Open a database, create tables, insert and query data with SQL commands.

Use React state to show database data in your app interface.