watermelondb
CommunityMake WatermelonDB data live and React-friendly.
Software Engineering#database#react-native#reactive#observers#watermelondb#findandobserve#query-observe
Authorjchaselubitz
Version1.0.0
Installs0
System Documentation
What problem does it solve?
WatermelonDB-driven apps often struggle to keep UI in sync with live database changes. This skill provides guidance on modeling, observing, and integrating WatermelonDB with React to ensure components update reliably when data changes.
Core Features & Use Cases
- Modeling and observation: Learn how to define models in database/models, observe changes with findAndObserve and query.observe, and trigger UI updates.
- Stable re-renders: Use wrappers and withObservables patterns to ensure React re-renders reflect the latest data without mutating references.
- React integration patterns: Examples of screens that subscribe to DB changes and render live data.
- Use case: A detail screen showing live-updating phrases, lessons, or decks.
Quick Start
Install and integrate WatermelonDB patterns in your React Native project to begin observing and rendering live database changes.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: watermelondb Download link: https://github.com/jchaselubitz/drill-app/archive/main.zip#watermelondb Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.