docs-src/docs/react-native-database.md
import {Steps} from '@site/src/components/steps'; import {Tabs} from '@site/src/components/tabs';
If you are looking for a React Native Database, you usually want three things:
RxDB covers all of these requirements out of the box. It is a local-first NoSQL database that runs deeply integrated with React Native, giving you the power of a full featured database engine inside your mobile app.
<center> <a href="https://rxdb.info/"></a>
React Native does not have a native database engine. To store data persistently and efficiently, RxDB offers multiple powerful options.
For the absolute best performance in React Native and Expo applications, the premium Expo Filesystem RxStorage is highly recommended. Built on expo-opfs, it completely bypasses the React Native bridge and delivers significantly faster read/write speeds than traditional SQLite.
If you prefer a free solution or specifically need SQLite, RxDB fully supports SQLite. It works on all mobile platforms and abstracts the complex SQL commands into a simple, NoSQL JSON document API.
Depending on your environment, different SQLite adapters are recommended:
<Tabs>For bare React Native projects, use react-native-quick-sqlite. It uses JSI (JavaScript Interface) to communicate directly with C++, effectively bypassing the slow React Native Bridge.
Installation:
npm install rxdb rxjs react-native-quick-sqlite
Configuration:
import { createRxDatabase } from 'rxdb';
import {
getRxStorageSQLite,
getSQLiteBasicsQuickSQLite
} from 'rxdb-premium/plugins/storage-sqlite';
import { open } from 'react-native-quick-sqlite';
const db = await createRxDatabase({
name: 'mydatabase',
storage: getRxStorageSQLite({
sqliteBasics: getSQLiteBasicsQuickSQLite(open)
}),
multiInstance: false,
ignoreDuplicate: true
});
If you are using Expo, use the official expo-sqlite module.
Installation:
npx expo install expo-sqlite
npm install rxdb rxjs
Configuration:
import { createRxDatabase } from 'rxdb';
import {
getRxStorageSQLite,
getSQLiteBasicsExpoSQLiteAsync
} from 'rxdb-premium/plugins/storage-sqlite';
import * as SQLite from 'expo-sqlite';
const db = await createRxDatabase({
name: 'mydatabase',
storage: getRxStorageSQLite({
sqliteBasics: getSQLiteBasicsExpoSQLiteAsync(SQLite.openDatabaseAsync)
}),
multiInstance: false,
ignoreDuplicate: true
});
RxDB is deeply integrated with React. It provides hooks that make fetching data and subscribing to changes effortless.
<Steps>Wrap your application with the RxDatabaseProvider.
import { RxDatabaseProvider } from 'rxdb/plugins/react';
export default function App() {
// ... create db instance
return (
<RxDatabaseProvider database={db}>
<MyComponent />
</RxDatabaseProvider>
);
}
Use the useRxQuery hook (or useLiveRxQuery shortcut) to fetch data. The component will automatically re-render whenever the data in the database changes. You don't need to manually subscriptions or handling event listeners.
import { useRxCollection, useLiveRxQuery } from 'rxdb/plugins/react';
function TaskList() {
const collection = useRxCollection('tasks');
// This hook automatically updates 'tasks' whenever the query result changes
const { result: tasks } = useLiveRxQuery(
collection.find({
selector: {
done: { $eq: false }
},
sort: [{ createdAt: 'asc' }]
})
);
return (
<FlatList
data={tasks}
renderItem={({ item }) => <Text>{item.title}</Text>}
keyExtractor={item => item.id}
/>
);
}
For high-performance applications with frequent data updates, re-rendering the entire React component might be too slow.
RxDB supports Signals (via @preact/signals-react or similar) to pinpoint updates directly to the DOM nodes.
// Enable the signals plugin once
import { addRxPlugin } from 'rxdb';
import {
RxDBReactivityPreactSignalsPlugin
} from 'rxdb/plugins/reactivity-preact-signals';
addRxPlugin(RxDBReactivityPreactSignalsPlugin);
// ... in your component
const signals = collection.find().$$; // Returns a Signal<Doc[]>
Using signals allows you to update only the specific text node that changed, keeping your UI running at 60fps even with massive data flux.
</Steps>A local database is useful, but a synchronized database is powerful. RxDB provides a robust replication protocol that can sync with any backend.
It has dedicated plugins for popular backend solutions:
For custom backends, you can implement the simple HTTP replication protocol.
Syncing is set-and-forget. You start the replication, and RxDB handles the rest (pulling changes, pushing writes, handling conflict resolution).
import { replicateSupabase } from 'rxdb/plugins/replication-supabase';
const replicationState = replicateSupabase({
replicationIdentifier: 'my-sync',
collection: db.tasks,
supabaseClient: supabase,
pull: {},
push: {},
});
Because RxDB handles the sync layer, you can build your app as if it were a purely local application. All reads and writes happen against the local SQLite database instantly, while the replication happens in the background. This is the essence of Local-First development.
How does RxDB compare to other React Native database solutions?
| Feature | AsyncStorage | SQLite (Raw) | Realm | Firestore (SDK) | RxDB |
|---|---|---|---|---|---|
| Type | Key-Value Store | Relational (SQL) | Object Store | Cloud Document Store | NoSQL Document Store |
| Reactivity | ❌ None | ❌ Manual events | ✅ Local listeners | ✅ Real-time listeners | ✅ Hooks / Signals / RxJS |
| Persistence | ✅ File (Slow) | ✅ File (Generic) | ✅ Custom File | ⚠️ Partial Cache | ✅ SQLite / File |
| Sync | ❌ Manual | ❌ Manual | ✅ Realm Sync only | ✅ Firebase only | ✅ Any Backend |
| Query Engine | ❌ None | ✅ SQL Strings | ✅ Custom API | ✅ Limited | ✅ Mango JSON Query |
| Schema | ❌ None | ✅ SQL Schema | ✅ Class Schema | ❌ Loose | ✅ JSON Schema |
| Migration | ❌ Manual | ❌ Manual SQL | ✅ Migration API | ❌ None | ✅ Automatic |
Ready to start? Check out the React Native Example Project or read the Quickstart Guide.