Realm allows you to write to your app’s model layer in a safe, persisted, and fast way. Realm has a custom React Native api and fantastic documentation that can get you up and running quickly.

This app will work cross platform, it is up to you whether you want to build for iOS or Android.

The final application is available here.

This tutorial uses version 0.22.2 of React Native. If you are on a newer version there may be some inconsistencies. I’ll try to update this with the newest version as soon as possible!

We will use Realm along with Imgur’s free api to build an image browser. This app will allow you to add and remove categories of interest, and click on the categories to view these images (which we will persist to the device storage using Realm). Here is what the app will look like once we are done:

To get started, let’s first create a new React Native project.

To get this going, you need to have react-native cli installed on your machine (skip this if you already have React Native cli installed)

npm install -g react-native-cli

// If you have any issues getting React Native going, check out the getting started guide here.

Next, initiate a new project:

react-native init RealmImgur

After this is created, cd into the directory.

Before we go any further, we need to install rnpm (react-native package manager), which will link native dependencies (in this case, Realm) to React Native.

npm i -g rnpm

Now let’s install lodash and Realm and save them as dependencies:

npm i --save realm lodash

Now that realm is installed, we need to run rnpm link to link our project to the realm native module.

rnpm link realm

Now that these are installed, we need to create an imgur api key. To do this, go to https://api.imgur.com/ and click sign up if you do not have an account, or sign in if you do already have an account:

Next, click on ‘register an application’ on the left menu under general information:

Click on the blue ‘register an application’

Enter a name for your application Choose ‘anonymous usage without user authorization’. Enter some url for your callback, this does not matter for us because we are not using any authorization, but they do not let you leave it blank. Enter your email Fill out captcha Submit

You should come to a screen where you can view your client ID and Client secret. You should also receive and email with this info. The only thing we need is the client ID, so save this somewhere so we can reference it later.

We have everything set up now to start building our app.

Create a new folder called app, and in it create three new files: App.js, api.js, and ViewImages.js. App will be our main application view, ViewImages will be our image browser view, and api will hold our api call that we will be using to interact with Imgur. Our folder structure should now look like this:

Open index.ios.js if you are writing for iOS, or index.android.js if you are writing for Android.

Updating index file

Delete what is there now and instead paste in the following:

// index.ios.js or index.android.js import React, {

AppRegistry,

Component,

Navigator

} from 'react-native' import App from './app/App'

import ViewImages from './app/ViewImages' class RealmImgur extends Component { renderScene (route, navigator) {

if (route.name === 'App') {

return <App navigator={navigator} {...route.passProps} />

}

if (route.name === 'ViewImages') {

return <ViewImages navigator={navigator} {...route.passProps} />

}

} configureScene (route) {

return Navigator.SceneConfigs.FloatFromBottom

} render () {

return (

<Navigator

configureScene={this.configureScene.bind(this)}

style={{ flex: 1, backgroundColor: 'white' }}

initialRoute={{ name: 'App' }}

renderScene={this.renderScene.bind(this)} />

)

}

} AppRegistry.registerComponent('RealmImgur', () => RealmImgur)b

We import AppRegistry, Component, and Navigator from React Native We our two new components we have yet to write, App.js and ViewImages.js We instantiate our RealmImgur class renderScene — this is a Navigator method. It will check the name that is passed to the route, and if it is App it will return the App component. If it is ViewImages, it will return the ViewImages component. We have passed in the navigator as props, and …route.passProps so we can pass properties to the View from our Navigator.push function configureScene — this is also a Navigator method. It will give us a popup from the bottom as opposed to the default floatFromRight on transition. In the render function, we are returning an instance of Navigator and passing in an initalRoute of App, along with some basic styling. We also attach our two navigator methods (configureScene and renderScene)

The final code for index.ios.js / index.android.js is here.

Creating App.js

Now that this is set up, let’s go into our App component and set it up:

Before we create our App class, let’s bring in everything we will need from React Native, realm, and lodash, as well as set up our basic Realm schema: