[go: up one dir, main page]
Scribd
Upload
44 views3 pages

WatermelonDB ReactNative Guide

WatermelonDB is a high-performance reactive database designed for React Native and web applications, optimized for handling large datasets and offline-first architecture. Key features include reactive UI updates, high performance with lazy loading, relational data modeling, and multi-platform support. It is ideal for applications that require fast performance, offline capabilities, and complex relational data management.

Uploaded by

Ajay pandey
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
44 views3 pages

WatermelonDB ReactNative Guide

WatermelonDB is a high-performance reactive database designed for React Native and web applications, optimized for handling large datasets and offline-first architecture. Key features include reactive UI updates, high performance with lazy loading, relational data modeling, and multi-platform support. It is ideal for applications that require fast performance, offline capabilities, and complex relational data management.

Uploaded by

Ajay pandey
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

WatermelonDB in React Native: Complete Guide

What is WatermelonDB?

WatermelonDB is a high-performance reactive database optimized for building complex applications in React

Native (and web). It's designed to scale well with large datasets and complex relational data, and most

importantly, it enables offline-first architecturea vital feature for mobile applications.

Key Features:

- Reactive: UI auto-updates when DB changes

- High Performance: Lazy loading and batch operations

- Offline-first: Sync data later when online

- Relational: Model relationships like one-to-many easily

- Secure: Built on SQLite

- Multi-platform: React Native and Web support

When to Use:

Use WatermelonDB if:

- Your app has large and relational data.

- Needs to work offline and sync later.

- Requires fast, reactive performance.

Setup in React Native:

1. Install packages:

npm install @nozbe/watermelondb

npm install --save @nozbe/with-observables

npm install --save @nozbe/watermelondb/adapters/sqlite

2. pod install (iOS):

npx pod-install

Define Schema:

import { appSchema, tableSchema } from '@nozbe/watermelondb';


export const mySchema = appSchema({

version: 1,

tables: [

tableSchema({

name: 'posts',

columns: [

{ name: 'title', type: 'string' },

{ name: 'body', type: 'string' },

{ name: 'created_at', type: 'number' }

],

}),

],

});

Define Models:

import { Model } from '@nozbe/watermelondb';

import { field } from '@nozbe/watermelondb/decorators';

export default class Post extends Model {

static table = 'posts';

@field('title') title;

@field('body') body;

@field('created_at') createdAt;

Setup Database:

import { Database } from '@nozbe/watermelondb';

import SQLiteAdapter from '@nozbe/watermelondb/adapters/sqlite';

import { mySchema } from './schema';

import Post from './Post';

const adapter = new SQLiteAdapter({ schema: mySchema });

export const database = new Database({

adapter,
modelClasses: [Post],

});

Creating and Querying Data:

const postsCollection = database.collections.get('posts');

await database.action(async () => {

await postsCollection.create(post => {

post.title = 'First post';

post.body = 'This is the body';

post.createdAt = Date.now();

});

});

const allPosts = await postsCollection.query().fetch();

Observing Data in Components:

Use useObservableState or withObservables to auto-update UI.

Syncing (Push/Pull):

Use pullChanges and pushChanges with your own server endpoints to manage offline sync.

Comparison:

WatermelonDB vs Realm vs SQLite vs Firebase Realtime:

- Best for large, relational, offline-first apps.

Resources:

- Docs: https://watermelondb.dev/

- GitHub: https://github.com/Nozbe/WatermelonDB

Use Cases:

- Chat, productivity, CRM, logistics, inventory apps.

You might also like