Instalar el SDK de React Native

Crear un proyecto React Native

Crea tu proyecto React Native con el siguiente comando:

npx react-native init MyApp

Cambie al directorio del proyecto que el comando anterior acaba de crear:

cd MyApp

Instalar el SDK con npm

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

npm install realm@12

Enable Hermes

El SDK es compatible con Hermes, el motor de JavaScript optimizado para dispositivos móviles de React Native. De forma predeterminada, las nuevas aplicaciones creadas con la CLI de React Native ya tienen Hermes habilitado.

Recomendamos usar Hermes con el SDK. Sin embargo, el SDK también es compatible con el motor JavaScriptCore (JSC) si tu aplicación lo requiere.

Existing apps that currently use JSC can enable Hermes separately for Android and iOS. To learn how, see the Using Hermes guide in the React Native docs.

Resolver dependencias de CocoaPods

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

cd ios && pod install && cd ..

Esto descarga las bibliotecas SDK y regenera el proyecto. .xcworkspace archivo con el que puedes trabajar en Xcode para ejecutar tu aplicación.

Ampliar la configuración de Android Proguard

You may need to extend your Proguard configuration to use it with an Android app. In your Proguard configuration, add the following:

-keep class io.realm.react.**

Enable TypeScript (recommended, but 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. The SDK supports TypeScript natively and integrates easily into a TypeScript project.

Instalar la biblioteca @realm/react

@realm/react es un paquete npm que agiliza operaciones comunes del SDK como consultar, escribir en una base de datos y escuchar notificaciones de cambios de objetos. Esto reduce el código redundante, como crear tus propios escuchadores y la gestión de estado.

@realm/react provides access to the SDK through a set of providers that have various hooks. The hooks update React state when the data changes. This means that components using these hooks rerender on any changes to data in the database.

In your React Native project directory, add @realm/react to your project with the following command:

npm install @realm/react

Ejecutar la aplicación

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:

npm start

Con el servidor bundle en funcionamiento, ahora puedes lanzar las aplicaciones Android e iOS:

• Para ejecutar la aplicación de Android, use Android Studio para abrir el directorio android en el directorio de su proyecto y haga clic en 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.

Crear un proyecto React Native

Crea tu proyecto React Native con el siguiente comando:

react-native init MyApp

Cambie al directorio del proyecto que el comando anterior acaba de crear:

cd MyApp

Instala el SDK usando NPM

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

npm install realm@12

Enlaza el Módulo Nativo del SDK

En el directorio de tu Proyecto React Native, vincula el módulo nativo del SDK a tu Proyecto con el siguiente comando:

react-native link realm

Confirm the Link Step (Android)

Para el desarrollo en Android, confirma que el paso de vinculación agregó correctamente el módulo del SDK a los archivos de configuración de Gradle. En algunas versiones, se ha observado que React Native no vincula correctamente el SDK. Si esto ocurre, puedes vincular el SDK manualmente agregando las líneas que falten a los archivos correspondientes.

Primero, asegúrese de que el archivo android/settings.gradle incluya el SDK y especifique el directorio del proyecto del SDK:

rootProject.name = 'MyApp'
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 the SDK as a dependency:

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

Por último, asegúrese de que el archivo MainApplication.java importe el RealmReactPackage y lo instancia en su lista de paquetes.

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.
        );
    }
    // ...
}

Habilite TypeScript (opcional)

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. The SDK supports TypeScript natively and integrates easily into a TypeScript project.

Ejecutar la aplicación

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:

npm start

Con el servidor bundle en funcionamiento, ahora puedes lanzar las aplicaciones Android e iOS:

• 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.