Integra el SDK React Native de DobroDesk

Instala los paquetes y ejecuta la sincronización nativa

Las páginas de los paquetes son https://www.npmjs.com/package/@dobrodesk/react-native-sdk/v/0.2.0 y https://www.npmjs.com/package/@dobrodesk/mobile-protocol/v/0.2.0. Mantén alineadas las versiones publicadas. React Native autolinking lee codegenConfig del wrapper durante el build nativo. No copies manualmente módulos nativos privados a la app.

Después de instalar, ejecuta la instalación de CocoaPods para iOS y registra el repositorio Android antes del primer build Android. Mantén New Architecture activada para que NativeDobroDeskMobileSdkSpec esté disponible en el bridge.

El paquete publicado de React Native para iOS 0.2.0 supera las comprobaciones de una app consumidora limpia para registrar dependencias del Podspec, descubrir rnconfig y generar encabezados de Codegen. Instala los paquetes correspondientes, ejecuta CocoaPods y usa el flujo normal de autolinking de React Native.

npm install @dobrodesk/react-native-sdk@0.2.0 @dobrodesk/mobile-protocol@0.2.0

Registra el Podspec de iOS

El paquete publicado 0.2.0 contiene los artefactos nativos para una integración limpia de React Native iOS. Después de instalar los paquetes correspondientes y CocoaPods, deja que React Native proporcione el bridge y los encabezados generados de Codegen mediante autolinking.

# React Native iOS 0.2.0 passes the clean consumer integration checks.
# Install the matching packages and run CocoaPods.
# React Native autolinking provides the corrected root Podspec and bridge setup.

target "YourApp" do
  # Keep the generated React Native target configuration here.
end

Registra el repositorio Maven de Android incluido

El paquete React Native publicado contiene native/maven con las coordenadas del motor base, el controlador UI y UI. Regístralo desde android/settings.gradle o settings.gradle.kts en dependencyResolutionManagement. El build Android del wrapper resolverá entonces com.dobrodesk:dobrodesk-sdk:0.2.0 y com.dobrodesk:dobrodesk-ui:0.2.0 desde ese repositorio local.

// Groovy template: android/settings.gradle
import org.gradle.api.initialization.resolve.RepositoriesMode

dependencyResolutionManagement {
  repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
  repositories {
    google()
    mavenCentral()
    maven { url = uri("$rootDir/../node_modules/@dobrodesk/react-native-sdk/native/maven") }
  }
}

// Kotlin DSL template: android/settings.gradle.kts
import org.gradle.api.initialization.resolve.RepositoriesMode

dependencyResolutionManagement {
  repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
  repositories {
    google()
    mavenCentral()
    maven { url = uri("$rootDir/../node_modules/@dobrodesk/react-native-sdk/native/maven") }
  }
}

Alinea la toolchain Android del host

Los artefactos Android 0.2.0 usan Kotlin Gradle Plugin 2.2.0 y Java 17. La plantilla actual de React Native 0.87 ya usa este nivel de Kotlin. Una plantilla de React Native 0.76.x puede incluir un plugin de Kotlin más antiguo. Actualiza el plugin del host antes de compilar y mantén Java 17 explícito.

React Native 0.76.x también aplica un hook de alineación de versión de Java que entra en conflicto con Kotlin 2.2.0. Desactiva ese hook solo para el perfil de host antiguo y mantén activada la New Architecture.

Usa para el perfil mínimo probado de React Native 0.76 Android Gradle Plugin 8.6.0, Gradle 8.14.3, Kotlin Gradle Plugin 2.2.0, Java 17, compileSdk 36 y minSdk 26.

El host de compatibilidad actual de React Native 0.87 usa las versiones generadas por ese release, incluidos Android Gradle Plugin 9.2.1, Gradle 9.4.1, Kotlin Gradle Plugin 2.2.0 y Java 21. Conserva las versiones generadas para el perfil actual.

// android/build.gradle in an older React Native host
buildscript {
  ext {
    minSdkVersion = 26
    compileSdkVersion = 36
    kotlinVersion = "2.2.0"
  }
}

// android/app/build.gradle for the React Native 0.76.x profile
android {
  compileOptions {
    sourceCompatibility JavaVersion.VERSION_17
    targetCompatibility JavaVersion.VERSION_17
  }
}

kotlin {
  jvmToolchain(17)
}

// android/gradle/wrapper/gradle-wrapper.properties
distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.3-all.zip

// android/gradle.properties for the React Native 0.76.x profile
react.internal.disableJavaVersionAlignment=true

Configura y presenta el cliente wrapper

El wrapper admite React Native de 0.76 a 0.87 con New Architecture activada. Después de instalar los paquetes y configurar los proyectos nativos, proporciona credentialProvider desde tu aplicación host.

credentialProvider lo proporciona la aplicación host y devuelve un objeto con un JWT de identidad del cliente de corta duración. No uses un support API token en el bundle de la app.

import { createDobroDeskReactNativeClient } from "@dobrodesk/react-native-sdk";
import type { DobroDeskSdkConfig } from "@dobrodesk/mobile-protocol";

const config: DobroDeskSdkConfig = {
  apiOrigin: "https://dobrodesk.com",
  integrationId: "wgt_0123456789abcdef0123456789abcdef",
  accountScope: currentCustomer.id,
  locale: "en",
  credentialProvider: async () => ({
    authorizationToken: await loadDobroDeskToken(),
  }),
};

const client = createDobroDeskReactNativeClient(config);
await client.presentWidget();

Controla el disparador y la visibilidad del widget inline

Usa visible={visible} cuando una ruta keep-alive o un overlay oculte temporalmente el widget inline. La superficie nativa pausa el trabajo visible y conserva el cliente, la sesión y el borrador. Usa loadingBuilder para un estado de preparación propio y errorBuilder o onError para un aviso de error recuperable del host.

Vuelve a usar visible=true cuando regrese la ruta. Reutiliza el mismo cliente y no montes varias superficies inline para una sesión.

DobroDeskWidgetView forma parte del paquete publicado de Mobile SDK 0.2.0. Úsalo para la presentación inline y cambia la visibilidad en el mismo cliente para conservar la sesión, el borrador y la outbox offline.

import {
  DobroDeskWidgetView,
  type DobroDeskWidgetViewProps,
} from "@dobrodesk/react-native-sdk";

type SupportPanelProps = {
  client: DobroDeskWidgetViewProps["client"];
  visible?: boolean;
  onError?: DobroDeskWidgetViewProps["onError"];
};

export function SupportPanel({
  client,
  visible = true,
  onError,
}: SupportPanelProps) {
  return (
    <DobroDeskWidgetView
      client={client}
      options={{ locale: "en", view: "home" }}
      visible={visible}
      style={{ height: 560, width: "100%" }}
      onError={onError}
    />
  );
}

Conecta la navegación y el ciclo de la cuenta

Llama a closeWidget cuando se desmonte la pantalla host. Usa resetSession para descartar intencionadamente una conversación y logout antes de cambiar accountScope. El motor nativo gestiona el estado duradero, el polling y los reintentos. JavaScript debe reaccionar a eventos tipados y no crear una segunda cola.

El wrapper presenta el mismo contrato de UI nativa que los demás SDK móviles. Omite reduceMotion para que la preferencia de accesibilidad del sistema host controle el movimiento.

Gestionar carga, visibilidad y accesibilidad

Usa los hooks de carga o los eventos tipados para el estado de la pantalla anfitriona. La superficie muestra por sí misma la carga de mensajes, la espera y los reintentos para evitar un segundo spinner sobre el campo de entrada.

Oculta o muestra la superficie cuando una ruta cambia temporalmente y conserva el cliente. El widget respeta las preferencias del sistema para reducir movimiento. Quitar o cerrar la vista no descarta la sesión ni el borrador.

1. Al volver a montar, reutiliza el mismo cliente y dimensiones estables del contenedor.
2. Usa la función de visibilidad para ocultar temporalmente, no una función de reinicio de sesión.
3. Finaliza la sesión solo al cerrar sesión o cambiar de cuenta de forma intencionada.

Verifica el flujo de React Native

1. Abre el widget desde una pantalla React Native en primer plano y confirma que el panel nativo se presenta una sola vez.
2. Suscríbete a los eventos y muestra un estado de carga del host solo mientras el SDK informe una fase de carga activa.
3. Envía con un idempotency key estable, pierde la conexión y llama a flushOutbox después de que la misma cuenta reciba un token nuevo. No generes una clave nueva para un envío incierto.