Voximplant React Native Kit Chat SDK

The Voximplant React Native Kit Chat SDK allows you to add in-app messaging into your React Native application with a ready-to-go user experience. Explore our documentation and learn how to add an interface into your app, customize colors and strings so that the messaging user interface looks natural. Enhance your user experience with push notifications, customer data, and other features.

Supported languages: English, Spanish, Portuguese, Russian.

Supported React Native Versions

React Native >= 0.74

Getting started

To get started, you need to register a Voximplant Kit account and configure a mobile channel.

• Create and setup a mobile channel - guide.
• Upload push notification certificates - guide.

Install

npm install @voximplant/react-native-kit-chat

or

yarn add @voximplant/react-native-kit-chat

iOS

Add NSCameraUsageDescription and NSPhotoLibraryAddUsageDescription descriptions to your application's Info.plist

<key>NSPhotoLibraryAddUsageDescription</key>
<string>This will let you save photos to the gallery.</string>
<key>NSCameraUsageDescription</key>
<string>This will let you take photos.</string>

These entries allow the app to access the camera and gallery for sending attachments in the chat.

Modify the AppDelegate file to set the rootViewController to the SDK.

RN 0.80 swift example

import react_native_voximplant_kit_chat

func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
  ) -> Bool {
    
    ....
    
    window = UIWindow(frame: UIScreen.main.bounds)
//    Replace the default RN implementation for the rootViewController setup with the code below
//    factory.startReactNative(
//      withModuleName: "YourAppName",
//      in: window,
//      launchOptions: launchOptions
//    )  

    let rootView = factory.rootViewFactory.view(withModuleName: "YourAppName",
                                                initialProperties: nil,
                                                launchOptions: launchOptions)
    let rootViewController = delegate.createRootViewController()
    let navController = UINavigationController(rootViewController: rootViewController)
    navController.setNavigationBarHidden(true, animated: false)
    delegate.setRootView(rootView, toRootViewController: rootViewController)
    window?.rootViewController = navController
    window?.makeKeyAndVisible()
    
    RNVIKitChatImpl.rootViewController = rootViewController
    ....
  }

RN 0.74 Objective-C example

#import "RNVIKitChat.h"

@implementation AppDelegate

// Add these methods
- (UIViewController *)createRootViewController {
  UIViewController *rootViewController = [UIViewController new];
  UINavigationController *navController = [[UINavigationController alloc] initWithRootViewController:rootViewController];
  [navController setNavigationBarHidden:YES animated:NO];
  [RNVIKitChat configureNavigationWithRootViewController:rootViewController];
  return navController;
}

- (void)setRootView:(UIView *)rootView toRootViewController:(UIViewController *)rootViewController {
  UINavigationController *navController = (UINavigationController *)rootViewController;
  navController.topViewController.view = rootView;
}
@end

Usage

Initialization

KitChat is the main class of the SDK that provides access to its functionality. You should initialize it with your mobile channel credentials and the unique customer identifier before opening the chat.

import { KitChat } from '@voximplant/react-native-kit-chat';

let kitChat = new KitChat();
await kitChat.initialize(region, channelUuid, token, clientId);
await kitChat.openChat();

Customization

The SDK offers an API to customize colors, icons, and strings. Customization should be applied before navigating to the chat screen.

Color

Colors customization example

import { KitChat, KitColorScheme } from '@voximplant/react-native-kit-chat';

let colorScheme: KitColorScheme = {
  brand: "#f542a4",
};
let customization: KitCustomization = {
  colorScheme: this.colorScheme
};
let kitChat = new KitChat();
kitChat.applyCustomization(customization);

Icons on iOS

Custom icons should be added to Images.xcassets in the application Xcode project.

Icons customization example on iOS

let senderIconsIos: KitSenderIconsIos = {
  agent: "myAgentIcon",
  bot: "myBotIcon",
};
let iconsIos: KitCustomizableIconsIos = {
  senders: senderIcons,
};
let customization: KitCustomization = {
  customizableIconsIos: iconsIos
};
kitChat.applyCustomization(customization);

Icons on Android

Place the icons specified below into the application's drawable resources (<project_dir>/android/app/src/main/res/drawable).

This will override the default icons provided by the SDK during the app build.

Key	Description
ic_kit_action_back_s.xml	Icon that represents the action to go back on the navigation bar
ic_kit_action_close_s.xml	Icon that represents the action to close the selection mode on the navigation bar
ic_kit_action_copy_s.xml	Icon that represents the action to copy text in a message
ic_kit_action_save_s.xml	Icon that represents the action to save an attachment file
ic_kit_add_attachments_s.xml	Icon that represents the action to add attachments to an outbound message
ic_kit_attachment_download_s.xml	Icon that represents the action to download an attachment
ic_kit_attachment_preview_document_s.xml	Icon that represents a placeholder for a document attachment in a message
ic_kit_attachment_preview_media_s.xml	Icon that represents a placeholder for a media attachment in a message
ic_kit_avatar_agent_xs.xml	Icon that represents the agent’s default avatar
ic_kit_avatar_bot_xs.xml	Icon that represents the bot’s default avatar
ic_kit_chat_notification_message.xml	Icon that represents a new message in a notification
ic_kit_chat_notification_upload.xml	Icon that represents the upload in notification
ic_kit_error_xxs.xml	Icon that represents the outbound message error state
ic_kit_picker_camera_s.xml	Icon that represents the action to the open camera
ic_kit_picker_file_s.xml	Icon that represents the action to open the document picker
ic_kit_picker_media_s.xml	Icon that represents the action to open the media picker
ic_kit_remove_s.xml	Icon that represents the action to remove an attached file in an outbound message
ic_kit_scroll_down_s.xml	Icon that represents the action to scroll the page to the latest messages
ic_kit_send_message_s.xml	Icon that represents the action to send a message
ic_kit_success_xxs.xml	Icon to highlight success states
ic_kit_warning_s.xml	Icon that represents the attachment error state

Strings on iOS

let stringsIos: KitCustomizableStringsIos = {
  chatTitle: "Chat",
};
let customization: KitCustomization = {
  customizableStringsIos: stringsIos
};
kitChat.applyCustomization(customization);

Strings on Android

Override the strings in the application resources (<project_dir>/android/app/src/main/res/values) with specified names.

Key	Description
kit_attachments_pick_file	Localized strings configuration for the document picker action
kit_attachments_pick_media	Localized strings configuration for the media picker action
kit_attachments_take_photo	Localized strings configuration for the camera picker action
kit_chat_title	Localized string that represents the chat title
kit_connection_state_connecting	Localized string for the connecting state
kit_connection_state_offline	Localized string for the offline state
kit_connection_state_online	Localized string for the online state
kit_copied	Localized string for the notice that text has been copied
kit_error_file_action_access	Localized string for the file access error action
kit_error_file_action_open	Localized string for the file open error action
kit_error_file_action_save	Localized string for the file save error action
kit_error_file_limit	Localized string for the notice that the file attachments limit for an outbound message has been exceeded
kit_error_send_message_invalid_files	Localized string for invalid files in an outbound message
kit_error_validation_file_invalid	Localized string for an invalid file
kit_error_validation_file_invalid_extension	Localized string for an invalid file extension
kit_error_validation_file_invalid_size	Localized string for an invalid file size
kit_error_validation_files_invalid	Localized string for invalid files
kit_file_saved	Localized string indicating that a file has been saved
kit_file_saved_to_downloads	Localized string indicating that a file has been saved to the Downloads directory
kit_notification_channel_chat_description	Localized string that represents the chat notification channel description
kit_notification_channel_chat_name	Localized string that represents the chat notification channel name
kit_notification_channel_upload_description	Localized string that represents the upload notification channel description
kit_notification_channel_upload_name	Localized string that represents the upload notification channel name
kit_notification_new_message_content_text	Localized string that represents the description text for a new inbound message
kit_notification_new_message_title	Localized string that represents the title text for a new inbound message
kit_placeholder_message	Localized string that represents placeholder text for an outbound message
kit_sender_display_name_agent_unnamed	Localized string for the agent’s default display name
kit_sender_display_name_bot	Localized string for the agent’s default display name
kit_unit_bytes	Localized string for the bytes unit
kit_unit_kilobytes	Localized string for the kilobytes unit
kit_unit_megabytes	Localized string for the megabytes unit
kit_notification_upload_progress_title	Localized plural string for the upload progress title in a notification

License

Apache 2.0