Example of Realm Database in React Native

Example of Realm Database in React Native

Here is an Example of Realm Database in React Native. We are hoping you have read our previous post on Local Database in React Native App. A realm is an open-source object database management system, initially for mobile, also available for platforms such as Xamarin or React Native, and others, including desktop applications, and is licensed under the Apache License. We can perform all the CRUD transactions in this database and much faster than the SQLite database. Let’s get started with the Realm.

In this example, we will make a HomeScreen with the option to go to other screens like

  • RegisterUser: To Register the User. (Create/Insert)
  • ViewAllUser: To View All Users. (Read)
  • ViewUser: To View Singel Users By Id. (Read)
  • UpdateUser: To Update the User.(Update)
  • DeleteUser: To Delete the User.

We will be having some custom components like Mybutton, Mytext, Mytextinput which will be used in place of react-native Button, Text, and TextInput.

How to Use

You just have to import the library like this:

and open the database using

Now, whenever you need to make some database call you can use realm to execute the database query

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run

npm install -g react-native-cli

Run the following commands to create a new React Native project

react-native init ProjectName

If you want to start a new project with a specific React Native version, you can use the --version argument:

react-native init ProjectName --version X.XX.X
react-native init ProjectName --version react-native@next

This will make a project structure with an index file named App.js in your project directory.

Installation of Dependencies

Note: Realm library do not support node version 10 yet so if you want to use this library then you have to downgrade the node version if you are using the node version >= 10.

To manage this downgrade and upgrade of node version we have a simple solution and that is to use “n”. It is a very useful tool to manage node.js versions interactively, please visit Manage Different Node.js Versions in a Single Terminal with Ease using n for more info about the n.

We recommend you to use node version 9.8.0 as we have used the same version to create the example.

This example is updated for the React Navigation 4.0+. For more about React Navigation 4 please have a look at Using React Navigation 4.0 in React Native apps.

To install the dependencies open the terminal and jump into your project

1. Install realm dependency to use RealM

2. Install react-navigation dependency to import createAppContainer

3. Install react-native-gesture-handler dependency to support gesture navigation

4. Install react-navigation-stack to import createStackNavigator

These commands will copy all the dependencies into your node_module directory.

Linking of Dependencies

After the updation of React Native 0.60, they have introduced autolinking feature means we do not require to link the library but they have also mentioned that some libraries need linking and realm is one of those cases. So for that, we need to link the library using

CocoaPods Installation

In this example, we need to install the pods for react-native-gesture-handler and realm.

Please use the following command to install CocoaPods

Here we have done with our installation of the library. If you are still facing the trouble please comment below so that we can help you out from the problem.

Example of Realm

We will perform complete CRUD operation in this example. Please create the following project structure and copy the code given below.

Open the project directory and replace the following code

App.js

Mybutton.js

Mytext.js

Mytextinput.js

HomeScreen.js

RegisterUser.js

UpdateUser.js

ViewAllUser.js

ViewUser.js

DeleteUser.js

To Run the React Native App

Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running
react-native run-ios (macOS only).

After running the Application successfully if you want to see the stored data in the device just to check whether database is storing the data proper you can visit How to See Realm Database Data Saved in Device using Android Studio.

             

This is how you can use Realm Database in React Native Application. If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂

24 thoughts on “Example of Realm Database in React Native”

  1. Hi Snehal Agrawal,
    Thank you so much for perfect example. Do you have any tutorial or example to send this offline saved realm data on live server MySQL database, or any Sync method ?

    • I don’t think it is a very good idea to map two different database type :p but still, if you want then you can take an additional flag with each of the data tables that are sync_flag and that will be zero whenever you create a local record or do an update in the record. So whenever you want to send the data to the server you can take the records with sunc_flag zero and send them to the server.

  2. Hi,
    I am looking for an Example where develop a mobile app using react-native and java/python for server side programming and MySql db for store data & when problem with mysql or server, no internet then use Realm DB .
    Is this make sense, Can I have an example like this.

    Thank you!

  3. yeah I see that. My issue is that whenever i leave the mybutton part in HomeScreen.js, i get an invalid violation error. But when i comment it out, the app runs ok, up to “”, but obviously there are no buttons. Maybe i’m missing something…

    • You can just push the extra property while realm.create(..). That is the main advantage of ORM as it stores the data in JSON format it doesn’t care about the fields. The main thing which it cares about is the JSON object that has been stored and returns the JSON object. For example, while pushing 1st data I can insert {“name”: “Snehal”, “Blood Group”: “AB+”} and while pushing other data I can push {“name”: “XYZ”, “Blood Group”: “O+”, “age”:”12″}. So it will create two data sets as a JSON and does not care about the no of field difference. Also While searching if you are making a filter of age-wise it will skip firs data (as per the example is given) as the first set has no age field.

  4. Thank You for providing simple Articles by this site. Keep going Bro.

    Hi Snehal,
    In Above realm CRUD example, I save(create) date objects in realm using new Date(), but the saved Date format is like ” Wed Oct 02 2019 05:30:00 GMT+0530 (India Standard Time)” , But i want to save date “2019-10-31” this format in realm but it doesn’t work.And when I retrieve(read) date by DatePicker (accepts date 2019-10-31) but shows date:invalid predicate error, I was tried lot of ways, getting INVALID PREDICATE error? will you provide any article for my Problem.
    Requirement:
    1. save date in realm without time and IST(YYYY-MM-DD)
    2. Retrieve the same dates with realm queries

    Thank You!

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.