Clomni

Mobil SDK-nı React Native və Expo tətbiqinə qoşmaq

Son yeniləmə: 9 oktyabr 2026 · 10 dəq oxunur

@clomni/react-native paketi native Android və iOS SDK-larının üstündədir, ekranlar native ekranlardır.

Addımlar

  1. 1

    Tələblər

    • React Native 0.75 və ya daha yeni (New Architecture üçün 0.76). Expo SDK 52 və ya daha yeni, development build ilə.
    • iOS 15, Android 6.0 (API 23).
    • App ID və hər iki API açarı (android_…, ios_…).
    • Səsli mesaj üçün (SDK 1.0.2-dən) Android tətbiqinin manifestində RECORD_AUDIO elan olunmalıdır, yoxsa mikrofon düyməsi görünmür. Kamera üçün icazə lazım deyil.
  2. 2

    Quraşdırma

    npm install @clomni/react-native
cd ios && pod install

    Qalanını autolinking edir. Android-də modul ai.clomni:messenger-i Maven Central-dan gətirir. iOS-da pod install SDK-nı Swift package kimi əlavə edir (React Native-in spm_dependency-si), Xcode onu ilk build-də yükləyir.

    React Native 0.75-dən köhnədirsə, pod install «@clomni/react-native needs React Native 0.75 or later» yazıb dayanır. React Native-i yeniləyin, ya da Podfile-a aşağıdakı sətri əlavə edin. Link zamanı ClomniMessenger simvollarında xəta çıxırsa, ya da push-u native kodda bağlayırsınızsa da bu sətri əlavə edin:

    # ios/Podfile, in your app's target
pod 'ClomniMessenger', :git => 'https://github.com/clomni/clomni-mobile-sdk.git', :tag => '1.0.4'
  3. 3

    Expo

    Expo Go native modulları yükləyə bilmir. Development build işlədin: npx expo prebuild, npx expo run:ios və ya run:android, ya da EAS build. Paketin config plugin-i native layihələrə lazım olanları yazır:

    // app.config.ts
export default {
  // ...
  plugins: [
    ['@clomni/react-native', {
      photoLibraryPermission: 'To send photos to support',       // iOS
      cameraPermission: 'To take a photo and send it to support', // iOS
      push: true,                                                 // the default
      notificationIcon: './assets/notification-icon.png',         // Android, white silhouette PNG
    }],
  ],
};

    push: true iOS-da aps-environment entitlement-ini və remote-notification background mode-u, Android-də POST_NOTIFICATIONS icazəsini əlavə edir. İkon clomni_notification_icon adlı drawable olur. Adi (Expo-suz) tətbiqdə iki şəkil icazəsi mətnini Info.plist-ə özünüz yazın: NSPhotoLibraryUsageDescription və NSCameraUsageDescription.

  4. 4

    SDK-nı başladın

    Bir dəfə, komponentdən kənarda. index.js yaxşı yerdir, çünki push tətbiqi ekransız başlada bilər.

    // index.js
import { AppRegistry, Platform } from 'react-native';
import Clomni from '@clomni/react-native';
import App from './App';
import { name as appName } from './app.json';

Clomni.initialize('app_…', Platform.OS === 'ios' ? 'ios_…' : 'android_…');
if (__DEV__) Clomni.setLogLevel('debug');

AppRegistry.registerComponent(appName, () => App);

    initialize-in üçüncü parametri region-dur, standart dəyəri 'eu'-dur. Hazırda yalnız 'eu' var, onu yazmaq lazım deyil: başqa dəyər verilsə, SDK bunu loga yazır və 'eu' işlədir.

  5. 5

    İstifadəçi və Messenger

    Clomni.loginUser({ userId: '12345', email: '[email protected]', name: 'Aysel' }, hashFromYourServer);
Clomni.updateUser({ language: 'az', customAttributes: { plan: 'premium' } });

// Together with your app's own logout:
Clomni.logout();
    import { useEffect, useState } from 'react';
import { Pressable, Text } from 'react-native';
import Clomni from '@clomni/react-native';

export function SupportRow() {
  const [unread, setUnread] = useState(0);

  useEffect(() => {
    // The current count at once, then every change.
    const subscription = Clomni.addEventListener('unreadCountChanged', setUnread);
    return () => subscription.remove();
  }, []);

  return (
    <Pressable onPress={() => Clomni.present('profile_support')}>
      <Text>Support{unread > 0 ? ` (${unread})` : ''}</Text>
    </Pressable>
  );
}

    Digər çağırışlar: presentNewConversation(source), presentConversation(id), dismiss(), setLauncherVisible(true), setBottomPadding(72). Hadisələr addEventListener ilə: messengerOpened, messengerClosed, conversationStarted, flowCompleted. Native SDK-nın callback-lərini modul özü tutur, onları native kodda ayrıca təyin etməyin.

    Tətbiq hər açılanda, istifadəçi daxil olubsa, loginUser-i yenidən çağırın, istifadəçi təzə daxil olmuş kimi. Eyni istifadəçi üçün SDK saxlanmış sessiyanı işlədir.

    Daxil olmamış istifadəçi üçün heç nə çağırmaq lazım deyil: Messenger açılanda anonim ziyarətçini özü yaradır. Clomni.loginUnidentifiedUser() bunu əvvəlcədən edir. Ziyarətçi logout-a qədər bu cihazda eyni qalır, loginUser çağırılanda onun söhbətləri istifadəçiyə keçir.

  6. 6

    Flow-lar, hadisələr, linklər və görünüş

    Flow-u tətbiqdən başlatmaq və Messenger-in hadisələrini dinləmək:

    Clomni.startFlow('ride_problem', { ride_id: 'R-1923' }, { openMessenger: true, source: 'ride_screen' });

const subscriptions = [
  Clomni.addEventListener('messengerOpened', (source) => console.log('opened from', source)),
  Clomni.addEventListener('messengerClosed', () => console.log('closed')),
  Clomni.addEventListener('conversationStarted', (id) => console.log('conversation', id)),
  Clomni.addEventListener('flowCompleted', (flowId) => console.log('flow', flowId)),
];
// later: subscriptions.forEach((s) => s.remove());

    Flow paneldə eyni adlı «Tətbiq hadisəsi» trigger-i ilə qurulmalı və dərc olunmalıdır. Data JSON olmalıdır. Modul native SDK-nın hadisələrini özü idarə edir: onları tətbiqin native kodunda ayrıca təyin etməyin.

    Linklər, dil, səslər və tətbiqin öz rəngi:

    import { Linking } from 'react-native';

Clomni.onLink((url) => Linking.openURL(url));   // or your own router; null: the system opens links
Clomni.setLanguage('en');                       // 'az', 'en', 'ru'; null follows the phone
Clomni.setSoundsEnabled(false);
Clomni.setTheme({ primaryColor: '#0A66C2', typeface: 'Montserrat', mode: 'dark' });

    Şrift fontFamily stillərində işlətdiyiniz ailə adıdır. iOS-da şrift tətbiqdə olmalı və UIAppFonts altında yazılmalıdır, Android-də React Native onu android/app/src/main/assets/fonts və ya res/font qovluğunda tapır. Yalnız şrift üçün: Clomni.setTypeface('Montserrat'). Paneldəki dəyər yalnız tətbiq öz dəyərini vermədikdə işləyir.

  7. 7

    Push: Android

    Açarları əvvəlcə panelə yükləyin («Mobil SDK push açarları»). Firebase-i google-services.json və Google services Gradle plugin-i ilə, React Native Firebase sənədindəki kimi qurun. Sonra:

    // index.js, next to initialize
import messaging from '@react-native-firebase/messaging';

// Clomni data messages while the app is in the background or closed: the SDK shows the notification.
messaging().setBackgroundMessageHandler(async (message) => {
  Clomni.handlePush(message.data ?? {});
});
    // App.tsx
import { useEffect } from 'react';
import { PermissionsAndroid, Platform } from 'react-native';
import messaging from '@react-native-firebase/messaging';
import Clomni from '@clomni/react-native';

useEffect(() => {
  if (Platform.OS !== 'android') return;
  PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS);   // Android 13+
  messaging().getToken().then((token) => Clomni.setDeviceToken(token));
  const unsubscribeToken = messaging().onTokenRefresh((token) => Clomni.setDeviceToken(token));
  // Messages while the app is open.
  const unsubscribeMessage = messaging().onMessage(async (message) => {
    if (!Clomni.handlePush(message.data ?? {})) {
      // your app's own push
    }
  });
  Clomni.setNotificationIcon('clomni_notification_icon');   // the config plugin's notificationIcon
  return () => { unsubscribeToken(); unsubscribeMessage(); };
}, []);

    Adi tətbiqdə AndroidManifest.xml-də <uses-permission android:name="android.permission.POST_NOTIFICATIONS" /> elan edin, ağ ikonu android/app/src/main/res/drawable/-a qoyun və adını setNotificationIcon-a verin.

  8. 8

    Push: iOS

    Clomni iOS push-larını Firebase-dən keçirmədən birbaşa APNs-ə göndərir. Firebase kitabxanası yalnız FCM mesajlarını bildirir, Clomni bildirişinə toxunuşu görmür. Ona görə toxunuşu native kodda tutun:

    1. Xcode-da Push Notifications capability-sini əlavə edin.
    2. ios/Podfile-a yuxarıdakı pod 'ClomniMessenger' sətrini yazın və pod install işlədin.
    3. Bu faylı tətbiq hədəfinə əlavə edin:
    // ios/<YourApp>/ClomniNotifications.swift
import ClomniMessenger
import UserNotifications

/// Clomni pushes: hidden while the Messenger is open, and a tap opens the conversation.
@objc(ClomniNotifications)
final class ClomniNotifications: NSObject, UNUserNotificationCenterDelegate {
    @objc static let shared = ClomniNotifications()

    func userNotificationCenter(
        _ center: UNUserNotificationCenter,
        willPresent notification: UNNotification,
        withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void
    ) {
        let show = Clomni.shouldShowForeground(notification.request.content.userInfo)
        completionHandler(show ? [.banner, .list, .sound] : [])
    }

    func userNotificationCenter(
        _ center: UNUserNotificationCenter,
        didReceive response: UNNotificationResponse,
        withCompletionHandler completionHandler: @escaping () -> Void
    ) {
        _ = Clomni.handlePush(response.notification.request.content.userInfo)
        completionHandler()
    }
}
    1. application(_:didFinishLaunchingWithOptions:) içində, metod qayıtmazdan əvvəl onu delegate edin:
    // AppDelegate.swift
UNUserNotificationCenter.current().delegate = ClomniNotifications.shared
    // AppDelegate.mm, when the app delegate is Objective-C
#import "YourApp-Swift.h"
#import <UserNotifications/UserNotifications.h>

[UNUserNotificationCenter currentNotificationCenter].delegate = ClomniNotifications.shared;

    React Native Firebase sonra delegate-i öz üzərinə götürür və özünə aid olmayan push-ları bu delegate-ə ötürür, sizin FCM push-larınız işləməyə davam edir.

    1. APNs tokenini JavaScript-dən verin:
    if (Platform.OS === 'ios') {
  await messaging().requestPermission();
  const apnsToken = await messaging().getAPNSToken();   // hex
  if (apnsToken) Clomni.setDeviceToken(apnsToken);
}

    iOS-da Firebase yoxdursa, tokeni native kodda verin: didRegisterForRemoteNotificationsWithDeviceToken içində Clomni.setDeviceToken(deviceToken). Expo-da ios qovluğunu prebuild yaradır: 3-cü və 4-cü addımları öz kiçik config plugin-inizdə saxlayın (withAppDelegate, withXcodeProject), ya da ios qovluğunu repozitoriyada saxlayın.

  9. 9

    Problemlər

    • «The package doesn't seem to be linked» və ya native modul tapılmır: tətbiqi yenidən build edin, Expo-da development build işlədin.
    • iOS-da ClomniMessenger simvolları üzrə link xətası: Podfile-a pod 'ClomniMessenger' sətri və pod install.
    • Android-də tətbiq bağlı olanda bildiriş gəlmir: setBackgroundMessageHandler index.js-də, komponentlərdən kənarda olmalıdır.
    • iOS-da Clomni bildirişinə toxunanda yalnız tətbiq açılır: native delegate (3-cü və 4-cü addımlar) yoxdur və ya gec təyin olunur.
    • Üzən düymə tətbiqin soyuq açılışında görünmür. Səbəb: SDK 1.0.1-in xətası, 1.0.2-də düzəlir. O vaxta qədər Messenger-i öz düymənizdən açın.
    • Android: tətbiq ikonla yenidən açılanda açıq Messenger itir. Səbəb: MainActivity singleTask-dır. SDK 1.0.2-də düzəlir.
  10. 10

    Tam təlimat

Sənəd

Clomni Mobile SDK: inteqrasiya təlimatı v1.0.5 · 72 səhifə Aç Endir