How to organize React Native with Realm project files?

Question

I've picked realm to store data in my React Native app. I don't understand, how to organize files in my project. Documentation provides only simple code for one component. But I need for different components different parts of database.

I seen in one repository, where all schemes was passed to array in "configureRealm.js" file:

new Realm({schema: [Dogs, Cats]});

Also I've found, that I can put different schemes in "schemes" directory, for example and import them where I need.

For example in "Cats.js" react component I can do:

import Cats from 'schemes/Cats';

this.realm = new Realm({schema: [Cats]});

And in "Dogs.js" import dogs and initialize realm with this scheme.

But I am not sure in first and in mine way. What will be right and the best way to organize realm react native application?

Answer 1

I recently began organizing my App/Data structure like this, when dealing with Realm, after getting some direction from someone much smarter than I :) I did not go into too much detail about how the Realms are initially created, as I assume you are handling that already. This is just a really solid structure for organization/compartmentalized development. Hope it helps!

.App     ├──Assets     ├──Data     |   ├──Db     |   |   ├──Db.js     |   |   ├──DbHelper.js     |   ├──Models     |   |   ├──ModelA.js     |   |   ├──ModelB.js     |   |   ├──ModelC.js     |   ├──Queries.js     ├──Scenes     |   ├──App.js     |   |   ├──(all other scene/view components) 

--The Models directory contains all my schemas, broken out individually like this:

import Realm from 'realm'; export default class ModelA extends Realm.Object {} ModelA.schema = {     name: 'ModelA',     primaryKey: 'id',     properties: {         one: {type: 'int', optional: true},         two: 'string',         three: {type: 'string', optional: true},     } } 

--In Db.js, I keep all my standard Realm related methods. createRealm(), write(), close(), insert(), and a generic query method, like this:

query(model: string, filter?: string) {     let results = this.realm.objects(model);     if(filter) {         return results.filtered(filter);     }     return results; } 

--DbHelper.js then imports Db.js and all my Models. It handles the setting and getting of my db instance(s), using the standard methods from Db.js, like this:

import Db from 'App/Data/Db/Db'; import ModelA from 'App/Data/Models/ModelA'; import ModelB from 'App/Data/Models/ModelB'; import ModelC from 'App/Data/Models/ModelC';  class DbHelper {      modelSchema = [         ModelA,         ModelB,         ModelC     ];      activeInstancePath = (myLocalRealmPath)      getInstance(): Db {         let instance: Db = this.activeInstancePath;         if(!instance) {             throw new Error('DbHelper.js :: Active Instance Not Set!');         }         return instance;     }      /* note: this is where you would also setInstance and define a constant, or other method for the instance path */ } 

--Queries.js then imports DbHelper.js. Queries.js contains all my methods for specific app related data queries. Queries.js is all I need to import into my Scene components, to obtain Realm data. My Queries.js looks something like this:

import DbHelper from 'App/Data/Db/DbHelper';  class Queries {      /* a typical query */     getSomeDataFromModelA(filterValue: string = null) {         let filter = null;         if (filterValue) {             filter = `two = ${filterValue}`;         }         let results = DbHelper.getInstance()             .query('ModelA', filter);          return results;     }      /* return some JSON data that we originally stored in the Realm as a string */     getSomeJsonData() {         let results = DbHelper.getInstance()             .query('ModelB');          if(results.length) {             let parsed = JSON.parse(results[0].objectA);             return parsed.objectB;         }         return null;     } } export default new Queries(); 

--App.js. So now, in my App Scene I would simply do something like this:

import React, { Component } from 'react'; import { View, Text } from 'react-native'; import Queries from 'App/Data/Queries';  class App extends Component {      constructor(props) {         super(props);          // Get Some Realm Data!         let modelAData = Queries.getSomeDataFromModelA()         let someJsonData = Queries.getSomeJsonData();          // Set Initial state         this.state = {             modelData: modelAData,             jsonData: someJsonData         }     }      componentDidMount() {         console.log(this.state.modelData);     }      render() {         return(             <View>                 <Text>{this.state.jsonData.objectKey}</Text>             </View>         );     } }  export default App; 

Answer 2

In the example in the Realm github repo all models are defined and exported form a singe file: https://github.com/realm/realm-js/blob/master/examples/ReactExample/components/realm.js

Then this is required throughout the app and used as needed.