Android
Below you'll find the Android specific documentation for using the native SDK from React Native and Flutter. Read the cross-platform overview first.
React Native
If you are using a React Native app and you want to implement the Dixa Messenger into it, it might be useful to have a look at our Demo Repository for React Native. This might help get kickstarted into the basic of how to get the Dixa Messenger to function within your app.
See the demo repo for React Native at https://github.com/dixahq/dixa-messenger-react-native-demo
Out of the box, the Dixa Messenger should look something like this. Please note that most customizations should be changed in the Dixa Agent Interface by an Admin. This can be found in Settings > Messenger > (your messenger) > Styling. These changes will automatically be reflected when initializing the Messenger in your App and do not have to be edited programmatically.
Description
The examples below use React Native's legacy Native Modules. For newer React Native versions, see the Turbo Native Modules guide and the demo repository above.
Before you start, add the native SDK to your React Native app's android project and check its requirements (minSdk, compileSdk and desugaring). See Dixa's Android installation documentation.
Native Module example
In the example below, an example of how to integrate the Dixa Messenger Mobile SDK for Android into your React Native app. Code below is provided to be used as one of the potential examples when implementing Native Modules. Please note that this isn't the only way to get started, but a recommended examples. It should not be seen as the only solution.
Make sure to see the React Native official guide.
In this example the following is created to expose Dixa Messenger Android functionalities.
DixaMessengerModule.java
DixaMessengerPackage.java
You expose additional functionality by modifying the DixaMessengerModule class.
Example modules
Below you can see the content of each of these created modules.
DixaMessengerModule.java
// DixaMessengerModule.java
public class DixaMessengerModule extends ReactContextBaseJavaModule {
private final ReactApplicationContext ctx;
DixaMessengerModule(ReactApplicationContext context) {
super(context);
ctx = context;
}
@ReactMethod
public void openMessenger() {
Log.d(this.getClass().getName(), "openMessenger");
DixaMessenger.openMessenger(Objects.requireNonNull(ctx.getCurrentActivity()));
}
@NonNull
@Override
public String getName() {
return "DixaMessengerModuleAndroid";
}
}DixaMessengerPackage.java
// DixaMessengerPackage.java
public class DixaMessengerPackage implements ReactPackage {
@NonNull
@Override
public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new DixaMessengerModule(reactContext));
return modules;
}
@NonNull
@Override
public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}Updating MainApplication in your Android app
In order to run the Messenger Configuration you need to update MainApplication.java.
An example of this is shown below with some omitted code, for clarity. Please note that YOUR_DIXA_MESSENGER_TOKEN should be exchanged with your Messenger token. An admin can find it in the Dixa Dashboard under Settings > Messenger > (your messenger) > Setup.
// MainApplication.java
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost =
new ReactNativeHost(this) {
// Part of the code omitted for clarity
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// Part of the code omitted for clarity
// Add DixaMessengerPackage
packages.add(new DixaMessengerPackage());
return packages;
}
};
@Override
public void onCreate() {
// Part of the code omitted for clarity.
// Note that you might want configure it from JavaScript by providing
// custom arguments. See - https://reactnative.dev/docs/native-modules-android#argument-types
DixaMessenger.Configuration config = new DixaMessenger.Configuration.Builder()
.setApiKey("<YOUR_DIXA_MESSENGER_TOKEN>")
.setLogLevel(LogLevel.ALL)
.build();
// Configure and initiate messenger.
DixaMessenger.init(config, this);
}
}Expose modules in Javascript (or Typescript).
Lastly exposing the module in JavaScript (or TypeScript) is needed. The example below shows this. Please note that the iOS module can be omitted if you are only planning to use the Dixa Messenger Mobile SDK for Android.
import { NativeModules, Platform } from 'react-native';
// Omit iOS module and case if not planning to use.
const { DixaMessengerModuleAndroid, DixaMessengerModuleIos } = NativeModules;
export function openDixaMessenger() {
switch (Platform.OS) {
case 'android': {
DixaMessengerModuleAndroid.openMessenger();
break;
}
case 'ios': {
DixaMessengerModuleIos.openMessenger();
break;
}
default: {
console.error(`Unsupported platform ${Platform.OS}`);
break;
}
}
}Flutter
Description
Please follow the official guide on how to create a native module (platform channel). Make sure to reference native platform Android usage where appropriate.