@netomi.com/netomi-chat-react-native

A React Native wrapper for the Netomi Mobile Chat SDK, enabling seamless integration of Netomi’s AI Chat Interface into Android and iOS applications

Installation

npm install @netomi.com/netomi-chat-react-native

Usage

import {
  initialize,
  launch,
  launchWithQuery,
  setPushToken,
  updateHeaderConfiguration,
  updateChatWindowConfiguration,
  updateBubbleConfiguration,
  updateBotConfiguration,
  updateUserConfiguration,
  updateFooterConfiguration,
  updateOtherConfiguration,
  updateApiHeaderConfiguration,
  sendCustomParameter,
} from '@netomi.com/netomi-chat-react-native';

// Initialize (e.g., App.tsx)
initialize('botRefId', 'qa'); // env: 'us' | 'sg' | 'eu' | 'qa' | 'qaint' | 'dev' (example)

launch(null | 'your-jwt-token');

launchWithQuery(null | 'searchQuery', null | 'your-jwt-token');

setPushToken('your-push-token');

updateHeaderConfiguration({
  backgroundColor: '#123456',
  gradientColors: ['#FF0000', '#00FF00'],
  isGradientApplied: true,
  iconBackgroundColor: '#CCCCCC',
  isBackPressPopupEnabled: false,
  tintColor: '#FFFFFF',
});

updateChatWindowConfiguration({
  chatWindowBackgroundColor: '#000000',
});

updateBubbleConfiguration({
  borderRadius: 100,
  timeStampColor: '#000000',
});

updateBotConfiguration({
  backgroundColor: '#F1F1F1',
  botImage: 'https://example.com/bot.png',
  textColor: '#000000',
  quickReplyBackgroundColor: '#E0E0E0',
  quickReplyBorderColor: '#CCCCCC',
  quickReplyTextColor: '#333333',
});

updateUserConfiguration({
  backgroundColor: '#D1ECF1',
  textColor: '#0C5460',
});

updateFooterConfiguration({
  backgroundColor: '#FFFFFF',
  inputBoxBackgroundColor: '#F0F0F0',
  inputBoxTextColor: '#000000',
  isFooterHidden: false,
  isNetomiBrandingEnabled: true,
  netomiBrandingText: 'Powered by Netomi',
  netomiBrandingTextColor: '#888888',
  tintColor: '#00AEEF',
});

updateOtherConfiguration({
  titleColor: '#000000',
  descriptionColor: '#666666',
  backgroundColor: '#F9F9F9',
  downloadTranscriptColor: '#0000ff',
  confirmButtonTextColor: '#000000',
  disabledButtonTextColor: '#333333'
});

updateApiHeaderConfiguration({
  sdkVersion: '1.0.0',
});

sendCustomParameter('name', 'value');

ProGuard Configuration

If you are using ProGuard or R8 in your React Native Android project, make sure to include the following rules in your proguard-rules.pro file to prevent essential classes from being obfuscated or removed. These rules ensure proper functioning of React Native, Netomi Chat SDK, Retrofit, Kotlin coroutines, and MQTT logging.

React Native core

-keep class com.facebook.react.** { ; } -keep class com.facebook.hermes.* { *; }

Required for SSL/Conscrypt compatibility

-keep class org.conscrypt.** { ; } -dontwarn org.conscrypt.*

Netomi Chat SDK

-keep class com.netomi.** { ; } -keep class com.netomichat.* { *; }

Retrofit and Kotlin coroutines

-keep,allowobfuscation,allowshrinking class retrofit2.Response -keep,allowobfuscation,allowshrinking class kotlin.coroutines.Continuation

MQTT Logging used by AWS

-keepclassmembers class org.eclipse.paho.client.mqttv3.logging.** { *; }

Gson serialization/deserialization

-keepnames class * { @com.google.gson.annotations.SerializedName ; }

Why this is needed:

1. Netomi SDK classes must be preserved to ensure chat functionality and SDK integration.
2. Retrofit and Kotlin coroutine rules allow async API communication without breaking due to class shrinking or obfuscation.
3. Gson rules ensure JSON serialization and deserialization work correctly using annotations.
4. MQTT logging is required for debug and diagnostic messages related to chat services.

Add this to your android/app/proguard-rules.pro file if ProGuard or R8 is enabled.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT