Quick Start - React Native SDK

Create Objects

To create a new Realm object, specify the object type, pass in the object's initial values, and add it to the realm in a write transaction block.

To learn more, refer to CRUD - Create.

Update Objects

To update a Realm Object, update its properties in a write transaction block.

To learn more, refer to CRUD - Update.

Delete Objects

To delete a Realm Object, call the Realm.delete() method in a write transaction block.

To learn more, refer to CRUD - Delete.

Initialize the App using <AppProvider>

To use App Services features, such as authentication and Device Sync, you must first access your App Services App using your App ID. You can find your App ID in the App Services UI.

import React from 'react';
import {AppProvider} from '@realm/react';
function AppWrapperSync() {
  return (
    <AppProvider id={APP_ID}>
      <RestOfApp />
    </AppProvider>
  );
}

Authenticate a User with <UserProvider>

Use the <UserProvider> to handle sections of your app that need an authenticated user.

To authenticate and log in a user, provide a fallback prop for <UserProvider>. This could be a log in screen component or a simple function that calls App.logIn().

Users can only access the parts of your app nested within <UserProvider> after they have authenticated. If there's no authenticated user, the fallback component renders and nested components do not.

import React from 'react';
import {useApp, AppProvider, UserProvider} from '@realm/react';
import {Button} from 'react-native';
function AppWrapperSync() {
  return (
    <AppProvider id={APP_ID}>
      <UserProvider fallback={LogIn}>
        <RestOfApp />
      </UserProvider>
    </AppProvider>
  );
}
function LogIn() {
  const app = useApp();
  async function logInUser() {
    // When anonymous authentication is enabled, users can immediately log
    // into your app without providing any identifying information.
    await app.logIn(Realm.Credentials.anonymous());
  }
  return (
    <Button
      title='Log In'
      onPress={logInUser}
    />
  );
}

Configure a Synced Realm with <RealmProvider>

After you have initialized your App, authenticated a user, and defined your object model, you can configure a synced realm. This is similar to configuring a local realm. However, you need to add some additional props to the <RealmProvider>.

1. Create the realm's Configuration object. The Configuration object defines the parameters of a realm and identifies it. When creating a configuration object, make sure to pass your data models into the schema property.

2. Create a realm context with createRealmContext(). A realm context is a React Context object that contains app-wide access to your realm.

3. Extract the <RealmProvider> from the realm context, and then expose it to your app.

4. Add the sync property to <RealmProvider> and pass it a SyncConfiguration object. This sync object must contain flexible: true.

You need at least one sync subscription before you can read or write synced data. You can add subscriptions in your components or set up initial subscriptions on <RealmProvider>.

The syntax to create, read, update, and delete objects in a synced realm is identical to the syntax for non-synced realms. While you work with local data, a background thread efficiently integrates, uploads, and downloads changesets.

To learn more, refer to Configure a Synced Realm.