• Realm >
• React Native SDK >
• Get Started

Install Realm for React Native

Overview

The MongoDB Realm React Native SDK enables development of React Native applications using the JavaScript and TypeScript languages. React Native enables you to build cross-platform iOS and Android apps with a single codebase using the React framework.

Prerequisites

Before getting started, ensure your development environment meets the following prerequisites:

• React Native v0.31.0 or later. Follow the official React Native CLI Quickstart instructions to set up your environment.
• CocoaPods (recommended for building an iOS app with React Native v.60+).

Expo does not support Realm

Unfortunately, Expo does not support Realm. If you use the Expo CLI or create-react-native-app to create your React Native project, you will need to “eject” your Expo project to use Realm. The installation steps on this page do not use the Expo CLI.

Installation

Select the tab below that corresponds to your React Native version. Follow the steps to create a React Native project and add the Realm React Native SDK to it.

• React Native v.60+
• Older React Native Versions

1

Create a React Native Project

Create your React Native project with the following command:

copy

npx react-native init MyRealmApp

Change to the project directory that the previous command just created:

copy

cd MyRealmApp

2

Install Realm with NPM

In your React Native project directory, add Realm to your project with the following command:

copy

npm install --save realm@10.0.0-beta.6

3

Resolve CocoaPods Dependencies

For the iOS app, fetch the CocoaPods dependencies with the following commands from your React Native project directory:

copy

cd ios && pod install && cd ..

This downloads the Realm libraries and regenerates the project .xcworkspace file that you can work with in Xcode to run your application.

4

Enable TypeScript (optional)

TypeScript is a superset of JavaScript that adds static type checking and other features intended to make application-scale development more robust. If you’d like to use TypeScript in your project, follow the React Native team’s official TypeScript and React Native guide. Realm supports TypeScript natively and integrates easily into a TypeScript project.

5

Run the App

React Native enables simultaneous development of both an iOS and Android app that use the same React codebase. You can edit the .js or .ts source files in your project directory to develop your app.

In development, the apps read their React source code as a bundle from a local bundle server. To run the bundle server, use the following command in your React Native project directory:

copy

npm start

With the bundle server running, you can now launch the Android and iOS apps:

• To run the Android app, use Android Studio to open the android directory in your project directory and click Run.
• To run the iOS app, use Xcode to open the .xcworkspace file in the ios directory. If you did not use CocoaPods during setup, open the .xcodeproj file in the ios directory instead. Once you have opened the project, click Run.

1

Create a React Native Project

Create your React Native project with the following command:

copy

react-native init MyRealmApp

Change to the project directory that the previous command just created:

copy

cd MyRealmApp

2

Install Realm Using NPM

In your React Native project directory, add Realm to your project with the following command:

copy

npm install --save realm@10.0.0-beta.6

3

Link the Realm Native Module

In your React Native project directory, link the Realm native module to your project with the following command:

copy

react-native link realm

4

Confirm the Link Step (Android)

For Android development, confirm that the link step correctly added the Realm module to the Gradle configuration files. In some versions, React Native has been known to fail to link Realm properly. If this happens, you can link Realm manually by adding any missing lines below to the corresponding files.

First, ensure the android/settings.gradle file includes Realm and specifies Realm’s project directory:

copy

rootProject.name = 'MyRealmApp'
include ':realm'
project(':realm').projectDir = new File(rootProject.projectDir, '../node_modules/realm/android')
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app'

Second, ensure the android/app/build.gradle file’s dependencies section declares Realm as a dependency:

copy

dependencies {
    implementation project(':realm')
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.facebook.react:react-native:+"  // From node_modules
    // ...
}

Finally, ensure the MainApplication.java file imports the RealmReactPackage and instantiates it in its packages list.

copy

import io.realm.react.RealmReactPackage; // Add this import.

public class MainApplication extends Application implements ReactApplication {
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new RealmReactPackage() // Add this line.
        );
    }
    // ...
}

5

Enable TypeScript (optional)

TypeScript is a superset of JavaScript that adds static type checking and other features intended to make application-scale development more robust. If you’d like to use TypeScript in your project, follow the React Native team’s official TypeScript and React Native guide. Realm supports TypeScript natively and integrates easily into a TypeScript project.

6

Run the App

React Native enables simultaneous development of both an iOS and Android app that use the same React codebase. You can edit the .js or .ts source files in your project directory to develop your app.

In development, the apps read their React source code as a bundle from a local bundle server. To run the bundle server, use the following command in your React Native project directory:

copy

npm start

With the bundle server running, you can now launch the Android and iOS apps:

• To run the Android app, use Android Studio to open the android directory in your project directory and click Run.
• To run the iOS app, use Xcode to open the .xcworkspace file in the ios directory. If you did not use CocoaPods during setup, open the .xcodeproj file in the ios directory instead. Once you have opened the project, click Run.

Import Realm

Add the following line to the top of your source files where you want to use MongoDB Realm:

• TypeScript
• JavaScript

copy

import Realm from "realm";

copy

import Realm from "realm";

←   MongoDB Realm React Native SDK Quick Start  →

© MongoDB, Inc 2008-present. MongoDB, Mongo, and the leaf logo are registered trademarks of MongoDB, Inc.