Integrate the DobroDesk React Native SDK

Install the packages and run native sync

The package pages are https://www.npmjs.com/package/@dobrodesk/react-native-sdk/v/0.2.0 and https://www.npmjs.com/package/@dobrodesk/mobile-protocol/v/0.2.0. Keep the published versions aligned. React Native autolinking reads the wrapper's codegenConfig during the native build. Do not manually copy the private native source modules into the app.

After installing, run CocoaPods installation for iOS and register the Android repository before the first Android build. Keep the New Architecture enabled so the generated NativeDobroDeskMobileSdkSpec is available to the bridge.

The published React Native iOS package at 0.2.0 passes the clean consumer checks for Podspec dependency registration, rnconfig discovery and generated Codegen headers. Install the matching packages, run CocoaPods and use the normal React Native autolinking flow.

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

Register the iOS Podspec

The published 0.2.0 package contains the native artifacts for a clean React Native iOS integration. Let React Native autolinking provide the bridge and generated Codegen headers after the matching packages and CocoaPods are installed.

# 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

Register the bundled Android Maven repository

The published React Native package carries native/maven with the base engine, UI controller and UI coordinates. Register it from android/settings.gradle or settings.gradle.kts under dependencyResolutionManagement. The wrapper's Android build then resolves com.dobrodesk:dobrodesk-sdk:0.2.0 and com.dobrodesk:dobrodesk-ui:0.2.0 from that local repository.

// 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") }
  }
}

Align the Android host toolchain

The 0.2.0 Android artifacts use Kotlin Gradle Plugin 2.2.0 and Java 17. The current React Native 0.87 template already uses this Kotlin level. A React Native 0.76.x template can carry an older Kotlin plugin, so update that host plugin before building and keep Java 17 explicit.

React Native 0.76.x also applies a Java version alignment hook that conflicts with Kotlin 2.2.0. Disable that hook only for the older host profile. Keep the New Architecture enabled.

Use this tested React Native 0.76 minimum host tuple when preparing that profile: Android Gradle Plugin 8.6.0, Gradle 8.14.3, Kotlin Gradle Plugin 2.2.0, Java 17, compileSdk 36 and minSdk 26.

The current React Native 0.87 compatibility host uses the versions generated by that release, including Android Gradle Plugin 9.2.1, Gradle 9.4.1, Kotlin Gradle Plugin 2.2.0 and Java 21. Keep the generated versions for the current profile.

// 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

Configure and present the wrapper client

The wrapper supports React Native 0.76 through 0.87 with the New Architecture enabled. After package installation and native project setup, provide the credentialProvider function from your host application.

The credentialProvider function is supplied by your host application and returns an object containing a short-lived customer identity JWT. Do not use a support API token in the app bundle.

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();

Render inline or use a custom trigger

DobroDeskWidgetView is a Fabric native component backed by the same client and session as modal presentation. Give it a stable height so the host layout does not jump while authentication and the first widget content load. A host Button can still call presentWidget when a modal surface is preferable.

Unmounting the view releases only its inline owner. It does not reset the session or discard a draft. Reuse the same client when navigation remounts the screen and keep one inline view per client. Set visible to false for a kept-alive route or temporary overlay. This pauses the native surface without releasing the owner, session or draft. Pass the exported onError prop when the surrounding screen needs a typed recoverable error notice.

DobroDeskWidgetView is included in the published Mobile SDK 0.2.0 package. Use it for inline presentation and keep visibility changes on the same client so the session, draft and offline outbox are preserved.

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

Connect navigation and account lifecycle

Call closeWidget when the host screen unmounts. Use resetSession for an intentional conversation discard and logout before changing accountScope. The native engine owns durable state, polling and retry. JavaScript should react to typed events rather than start a second queue.

The wrapper presents the same native UI contract as the other mobile SDKs. Omit reduceMotion so the host OS accessibility preference controls motion. Pass visible false while a kept-alive route is hidden, then set it true after the route returns.

Handle loading, visibility and accessibility

The native view renders message loading and retry states. Use typed client events for a screen-level loading indicator, loadingBuilder for a custom preparation state and errorBuilder or onError for a recoverable host notice. Do not overlay a second spinner over the input while the widget is already showing its send state.

Keep the view mounted when possible. If navigation hides it, preserve the client and remount the view with the same client after the route returns. The native surface follows the system reduced-motion and animation scale preferences. Keep accessibility labels, focus order and keyboard avoidance in the host layout.

1. Use the same client and explicit style bounds for every remount.
2. Use closeWidget for a modal surface or unmount DobroDeskWidgetView for a temporary inline detach. Neither action resets the session.
3. Call logout and dispose the client only when the signed account ends, then create a new client for the next account.

Verify the React Native flow

1. Open the widget from a foreground React Native screen and confirm the native panel is presented once.
2. Subscribe to events and show a host-level loading state only while the SDK reports an active loading phase.
3. Send with a stable idempotency key, lose connectivity and call flushOutbox after the same account receives a fresh token. Do not generate a new key for an uncertain send.