Realm With React Native

Realm offers two products: Realm Mobile Platform and Realm Mobile Database. The Realm Mobile Platform delivers automatic and seamless real-time data sync and event handling between server and devices. Here the server that is employed is Realm Object Server. The Realm Mobile Database is cross-platform, supporting both iOS and Android, and the Realm Object Server, which can be run on MacOS and Linux platforms, helps in building a synchronized application.

Realm Mobile Database

The Realm Mobile Database is used for offline storage on mobile platforms. However, with internet connections several Realm Databases, across several devices can be kept in sync with the help of a server. The server can be any server like Firebase. But Realm provides a server specifically designed for Realm Mobile database called Realm Object Server. The way the server is accessed is totally embedded into the Realm API. A Realm is an instance of a Realm Mobile Database container. They store native objects. The Realm Mobile Database has bindings for many popular languages for mobile app development, including Swift, Java, Objective-C, C# and JavaScript (using React Native). A Realm is not a single application-wide database, an application can use multiple Realms to organize data more efficiently. A Realm is not a table and can contain multiple kinds of objects. A Realm has a schema to store data.

Let’s get to the React Native part of it.

Realm JavaScript enables you to work with React Native and Node.js.

Installation

Apps using Realm can target both iOS and Android. React Native 0.20.0 and later is supported. React Native 0.45.0 and higher are not supported.
Create a new React Native project.

react-native init <project-name>

Go to the project directory cd <project-name> and install realm dependency.

npm install –save realm
Link your project to the realm module

react-native link realm React Native >= 0.31.0
Now you’re ready to get to the code.

Import: Import Realm into your code like this:
var Realm = require(‘realm’);

Model: Realm data models are defined by the schema information passed into a Realm during initialization. The schema for an object consists of the object’s name and a set of properties each of which has a name and type as well as the objectType for object and list properties. You can also designate each property to be optional or to have a default value.

const CarSchema = {
 name: 'Car',
 properties: {
   make:  'string',
   model: 'string',
   miles: {type: 'int', default: 0},
 }
};
const PersonSchema = {
 name: 'Person',
 properties: {
   name:     'string',
   birthday: 'date',
   cars:     {type: 'list', objectType: 'Car'},
   picture:  {type: 'data', optional: true}, // optional property
 }
};
// Initialize a Realm with Car and Person models
let realm = new Realm({schema: [CarSchema, PersonSchema]});

Combine React Native

const Realm = require('realm');

class  extends Component {
render() {
  let realm = new Realm({
    schema: [{name: 'Dog', properties: {name: 'string'}}]
  });

  realm.write(() => {
    realm.create('Dog', {name: 'Rex'});
  });

  return (
    
      
        Count of Dogs in Realm: {realm.objects('Dog').length}
      
    
  );
}
}

Go here for further information: https://realm.io/docs/javascript/latest/

Realm Object Server
The setup described in the document is done in macOS. Download the macOS bundle from https://realm.io/docs/get-started/installation/mac/.

Extract the zip file and let’s get started. Go to your realm-mobile-platform folder and start the Realm Object Server by double-clicking the file start-object-server.command.

You will get to see a terminal opened and a web page (Realm Dashboard) fired up on your browser. If it doesn’t show up in your browser, then go to http://localhost:9080.

Create an admin user by providing email and password. After that, you can log in with the same credentials.

The Dashboard is a browser-based administration application for the Realm Object Server that provides the following:

Dashboard: System status, including real-time displays of data rate in/out, bytes in/out, open connections, and open Realms

Realms: Paths, permissions, and owners of Realms synced to this Object Server, the models, and contents of individual Realms

Users: User information and management for this Object Server, including granting and removing administrative privileges

Functions: Management and entry of Realm Functions

Logs: System logs for the Object Server, with selective detail level

There are sample applications for all the platforms that Realm covers inside realm-mobile-platform > demo >Realm Tasks.

A macOS application is also available wherein you can add and remove tasks (todo app). There is also a React Native application in the folder Realm Tasks React. To run it, go to the folder and execute npm install and react-native run-ios or react-native run-android. Make sure you change the auth_uri and db_uri and make them point to your machine’s IP address in config.js.

There is also The Realm Browser in realm-mobile-platform folder. To manage the Realms on the server, Realm includes a browser that allows you to explore and interact with them in real-time. (The browser-based Dashboard can inspect Realms, but cannot edit them.) Open it and enter the admin credentials or the access token. To find the access token, go to the terminal window of the server and scroll to the top and you’ll find something like: Your admin access token is:. Copy the long token key string, including the two trailing equals signs (==). This is the admin access token for your Object Server. A new dialog box will open listing all the Realms on your server. Select it to view the contents. Now any changes on the app are immediately reflected in your browser.

Chat Application With Realm
To build a chat application, run start-object-server.command. Open a browser and go to http://localhost:9080. Create a user first, by registering with the Realm Object Server. If it is a local server, then use the machine’s IP address (WiFi).

Realm.Sync.User.register(‘http://my.realm-auth-server.com:9080’, ‘username’, ‘p@s$w0rd’, (error, user) => { /* … */ }

First, run this and the user gets registered. Login the user using necessary following snippet procedure using Sync by

Realm.Sync.User.login(‘http://my.realm-auth-server.com:9080’, username, password, (error, user) => {…}

Construct a basic React Native page the consists of a text box and a View for displaying the messages in the chat room.

Use the same user in both of the apps. Once there is a message from one device, it is automatically reflected in the other device since they both are logged in as the same user according to Realm Object Server.

Use the message schema such as given below. You can have your own schema too.

const MessageSchema = {
 name: 'Message',
 properties:{
   text: 'string',
   time: 'string',
   author: 'string'
 }
}

Import Realm like this: var Realm = require(‘realm’);

Since there is a necessity for the display of the list of messages, the use of ListView from realm/react-native is highly recommended.

import { ListView } from ‘realm/react-native’;

The layout looks like this:

<Container>
        </p>
<Header>
          <Left/>
          <Body>
            <Title>Chat Room</Title>
          </Body>
          <Right>
            <Button transparent onPress={this.deleteHandler}>
              <Text>Delete</Text>
            </Button>
          </Right>
        </Header>
<p>
        <Content>
        <ListView dataSource={this.state.dataSource} enableEmptySections={true} renderRow={ (message) =>
            <ListItem>
                <Body>
                  <Text>{message.author}</Text>
                  <Text note>{message.text}</Text>
                </Body>
                <Right>
                  <Text note>{message.time}</Text>
                </Right>
              </ListItem>
          }
        />
        </Content>
        <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-end'}}>
          <View style={{flex: 8}}>
            <Item>
              <Input placeholder='Type your message here ...' onChangeText={(text) => this.setState({message: text})}/>
            </Item>
          </View>
          <View style={{flex: 2}}>
            <Button transparent success onPress={this.buttonHandler} >
              <Text>Send</Text>
            </Button>
          </View>

        </View>
      </Container>

I’ve used NativeBase. Check out https://nativebase.io.

The initial setup is in the constructor.

const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
   this.state = {
     message: "",
     dataSource: ds.cloneWithRows([])
   };
   this.buttonHandler = this.buttonHandler.bind(this);
   this.deleteHandler = this.deleteHandler.bind(this);
   var username ="user"
   var password ="pass"
   Realm.Sync.User.login('http://10.9.9.5:9080', username, password, (error, user) => {
     if(!error){
       console.log("Hurray! logged in");
       this.setState({username: username});
       this.realm = new Realm({
         sync: {
           user: user,
           url: 'realm://10.9.9.5:9080/~/realmtasks',
         },
         schema: [MessageSchema]
       });
       this.setState({dataSource: ds.cloneWithRows(this.realm.objects('Message'))});
       this.realm.addListener('change', () => {
    this.setState({dataSource: ds.cloneWithRows(this.realm.objects('Message'))})
    });
     }
     else{
       console.log(error);
     }
   });

On clicking the send button, the data from the text box is stored in the synced database.

buttonHandler(){

   //get time string
   var timeString = (new Date().toLocaleTimeString())+ " " + (new Date().toLocaleDateString());
   this.realm.write(() => {
     this.realm.create('Message', {text: this.state.message, time: timeString, author: this.state.username});
   });
 }

The delete button handler looks like this:

deleteHandler(){
   this.realm.write(() => {
     //delete all messages
     this.realm.delete(this.realm.objects('Message'));
   });
 }

 

For more information, visit  https://realm.io/docs/get-started/installation/mac/

https://realm.io/docs/javascript/latest/

https://realm.io/docs/realm-object-server/.