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 List of All Text Component CSS Style Props Explained Example
React Native Create Custom Rectangle Square Shape View Dynamically
How to Get Only Numeric Value From TextInput in React Native
How to Set-Change Button Background Color in React Native Android iOS
React Native Rotate Text View Elements to Specific Degree using Transform
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.
App is getting crash after installing realm, i have simply coppied your app.js code please help
Thanks for comment, I am installing and checking again the Realm notify you ASAP.
Hi Admin,
Thanks again for clear example.
Do you have any tutorial or example to send this offline realm data on live server MySQL database, or any Sync method, when mobile is connected with internet.
Rizwan i am working on it but it would take some time to complete .