Інтегруйте DobroDesk React Native SDK

Установіть пакети та виконайте нативну синхронізацію

Сторінки пакетів: https://www.npmjs.com/package/@dobrodesk/react-native-sdk/v/0.2.0 і https://www.npmjs.com/package/@dobrodesk/mobile-protocol/v/0.2.0. Узгоджуйте опубліковані версії. React Native autolinking читає codegenConfig обгортки під час нативного збирання. Не копіюйте приватні нативні модулі вручну до застосунку.

Після встановлення виконайте встановлення CocoaPods для iOS і зареєструйте Android-репозиторій перед першим Android-збиранням. Залиште New Architecture увімкненою, щоб згенерований NativeDobroDeskMobileSdkSpec був доступний bridge.

Опублікований пакет React Native для iOS 0.2.0 проходить перевірки чистого consumer-застосунку для реєстрації залежностей Podspec, пошуку rnconfig і згенерованих Codegen-заголовків. Встановіть відповідні пакети, запустіть CocoaPods і використовуйте стандартний React Native autolinking.

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

Зареєструйте iOS Podspec

Опублікований пакет 0.2.0 містить нативні артефакти для чистої інтеграції React Native iOS. Після встановлення відповідних пакетів і CocoaPods дозвольте React Native autolinking підключити bridge та згенеровані Codegen-заголовки.

# 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

Зареєструйте bundled Android Maven-репозиторій

Опублікований React Native пакет містить native/maven з координатами базового рушія, UI-контролера та UI. Зареєструйте його в android/settings.gradle або settings.gradle.kts у dependencyResolutionManagement. Після цього Android-збирання обгортки знаходить com.dobrodesk:dobrodesk-sdk:0.2.0 і com.dobrodesk:dobrodesk-ui:0.2.0 у локальному репозиторії.

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

Узгодьте Android toolchain хоста

Android-артефакти 0.2.0 використовують Kotlin Gradle Plugin 2.2.0 і Java 17. Поточний шаблон React Native 0.87 вже використовує цей рівень Kotlin. Шаблон React Native 0.76.x може містити старішу версію Kotlin, тому перед збіркою оновіть plugin хоста та явно залиште Java 17.

React Native 0.76.x також застосовує Java version alignment hook, який конфліктує з Kotlin 2.2.0. Вимикайте цей hook лише для старого профілю хоста, а New Architecture залишайте увімкненою.

Для перевіреного мінімального профілю React Native 0.76 використовуйте Android Gradle Plugin 8.6.0, Gradle 8.14.3, Kotlin Gradle Plugin 2.2.0, Java 17, compileSdk 36 і minSdk 26.

Поточний compatibility host React Native 0.87 використовує версії, згенеровані цим релізом, зокрема Android Gradle Plugin 9.2.1, Gradle 9.4.1, Kotlin Gradle Plugin 2.2.0 і Java 21. Для поточного профілю зберігайте згенеровані версії.

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

Налаштуйте й відкрийте wrapper client

Обгортка підтримує React Native від 0.76 до 0.87 з увімкненою New Architecture. Після встановлення пакетів і налаштування нативних проєктів надайте credentialProvider зі свого застосунку хоста.

Функцію credentialProvider надає застосунок хоста, і вона повертає об'єкт із короткоживучим customer identity JWT. Не використовуйте support API token у бандлі застосунку.

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

Відрендерте inline або використайте власний тригер

DobroDeskWidgetView — Fabric native component на тому самому client і сесії, що й модальне відкриття. Задайте сталу висоту, щоб компонування не стрибало під час автентифікації та першого завантаження.

Unmount звільняє лише inline-власника і не скидає сесію чи чернетку. Передавайте visible={visible} для тимчасово прихованого keep-alive маршруту або overlay, а visible={true} після повернення. Під час remount використовуйте той самий client і не створюйте кілька inline view для однієї сесії. Передавайте типізований onError із хоста, якщо екрану потрібне власне повідомлення про відновлювану помилку.

DobroDeskWidgetView входить до опублікованого пакета Mobile SDK 0.2.0. Використовуйте його для inline-відображення й змінюйте видимість на тому самому клієнті, щоб зберігати сесію, чернетку та offline outbox.

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

Під'єднайте навігацію та життєвий цикл акаунта

Викликайте closeWidget, коли екран хоста демонтується. Використовуйте resetSession для навмисного відкидання розмови та logout перед зміною accountScope. Нативний рушій керує довговічним станом, polling і повторами. JavaScript має реагувати на типізовані події, а не створювати другу чергу.

Обгортка відкриває такий самий контракт нативного UI, як інші мобільні SDK. Не задавайте reduceMotion, щоб налаштування доступності ОС керувало анімаціями.

Керуйте завантаженням, видимістю та доступністю

DobroDeskWidgetView показує завантаження та повтори. Використовуйте типізовані події для стану екрана, loadingBuilder для власного стану підготовки та errorBuilder або onError для відновлюваної помилки, не додаючи другий spinner поверх поля вводу.

Під час remount використовуйте той самий client і сталі bounds. Unmount view або closeWidget не скидає сесію. Системні reduced-motion та animation scale налаштування залишаються керівними.

1. Для кожного remount використовуйте той самий client і явні style bounds.
2. Для тимчасового inline-від'єднання демонтуйте view або викличте closeWidget, не скидаючи сесію.
3. Викликайте logout і dispose client лише після завершення підписаного акаунта.

Перевірте React Native-флоу

1. Відкрийте віджет із foreground-екрана React Native і перевірте, що нативна панель відкрилася один раз.
2. Підпишіться на події й показуйте стан завантаження на рівні хоста лише коли SDK повідомляє про активну фазу завантаження.
3. Надішліть повідомлення зі стабільним idempotency key, втратьте з'єднання й викличте flushOutbox після отримання нового токена для того самого акаунта. Не створюйте новий ключ для непевного надсилання.