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 acaba de crear el comando anterior:

cd MyApp

Instalar el SDK con npm

En el directorio de su proyecto React Native, agregue el SDK a su proyecto con el siguiente comando:

npm install realm@12

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

Las aplicaciones que usan JSC pueden habilitar Hermes por separado para Android e iOS. Para saber cómo, consulta la guía "Uso de Hermes" en la documentación de React Native.

Resolver dependencias de CocoaPods

Para la aplicación iOS, obtenga las dependencias de CocoaPods con los siguientes comandos desde el directorio de su proyecto React Native:

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

Es posible que necesite ampliar la configuración de Proguard para usarla con una aplicación de Android. En la configuración de Proguard, agregue lo siguiente:

-keep class io.realm.react.**

Habilitar TypeScript (recomendado, pero opcional)

TypeScript es un superconjunto de JavaScript que añade comprobación de tipos estáticos y otras funciones diseñadas para robustecer el desarrollo a escala de aplicaciones. Si quieres usar TypeScript en tu proyecto, consulta la guía oficial de TypeScript y React Native del equipo de React Native. El SDK es compatible con TypeScript de forma nativa y se integra fácilmente en un proyecto TypeScript.

Instalar la biblioteca @realm/react

@realm/react es un paquete npm que optimiza las operaciones comunes del SDK, como las consultas, la escritura en bases de datos y la escucha de notificaciones de cambios de objetos. Esto reduce el código repetitivo, como la creación de tus propios escuchas y la gestión de estados.

@realm/react Proporciona acceso al SDK mediante un conjunto de proveedores con varios ganchos. Estos ganchos actualizan el estado de React cuando cambian los datos. Esto significa que los componentes que utilizan estos ganchos se renderizan de nuevo ante cualquier cambio en los datos de la base de datos.

En el directorio de su proyecto React Native, agregue @realm/react a su proyecto con el siguiente comando:

npm install @realm/react

Ejecutar la aplicación

React Native permite el desarrollo simultáneo de aplicaciones para iOS y Android que utilizan el mismo código base de React. Puedes editar los archivos fuente .js o .ts en el directorio de tu proyecto para desarrollar tu aplicación.

Durante el desarrollo, las aplicaciones leen su código fuente de React como un paquete desde un servidor de paquetes local. Para ejecutar el servidor de paquetes, usa el siguiente comando en el directorio de tu proyecto de React Native:

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.

• Para ejecutar la aplicación iOS, usa Xcode para abrir el archivo .xcworkspace en el directorio ios. Si no usaste CocoaPods durante la configuración, abre el archivo .xcodeproj en el directorio ios. Una vez abierto el proyecto, haz clic en 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 acaba de crear el comando anterior:

cd MyApp

Instala el SDK usando NPM

En el directorio de su proyecto React Native, agregue el SDK a su proyecto con el siguiente comando:

npm install realm@12

Enlaza el Módulo Nativo del SDK

En el directorio de su proyecto React Native, vincule el módulo nativo del SDK a su proyecto con el siguiente comando:

react-native link realm

Confirmar el paso de enlace (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'

En segundo lugar, asegúrese de que la sección dependencies del archivo android/app/build.gradle declare el SDK como una dependencia:

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 es un superconjunto de JavaScript que añade comprobación de tipos estáticos y otras funciones diseñadas para robustecer el desarrollo a escala de aplicaciones. Si quieres usar TypeScript en tu proyecto, consulta la guía oficial de TypeScript y React Native del equipo de React Native. El SDK es compatible con TypeScript de forma nativa y se integra fácilmente en un proyecto TypeScript.

Ejecutar la aplicación

React Native permite el desarrollo simultáneo de aplicaciones para iOS y Android que utilizan el mismo código base de React. Puedes editar los archivos fuente .js o .ts en el directorio de tu proyecto para desarrollar tu aplicación.

Durante el desarrollo, las aplicaciones leen su código fuente de React como un paquete desde un servidor de paquetes local. Para ejecutar el servidor de paquetes, usa el siguiente comando en el directorio de tu proyecto de React Native:

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.

• Para ejecutar la aplicación iOS, usa Xcode para abrir el archivo .xcworkspace en el directorio ios. Si no usaste CocoaPods durante la configuración, abre el archivo .xcodeproj en el directorio ios. Una vez abierto el proyecto, haz clic en Run.