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 |
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 Create FlatList using JSON Parsing Data Example Tutorial
React Native Show Realm Database Data into ListView Android iOS Example Tutorial
React Native Create Custom JSON ListView with Multiple Items Tutorial
React Native Realm Database Insert Update Delete View CRUD Operations iOS Android Tutorial
React Native JSON Parsing ListView From MySQL Database Android iOS
thanks for all tutorials,
Do you have an education plan for sql lite?
Mahdi i will currently working on SQLite tutorials but currently there is no official version of SQLite in react native so in my opinion i would like to go with Realm .
Thankuu sir for this tutorial…Can u please let us know how to save login details using realm database..?
Abhilasha all you do is after successfully login simply open a alert dialog box and ask the user to save login details if he says yes then save the login details into Realm database , now on the next time when he opens the app then check the Realm value is null or not and if the value is not null then fill the values into TextInput.