The Realm mobile database specially build for React Native applications is launched on Feb 2016 and since its been upgraded to version 2.2.0 at current date of March 2, 2018 . Realm supports object persistence and full query capabilities, It is faster then SQLite and used by most of Android and iOS react native applications. React native supports all the mobile device platforms and runs directly inside Mobile phones, Tablets and Wearable devices.
What is Realm(How it Works) :
Realm is not an object relational mapping system and not build on above SQLite system, Realm usages native JavaScript objects dynamically mapped to a mobile database system syntax and usages Object relational modal. We can use Realm easily by installing its Library on our project. Realm is very easy to understand and faster than SQLite and Cross Platform mobile database. You can learn more about Realm on its official website here.
Contents in this project Installing Realm Mobile Database in iOS Android Tutorial React Native App :
1. Open your React Native project’s folder in Command Prompt / Terminal and execute below NPM command.
|
1
|
npm install —save realm
|
Screenshot :
2. After successfully installed the Realm library your CMD screen should look like this.
3. Now we need to execute link command in order to refresh the complete React Native project and index the Realm mobile database.
|
1
|
react–native link realm
|
Screenshot after executing link command:
Here you go guys now Realm Mobile database is successfully installed and ready to use in your react native project. Next step is start coding .
4. Open your project’s App.js file and import StyleSheet, View, Image, Text and Platform component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Image, Text, Platform } from ‘react-native’;
|
5. Import Realm module in your project.
|
1
|
var Realm = require(‘realm’);
|
6. Create a Global scope variable named as realm, we would use this variable to opening and closing database.
|
1
|
let realm ;
|
7. Create constructor() in your project, Now we would execute the Schema command to make object Table in Realm.
name : Object Table Name .
Properties : Name of each field with its datatype.
If you want to know more about data types in Realm read its official documentation here.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
constructor(){
super();
realm = new Realm({
schema: [{name: ‘User_Demo’,
properties:
{
id: {type: ‘int’, default: 0},
first_name: ‘string’,
last_name: ‘string’
}}]
});
}
|
8. Create Realm’s inbuilt write mode to insert data into Object table in render’s block.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
render() {
realm.write(() => {
var ID = realm.objects(‘User_Demo’).length + 1;
realm.create(‘User_Demo’, {id: ID, first_name: ‘Pooja’, last_name: ‘Sharma’});
});
return (
);
}
|
9. Now we need to store all the object of User_Demo table into A. We need to apply JSON stringify method to popup all the items from object.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
render() {
realm.write(() => {
var ID = realm.objects(‘User_Demo’).length + 1;
realm.create(‘User_Demo’, {id: ID, first_name: ‘Pooja’, last_name: ‘Sharma’});
});
var A = realm.objects(‘User_Demo’);
var myJSON = JSON.stringify(A);
realm.close();
return (
);
}
|
10. Create a Root View in render’s return block and Inside it Print all the Object using Text component.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
render() {
realm.write(() => {
var ID = realm.objects(‘User_Demo’).length + 1;
realm.create(‘User_Demo’, {id: ID, first_name: ‘Pooja’, last_name: ‘Sharma’});
});
var A = realm.objects(‘User_Demo’);
var myJSON = JSON.stringify(A);
realm.close();
return (
<View style={styles.MainContainer}>
<Text style={{fontSize: 15, textAlign: ‘center’}}>{myJSON}</Text>
</View>
);
}
|
11. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
const styles = StyleSheet.create({
MainContainer :{
flex:1,
alignItems: ‘center’,
justifyContent: ‘center’,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,
margin: 10
}
});
|
12. Complete source code for App.js File :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Image, Text, Platform } from ‘react-native’;
var Realm = require(‘realm’);
let realm ;
export default class App extends Component{
constructor(){
super();
realm = new Realm({
schema: [{name: ‘User_Demo’,
properties:
{
id: {type: ‘int’, default: 0},
first_name: ‘string’,
last_name: ‘string’
}}]
});
}
render() {
realm.write(() => {
var ID = realm.objects(‘User_Demo’).length + 1;
realm.create(‘User_Demo’, {id: ID, first_name: ‘Pooja’, last_name: ‘Sharma’});
});
var A = realm.objects(‘User_Demo’);
var myJSON = JSON.stringify(A);
realm.close();
return (
<View style={styles.MainContainer}>
<Text style={{fontSize: 15, textAlign: ‘center’}}>{myJSON}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
flex:1,
alignItems: ‘center’,
justifyContent: ‘center’,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,
margin: 10
}
});
|
Screenshot :
Also Read :
React Native Upload Image to Server using PHP MySQL iOS Android Tutorial
React Native Getting Started With React Navigation 3.x Tutorial to Add Activity
How to Use State Inside React Native App Full Explained Example Tutorial
React Native RequestFocus TextInput Programmatically Example
React Native Solve Unrecognized Font Family Material Design Icons Error in iOS MAC
