React Native Insert Data into Realm Local Database iOS Android Tutorial

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.


Screenshot of CMD after successfully installing Realm library :

2. After successfully installing the Realm database we need to execute the
reactnative 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.

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.

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.

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.

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.

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.

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.

10. Creating Style.

11. Complete source code for App.js File :

Screenshot in Android device:

Insert Data into Realm Local DatabaseScreenshot in iOS device :