Realm mobile database is next generation hybrid local mobile database used in both react native android & iOS application. This database is no match for SQLite and in many ways better then SQLite because of its platform independent behavior. In our previous tutorial we have discussed about Installing Guide of Realm and this tutorial is the next part of Realm Tutorial. So in this tutorial we would going to Insert Data into Realm Local Database using TextInput component on button click event, We would retrieve the TextInput value using State and insert into Realm Local mobile phone database table in both android iOS react native application example tutorial.
Contents in this project Insert Data into Realm Local Database using TextInput iOS Android React Native App Tutorial.
1. The first step is to Install Realm Mobile Database in your react native project, So open your react native project folder in command prompt / Terminal and execute below command like i did in below screenshot.
|
1
|
npm install —save realm
|
Screenshot of CMD after successfully installing Realm library :
2. After successfully installing the Realm database we need to execute the
react–native link realm command in your react native project folder to refresh the complete index of newly installed libraries.
3. Open your project’s App.js file and import StyleSheet, Platform, View, Image, Text, TextInput, TouchableOpacity and Alert components in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, Platform, View, Image, Text, TextInput, TouchableOpacity, Alert } from ‘react-native’;
|
4. Import Realm into your project and create another realm let variable, this variable is used to insert data into database like use as object.
|
1
2
3
|
var Realm = require(‘realm’);
let realm ;
|
5. Create constructor() in your project and inside the constructor() make 3 State named as Student_Name, Student_Class and Student_Subject. These states is used to store data after getting from TextInput component.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
constructor(){
super();
this.state = {
Student_Name : ”,
Student_Class : ”,
Student_Subject : ”
}
}
|
6. We need to create Realm Schema(Table) in constructor() named as Student_Info and create 4 columns named as student_id, student_name, student_class and student_subject inside Realm mobile database table.
|
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
|
constructor(){
super();
this.state = {
Student_Name : ”,
Student_Class : ”,
Student_Subject : ”
}
realm = new Realm({
schema: [{name: ‘Student_Info’,
properties:
{
student_id: {type: ‘int’, default: 0},
student_name: ‘string’,
student_class: ‘string’,
student_subject: ‘string’
}}]
});
}
|
7. Create a function named as add_Student(), We would call this function on Button onPress event and Inside this function we would Insert Data into Realm Local Database. We are dynamically increasing the ID of student to +1 so it will not be same and unique all the time.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
add_Student=()=>{
realm.write(() => {
var ID = realm.objects(‘Student_Info’).length + 1;
realm.create(‘Student_Info’, {
student_id: ID,
student_name: this.state.Student_Name,
student_class: this.state.Student_Class,
student_subject : this.state.Student_Subject
});
});
Alert.alert(“Student Details Added Successfully.”)
}
|
8. Create a variable named as A inside render’s block and store all the realm insert database objects inside it, We are using this to only show you all the inserted data in Text component so you’ll make sure the data is inserted successfully. We have to convert this data into JSON format in order to access using JSON.stringify() inbuilt function.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
render() {
var A = realm.objects(‘Student_Info’);
var myJSON = JSON.stringify(A);
return (
);
}
|
9. Create 3 TextInput , 1 Button and 1 Text component inside render’s return block.
TextInput : Is used to get data from application user.
Button : We would call the add_Student() function on Button onPress event and we are using the TouchableOpacity component to make Button.
Text : Is used to show all the data in object from so user will be conformed that all the data is inserted successfully.
|
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
|
render() {
var A = realm.objects(‘Student_Info’);
var myJSON = JSON.stringify(A);
return (
<View style={styles.MainContainer}>
<TextInput
placeholder=“Enter Student Name”
style = { styles.TextInputStyle }
underlineColorAndroid = “transparent”
onChangeText = { ( text ) => { this.setState({ Student_Name: text })} }
/>
<TextInput
placeholder=“Enter Student Class”
style = { styles.TextInputStyle }
underlineColorAndroid = “transparent”
onChangeText = { ( text ) => { this.setState({ Student_Class: text })} }
/>
<TextInput
placeholder=“Enter Student Subject”
style = { styles.TextInputStyle }
underlineColorAndroid = “transparent”
onChangeText = { ( text ) => { this.setState({ Student_Subject: text })} }
/>
<TouchableOpacity onPress={this.add_Student} activeOpacity={0.7} style={styles.button} >
<Text style={styles.TextStyle}> CLICK HERE TO ADD STUDENT DETAILS </Text>
</TouchableOpacity>
<Text style={{marginTop: 10}}>{myJSON}</Text>
</View>
);
}
|
10. Creating Style.
|
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
|
const styles = StyleSheet.create({
MainContainer :{
flex:1,
alignItems: ‘center’,
justifyContent: ‘center’,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,
margin: 10
},
TextInputStyle:
{
borderWidth: 1,
borderColor: ‘#009688’,
width: ‘100%’,
height: 40,
borderRadius: 10,
marginBottom: 10,
textAlign: ‘center’,
},
button: {
width: ‘100%’,
height: 40,
padding: 10,
backgroundColor: ‘#4CAF50’,
borderRadius:7,
marginTop: 12
},
TextStyle:{
color:‘#fff’,
textAlign:‘center’,
}
});
|
11. 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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
import React, { Component } from ‘react’;
import { StyleSheet, Platform, View, Image, Text, TextInput, TouchableOpacity, Alert } from ‘react-native’;
var Realm = require(‘realm’);
let realm ;
export default class App extends Component{
constructor(){
super();
this.state = {
Student_Name : ”,
Student_Class : ”,
Student_Subject : ”
}
realm = new Realm({
schema: [{name: ‘Student_Info’,
properties:
{
student_id: {type: ‘int’, default: 0},
student_name: ‘string’,
student_class: ‘string’,
student_subject: ‘string’
}}]
});
}
add_Student=()=>{
realm.write(() => {
var ID = realm.objects(‘Student_Info’).length + 1;
realm.create(‘Student_Info’, {
student_id: ID,
student_name: this.state.Student_Name,
student_class: this.state.Student_Class,
student_subject : this.state.Student_Subject
});
});
Alert.alert(“Student Details Added Successfully.”)
}
render() {
var A = realm.objects(‘Student_Info’);
var myJSON = JSON.stringify(A);
return (
<View style={styles.MainContainer}>
<TextInput
placeholder=“Enter Student Name”
style = { styles.TextInputStyle }
underlineColorAndroid = “transparent”
onChangeText = { ( text ) => { this.setState({ Student_Name: text })} }
/>
<TextInput
placeholder=“Enter Student Class”
style = { styles.TextInputStyle }
underlineColorAndroid = “transparent”
onChangeText = { ( text ) => { this.setState({ Student_Class: text })} }
/>
<TextInput
placeholder=“Enter Student Subject”
style = { styles.TextInputStyle }
underlineColorAndroid = “transparent”
onChangeText = { ( text ) => { this.setState({ Student_Subject: text })} }
/>
<TouchableOpacity onPress={this.add_Student} activeOpacity={0.7} style={styles.button} >
<Text style={styles.TextStyle}> CLICK HERE TO ADD STUDENT DETAILS </Text>
</TouchableOpacity>
<Text style={{marginTop: 10}}>{myJSON}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
flex:1,
alignItems: ‘center’,
justifyContent: ‘center’,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,
margin: 10
},
TextInputStyle:
{
borderWidth: 1,
borderColor: ‘#009688’,
width: ‘100%’,
height: 40,
borderRadius: 10,
marginBottom: 10,
textAlign: ‘center’,
},
button: {
width: ‘100%’,
height: 40,
padding: 10,
backgroundColor: ‘#4CAF50’,
borderRadius:7,
marginTop: 12
},
TextStyle:{
color:‘#fff’,
textAlign:‘center’,
}
});
|
Screenshot in Android device:
Screenshot in iOS device :
Also Read :
React Native Runtime PermissionsAndroid Request Android Example Tutorial
Upgrade Current React Native 0.63 Project to Latest Version 0.64 Guide
React Native Set onPress onClick on View Component Android iOS Example Tutorial
React Native Share API example to Share TextInput message from App
How to Create Strike Through Text in React Native Android iOS App
