React Native Realm Database Insert Update Delete View CRUD Operations iOS Android Tutorial

Realm database is growing among developers because of its flexibility and usability, It is more suitable for react native applications rather than using SQLite database because of a proper and stable version. In our previous two tutorials we have discussed about Inserting data into Realm mobile local database and Showing all inserted data into ListView. This tutorial is the next and major part of previous tutorials, In this tutorial we would going to perform basic 4 operations known as Insert, Update, Delete and Display on Realm local mobile database in react native application. So here is the step by step tutorial for Realm Database Insert Update Delete View CRUD Operations in react native android iOS application.

Activities in current project :

  1. MainActivity : Used to Insert data into Realm mobile database.
  2. ShowDataActivity : Display all inserted data into ListView.
  3. EditActivity : Open the selected record filled in TextInput in activity, Also contain the delete button to delete current record.

Contents in this project React Native Realm Database Insert Update Delete View CRUD Operations in iOS Android Example Tutorial:

1. The first step is to install React Navigation library in order to use Activity structure in current application, So open your project’s folder in Command prompt/ Terminal and execute the below command.

Screenshot of CMD :

Screenshot of CMD after successfully installed the library:

2. Now we need to install the Realm library in our current to use Realm Local Mobile database in our project, So open react native project folder in CMD and execute the below command.

Screenshot of CMD:

Screenshot after successfully installed the Realm library:

3. After installing the Realm library we need to execute  react-native link realm command to re-arrange the complete react native project and index the newly installed realm library.

4. Next step is to start coding, So Open your project’s App.js file and import StyleSheet, Platform, View, Image, Text, TextInput, TouchableOpacity, Alert, YellowBox and ListView component in your project.

5. Import Realm object in your project and make a Global variable named as realm .

6. Import StackNavigator react navigation library in your project to use Activity structure.

7. Create a new class activity named as MainActivity in your project, This would be our first home screen. In this activity we would make 3 TextInput boxes to insert data into Realm mobile database. I have explained all this code in our previous tutorial in Inserting Data Into Realm Mobile database, Read this tutorial.

navigationOptions : Used to set Title of Activity screen.

GoToSecondActivity : Navigate to Second Activity, We would call this function on button onPress event.

constructor() : Inside the constructor we would make 3 States to hold the TextInput entered data, We would also make Table in Realm database.

Screenshot of MainActivity :

8. Create another class named as ShowDataActivity, This activity parse and show all the inserted Realm Database data into ListView. I have explained all this Activity code into previous tutorial, So read our Show Realm Database Data into ListView tutorial.

9. Creating navigationOptions in ShowDataActivity to show the activity title.

10. Creating constructor() inside ShowDataActivity.

YellowBox.ignoreWarnings : To hide the yellow box deprecated warning messages.

mydata : Used to hold all the Student_Info realm database objects.

ds : Setting up ListView data source.

dataSource : Setting up ds in dataSource state.

11. Creating function GoToEditActivity() with 4 parameter student_id, student_name, student_class and student_subject. We would call this function when user clicks on any of Record, this function would open the Third activity and send all 4 selected values to next activity. We are using the this.props.navigation.navigate method to open and send value to next activity.

12. Creating function named as  ListViewItemSeparator(), This function would make a Horizontal line between each record in ListView.

13. Creating the ListView component in render’s return block, Inside the ListView we would make 4 TextView to show student details.

14. Complete source code of ShowDataActivity :

Screenshot of ShowDataActivity :

15. Creating the third class named as EditActivity, This class is used to Update the selected record, We would also make a Delete button in class so user would delete the current selected record.

16. Creating constructor() in EditActivity class. Inside the constructor we would make 4 State named as Student_IdStudent_Name, Student_Class and Student_Subject.

17. Creating the componentDidMount() inbuilt method to receive the send values from previous activity and stored in above created States.

18. Creating the Update_Student() function to update the current opened record.

19. Creating the Delete_Student() function to delete the current opened record using current record ID.

20. Creating 3 Text Input boxes and 2 buttons in render’s return block.

21. Complete source code of EditActivity class.

Screenshot of EditActivity class:

Realm Database Insert Update Delete View CRUD Operations22. Creating StackNavigator activity calling block in order to navigate and manage activities.

23. Creating Style.

24. Complete source code for App.js File :

Screenshots:

Realm Database Insert Update Delete View CRUD Operations

17 Comments

  1. React Developer

    Thanx Admin!!!!

  2. Thanx again and now Firebase, please 😉

  3. hey please post the article about notification display using react-native.

  4. After adding student detail if we close the application and then reopen the application and try to delete the record, it will generate error – ‘object must be of type ‘object’, got (undefined)’

  5. When I have list of record and I am trying to delete all the record one by one, at that time also this error occur.

  6. When I perform Delete and Update operation this error will be view – ‘object must be of type ‘object’, got (undefined)’
    So, how to remove this error

  7. After adding student detail if we close the application and then reopen the application and try to delete the record, it will generate error – ‘object must be of type ‘object’, got (undefined)’ —— how to remove this error

  8. How to apply FlatList in this tutorial? I have tried but failed.

Leave a Reply

Your email address will not be published. Required fields are marked *