Skip to content
πŸ‰ Reactive & asynchronous database for powerful React and React Native apps ⚑️
JavaScript Objective-C Swift Kotlin Python Shell
Branch: master
Clone or download
radex Merge pull request #524 from Nozbe/greenkeeper/@testing-library/react…

Greenkeeper/@testing library/react hooks 3.1.0
Latest commit 1f82176 Oct 17, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update stale.yml Jul 5, 2019
assets [ImgBot] Optimize images Sep 20, 2019
babel Change babel plugins to stubs (as to not break people's apps) Sep 21, 2018
docs-master Update Oct 14, 2019
docs Update Adapters.html Oct 14, 2019
examples reduce database prop drilling Oct 11, 2019
flow-typed fix Jul 5, 2019
native Reverting travis config update Jul 23, 2019
scripts fixes Oct 8, 2019
src fixes Oct 8, 2019
.eslintignore Add `development` mode Aug 30, 2018
.eslintrc.yml [lokijs] select best available persistence adapter Oct 2, 2019
.flowconfig Update .flowconfig Nov 24, 2018
.gitattributes Add test Pods Sep 8, 2018
.gitignore docs test Jul 18, 2019
.imgbotconfig config Jul 18, 2019
.prettierrc Merge branch 'master' into master Mar 14, 2019
.travis.yml try to fix build? Sep 24, 2019 Merge pull request #505 from Nozbe/lokijs-options Oct 15, 2019 Update Sep 18, 2018
LICENSE Update LICENSE Jul 26, 2019 logos Sep 20, 2019
babel.config.js bring back fast-async Sep 27, 2019
greenkeeper.json Update greenkeeper.json Oct 19, 2018
jest.config.js Fix warnings, improve coverage Mar 20, 2019
package.json chore(package): update @testing-library/react-hooks to version 3.1.0 Oct 17, 2019
rn-cli.config.js [rn-cli.config] changes for rn 0.57 Sep 17, 2018
rn-transformer.js IT RUNS Sep 8, 2018
tsconfig.json bundle typescript declarations Mar 1, 2019
tslint.json bundle typescript declarations Mar 1, 2019
yarn.lock chore(package): update lockfile yarn.lock Oct 17, 2019


A reactive database framework

Build powerful React and React Native apps that scale from hundreds to tens of thousands of records and remain fast ⚑️

MIT License CI Status npm

⚑️ Launch your app instantly no matter how much data you have
πŸ“ˆ Highly scalable from hundreds to tens of thousands of records
😎 Lazy loaded. Only load data when you need it
✨ Reactive API with RxJS
πŸ“± Multiplatform. iOS, Android, and the web
βš›οΈ Made for React. Easily plug data into components
⏱ Fast. Async. Multi-threaded. Highly cached.
πŸ”— Relational. Built on rock-solid SQLite foundation
⚠️ Static typing with Flow or TypeScript
πŸ”„ Offline-first. Sync with your own backend

Why Watermelon?

WatermelonDB is a new way of dealing with user data in React Native and React web apps.

It's optimized for building complex applications in React Native, and the number one goal is real-world performance. In simple words, your app must launch fast.

For simple apps, using Redux or MobX with a persistence adapter is the easiest way to go. But when you start scaling to thousands or tens of thousands of database records, your app will now be slow to launch (especially on slower Android devices). Loading a full database into JavaScript is expensive!

Watermelon fixes it by being lazy. Nothing is loaded unless requested. And since all querying is performed directly on the rock-solid SQLite database on a separate native thread, most queries resolve in an instant.

But unlike using SQLite directly, Watermelon is fully observable. So whenever you change a record, all UI that depends on it will automatically re-render. For example, completing a task in a to-do app will re-render the task component, the list (to reorder), and all relevant task counters. Learn more.

React Native EU: Next-generation React Databases WatermelonDB Demo

πŸ“Ί Next-generation React databases
(a talk about WatermelonDB)

✨ Check out the Demo


Quick (over-simplified) example: an app with posts and comments.

First, you define Models:

class Post extends Model {
  @field('name') name
  @field('body') body
  @children('comments') comments

class Comment extends Model {
  @field('body') body
  @field('author') author

Then, you connect components to the data:

const Comment = ({ comment }) => (
  <View style={styles.commentBox}>
    <Text>{comment.body} β€” by {}</Text>

// This is how you make your app reactive! ✨
const enhance = withObservables(['comment'], ({ comment }) => ({
  comment: comment.observe()
const EnhancedComment = enhance(Comment)

And now you can render the whole Post:

const Post = ({ post, comments }) => (
    { =>
      <Comment key={} comment={comment} />

const enhance = withObservables(['post'], ({ post }) => ({
  comments: post.comments

The result is fully reactive! Whenever a post or comment is added, changed, or removed, the right components will automatically re-render on screen. Doesn't matter if a change occurred in a totally different part of the app, it all just works out of the box!

➑️ Learn more: see full documentation

Who uses WatermelonDB

Nozbe 4
Smash Appz
Rocket Chat

Does your company or app use πŸ‰? Open a pull request and add your logo/icon with link here!


We need you

WatermelonDB is an open-source project and it needs your help to thrive!

If there's a missing feature, a bug, or other improvement you'd like, we encourage you to contribute! Feel free to open an issue to get some guidance and see Contributing guide for details about project setup, testing, etc.

If you're just getting started, see good first issues that are easy to contribute to. If you make a non-trivial contribution, email me, and I'll send you a nice πŸ‰ sticker!

If you make or are considering making an app using WatermelonDB, please let us know!

Author and license

WatermelonDB was created by @Nozbe. Main author and maintainer is Radek Pietruszewski.

Contributors: @mobily, @kokusGr, @rozPierog, @rkrajewski, @domeknn, @Tereszkiewicz and more.

WatermelonDB is available under the MIT license. See the LICENSE file for more info.

You can’t perform that action at this time.