Realm-js: How to use/package a Realm file in React Native ?

[ajonno]

I've got a realm file "cleverbean.realm" that I want to reference in React Native. My first thought was I could just place the file ("cleverbean.realm") into its own directory in the React Native project, and then reference that when instantiating the realm.

I copied a realm file into a path off root. ie

./data/cleverbean.realm

I then tried the following to instantiate :

realm = new Realm({
   path: './data/cleverbean.realm',
   schema: [CleverbeanSchema]
});

That didnt work and threw this error thinking I was trying to resolve via a non project path.

How should I go about ensuring that a realm will be pre-installed on iOS and Android, in the context of a React Native app ? Also what is the correct way to reference those local Realms, when instantiating in the app (per the example code snippet above) ?

[ajonno]

this was entirely my mistake - i had some Realm instantiation logic in componentWillMount() without realising, and that was the cause of the problem. moved to constructor all fine now.

[non-binary]

Happy to hear you resolved the issue, @ajonno. Let us know if you need help with anything else.

[lfeddern]

Hi there,

I am trying to provide a path to instantiate a new realm with a path like so, to achieve the goal of prepopulating the database and then shipping it with my app:

import Realm from 'realm';

const TestSchema = {
  name: 'test',
  properties: {
    make: 'string'
  }
};

export default new Realm({
  path: './database.realm',
  schema: [TestSchema],
});

However, whenever I then use the realm:

e.g.

constructor(props) {
    super(props);
    realm.write(() => {
    realm.create('test', { make: 'Honda', });
    });
  }

I just get the error:

unable to open a realm at path 'database.realm.management'. Please use a path where your app has read-write permissions.

What am I doing wrong? Is a simpler way of prepopulating a realm and then shipping it with the app?

Thanks v much for your help, really appreciate it!

[twinzen]

@ajonno , I'm encountering exactly same error that you captured above. Could you explain more how did you resolve it by "moved to constructor"?

[ajonno]

ive refactored my code a bit since my post here, but the issue at the time was i was trying to access the realm db, eg something like - let allTips = Realm.objects('Tip'); from componentWillMount lifecycle method. I moved this call to constructor(props) {... and it worked.

_however_ do note that you can see from my post that i physically dragged a Realm db file into my project. That is not necessary and might be why i saw an issue at the time. My suggestion is that you go to Realm's site and follow their setup instructions for Javascript (React Native). They are very clear and should be enough to get you going. Eventually when you create a release build of your app, the Realm database will be included, there is nothing specific you need to do.

[twinzen]

Thanks ajonno for your detail explanation.
Not sure if we are on the same topic... But actually, I was finding a way to put my pre-populated DB data file into my app, and finally I found a solution!

I post my solution, as I believe people may find this thread when they want to do the same thing - include populated DB data file into app.

However, as I only need a solution for iOS, my solution would cover iOS only. For Android, I think it can be done in similar way.

1. Put your realm DB file into your XCode project.
   

2. Be reminded to add it under Copy Bundle Resource otherwise the file will not be copied to you app when build. You can find it under Build Phases
   

3. Define realm DB file path when you declare realm object (This is the most tricky thing... I spent a night to find out solution, because I am newbie of iOS and react-native)
   The key point is that You need to give the full path of the realm DB file that you put in XCode project.
   To get the full path, I use react-native-fs to achieve this.
   With RNFS.MainBundlePath, you can have your app's base path, and your realm DB file should be there.
   Another tricky thing is that, you must declare your realm as readOnly: true (Maybe it is not a must if you include some more files to your XCode project, but I didn't try it)
   

Hope above solution can help people that encountered same problem.

[cwagner22]

@twinzen Thanks. For android I couldn't find an easy way if you need the file to be automatically copied at build time. I ended up adding this to android/app/build.gradle:

task copyRealm(type: Copy) {
    from '../../App/Realm/default.realm'
    into 'src/main/assets/'
}
preBuild.dependsOn copyRealm

It should be possible to do it easily by adding that to package.json:

  "rnpm": {
    "assets": [
      "App/Realm"
    ]
  }

But it currently only works for fonts.

Anyway it's still not working for me because RNFS.MainBundlePath is not available on Android. So I don't know how to reference the realm db path on android...

Edit: No idea why it says I unassigned istx25, I don't even have the permissions

[vanpho93]

Hello, I have a video show how to import realm file into react native project in both iOS and Android.
Check it here:
https://www.youtube.com/watch?v=nS6YCq2OdeA
There is an error in Android, you can't debug your app remotely.
I use react-native-fs as @twinzen metion.

[vladbars]

Thanks @twinzen for iOS.
I solved it for Android as well:

1. place yourOwn.realm to android/app/src/main/assets folder

1. add Realm.copyBundledRealmFiles(); into index.android.js like this:

import { AppRegistry } from 'react-native';
import React from 'react';
import Realm from 'realm';
import App from './src/App';

const App2 = () => {
  Realm.copyBundledRealmFiles();
  return (
    <App />
  );
};

AppRegistry.registerComponent('YourApp', () => App2);

1. finally use RNFS.DocumentDirectoryPath instead RNFS.MainBundlePath for path:

let realm = new Realm({
      path:
        Platform.OS === 'ios'
          ? RNFS.MainBundlePath + '/yourOwn.realm'
          : RNFS.DocumentDirectoryPath + '/yourOwn.realm',
      schema: [CategoriesSchema],
      readOnly: true
    });

[varun-raj]

@vladbars Will this copy the realm file every time we open the app?

[anam-hossain]

@varun-raj do you have any solution without copying realm file every time the app open?

[jaysquared]

You can just copy it yourself with react-native-fs. staticdataversion is a simple text file with the current schema version. If the version number in the documents directory does not exist or differs from the assets directory, copy the database and version file. If it's the same, don't copy.

const copyStaticDataOnAndroid = async () => {
    const destinationFilePath = `${RNFS.DocumentDirectoryPath}/StaticData.realm`;
    const versionFilePath = `${RNFS.DocumentDirectoryPath}/staticdataversion`;

    // Read version file
    const currentVersion = await RNFS.readFileAssets('staticdataversion');

    const isInstalled = await RNFS.exists(versionFilePath);
    const installedVersion = isInstalled ? await RNFS.readFile(versionFilePath) : 0;

    if (currentVersion === installedVersion) {
      return true;
    }

    // Need to update assets
    // 1. Delete existing assets if isInstalled
    if (isInstalled) {
      await RNFS.unlink(versionFilePath);
      await RNFS.unlink(destinationFilePath);
    }

    await RNFS.copyFileAssets('StaticData.realm', destinationFilePath);
    await RNFS.copyFileAssets('staticdataversion', versionFilePath);

    return true;
  }

[anam-hossain]

@jaysquared Thank you. When a user installs a new version of the app, what is the approach you follow to keep user data? i.e. Favourite items, current app settings.

[jaysquared]

@anam-hossain Use two realms. One static read only and one for user data, which is not bundled with the app, but generated at first start and stays in the documents directory.