Flomni Chat React Native SDK

Flomni Chat SDK для React Native

Установка

npm install flomni-chat-react-native-sdk

yarn add flomni-chat-react-native-sdk

Android

Для корректной работы приложения на Android необходимо дополнительно выполнить следующие действия:

• Установить атрибут android:allowBackup="false" элемента application в файле AndroidManifest.xml либо переоределить значение с помошью аттрибута tools:replace="android:allowBackup"
• Добавить android.enableJetifier=true в gradle.properties
• В файле styles.xml изменить тему приложения на Theme.MaterialComponents.* или Theme.Material3.*

iOS

Для сборки и запуска приложения необходимо установить CocoaPods

cd ios
pod install

Для работы функционала отправки медиа в чате нужно добавить описание использования камеры и библиотеки изображений в файл Info.plist:

	<key>NSPhotoLibraryUsageDescription</key>
	<string>Flomni Chat needs permission to Photo Library for user aviability to pick media to sent in chat.</string>
	<key>NSCameraUsageDescription</key>
	<string>Flomni Chat needs permission to Camera for user aviability to capture media to sent in chat.</string>

Для корректной работы Push Notifications добавить (или включить в настройках проекта):

<key>UIBackgroundModes</key>
<array>
<string>fetch</string>
<string>remote-notification</string>
</array>

Примеры использования

Базовое использование в режиме отображения окна с одним чатом

import { ChatView } from 'flomni-chat-react-native-sdk';
import { StyleSheet, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <ChatView style={styles.chatView} companyId="5d0cd1707741de0009e061cb" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  chatView: {
    flex: 1,
  },
});

Отображение чата для разных пользователей (своя история сообщений, только iOS)

import { ChatView } from 'flomni-chat-react-native-sdk';
import { useState } from 'react';
import { StyleSheet, View } from 'react-native';

export default function App() {
  const [userId] = useState('some-unique-user-id');

  return (
    <View style={styles.container}>
      <ChatView
        style={styles.chatView}
        companyId="5d0cd1707741de0009e061cb"
        userId={userId}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  chatView: {
    flex: 1,
  },
});

Отображение списка чатов (только iOS)

import { ChatView } from 'flomni-chat-react-native-sdk';
import { StyleSheet, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <ChatView
        style={styles.chatView}
        companyId="5d0cd1707741de0009e061cb"
        mode="list"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  chatView: {
    flex: 1,
  },
});

Подписка на пуш-уведомления (только iOS, на Android подключаются автоматически)

import {
  ChatView,
  registerForRemoteNotifications,
} from 'flomni-chat-react-native-sdk';
import { useEffect } from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { getDeviceToken } from 'react-native-device-info';

export default function App() {
  useEffect(() => {
    async function fetchAndRegisterToken() {
      try {
        const deviceToken = await getDeviceToken();
        registerForRemoteNotifications(deviceToken);
      } catch (error) {
        console.error('Failed to register for remote notifications', error);
      }
    }

    fetchAndRegisterToken();
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <ChatView
        style={styles.chatView}
        companyId="5d0cd1707741de0009e061cb"
        contour="develop"
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  chatView: {
    flex: 1,
  },
});

Breaking changes

• Начиная с версии 0.6.0 для подписки на пуш-уведомления на iOS нужно вызвать метод registerForRemoteNotifications, передав APNs-токен
• Начиная с версии 0.2.0 по умолчанию отображается один чат. Для отображения списка чатов (только на iOS) нужно задать prop mode = "list"

API

Метод registerForRemoteNotifications(deviceToken: string)

Позволяет подписаться на пуш-уведомления на iOS. Необходимо передать APNs-токен в качестве параметра функции.

import { registerForRemoteNotifications } from 'flomni-chat-react-native-sdk';

const deviceToken = getDeviceToken(); //...получаем APNs-токен
registerForRemoteNotifications(deviceToken);

Компонент ChatView

Интерфейс Props компонента ChatView позволяет задавать параметры работы и отображения диалогов.

Для корректной работы необходимо указать companyId.

Props

| Название | Тип | Обязательное | Платформа | Описание | | -------------------------------------- | ----------------------- | ------------ | ------------ | ------------------------------------------------------------------------------------------------------------------------------------- | | style | StyleProp<ViewStyle> | Нет | Android, iOS | Стили контейнера (View) контейнера. | | companyId | string | Да | Android, iOS | ID компании. | | appGroup | string | Нет | iOS | Идентификатор группы приложений для локального хранилища. | | contour | develop, production | Нет | Android, iOS | Контур бэкенда, в котором работает приложение. По умолчанию - production | | userId | string | Нет | iOS | Уникальный идентификатор пользователя. Используется для сохранения сессии, истории сообщений и т. д. (По умолчанию равен DeviceID). | | visitorAttributes | string | Нет | Android, iOS | Кастомные атрибуты, относящиеся к пользователю приложения при подключении к чату. | | newChatButtonText | string | Нет | iOS | Надпись на кнопке создания нового чата (работает с mode = "list"). | | newChatDescriptionText | string | Нет | iOS | Текст под кнопкой создания нового чата (работает с mode = "list"). | | mode | single \| list | Нет | iOS | Режим отображения компонента: один чат или список чатов (По умолчанию равен single) | | colors | object | Нет | Android, iOS | Объект переопределяет цвета элементов чата. | | colors.background | string | Нет | Android, iOS | Цвет фона. | | colors.sendButton | string | Нет | Android, iOS | Цвет кнопки оптравки сообщений. | | colors.inputText | string | Нет | Android, iOS | Цвет текста в поле ввода сообщения. | | colors.inputPlaceholder | string | Нет | Androidm iOS | Цвет текста плейсхолдера. | | colors.inboundMessage | string | Нет | Android, iOS | Цвет фона входящих сообщений. | | colors.outboundMessage | string | Нет | Android, iOS | Цвет фона исходящий сообщений. | | colors.inboundMessageText | string | Нет | Android, iOS | Цвет текста входящих сообщений. | | colors.outboundMessageText | string | Нет | Android, iOS | Цвет текста исходящий сообщений. | | colors.messageDate | string | Нет | Android, iOS | Цвет даты сообщения. | | colors.messageAvatar | string | Нет | Android | Цвет аватара. | | colors.actionButtonBackground | string | Нет | Android, iOS | Цвет фона кнопок действий. | | colors.actionButtonText | string | Нет | Android, iOS | Цвет текста кнопок действий. | | colors.actionButtonPressedBackground | string | Нет | Android, iOS | Цвет нажатой кнопки действия. | | colors.actionButtonPressedText | string | Нет | Android, iOS | Цвет текста нажатой кнопкий действия. | | colors.userPressedButtonBackground | string | Нет | Android | Цвет нажатой кнопки действия, которая отображается как ответ пользователя | | colors.userPressedButtonText | string | Нет | Android | Цвет текста нажатой кнопкий действия, которая отображается как ответ пользователя | | colors.rateDialogHeader | string | Нет | Android | Цвет шапки модального окна оценки. | | colors.rateDialogLabel | string | Нет | Android | Цвет надписи модального окна оценки. | | colors.rateDialogRatingBar | string | Нет | Android | Цвет кнопок модального окна оценки. |