Android

Foreword

Dixa's Native Mobile SDKs for iOS and Android can be used with React Native and Flutter, or even another wrapper. The following explains how using the Native Mobile SDKs can be used with these platforms.

Note that Android and iOS Messenger SDKs are intended to be used natively. Any issue you may have while using a React Native/Flutter (or other wrapper), would be encouraged to have reproduced in a native app - but feel free to reach out to Dixa for any guidance or assistance on this.

Below you'll find the Android specific documentation.

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 > Edit appearance & setup. These changes will automatically be reflected when initializing the Messenger in your App and do not have to be editted programatically.

Description

At the time of writing, React Native 0.70 was utilised, in case if using a later version, make sure to align with React Native documentation.

And make sure to install native dependency before proceeding. Please see Dixa's Android installation documentation for more details.

• Make sure to add native SDK as a dependency, align minSdkVersion with SDK and potentially include desugar support. See Overview for details.
• Adjust compileSdkVersion , targetSdkVersion and buildToolsVersion if necessary in build.gradle . At least 31 is required at the moment.
• Make sure to update com.android.tools.build:gradle in project build.gradle (not module) file. This is especially important in case if you're seeing Unsupported class file major version 60 error when trying to build. As an example:

// build.gradle

 dependencies {
    classpath("com.android.tools.build:gradle:7.1.2")
    // Other application dependencies
}

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 React Native official guide.

In this example the following is created to expose Dixa Messenger iOS functionalities.

DixaMessengerModule.java DixaMessengerPackage.java

You expose additional functionality by modyfing 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 AppDelegate in your iOS 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 node that YOUR_DIXA_MESSENGER_TOKEN should be exchanged with your actual Dixa Messenger token. An Admin of your Dixa Agent Interface will be able to find that in Settings > Messenger > Edit Appearance & Setup > Setup. There the messenger token should be visible.

// 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 node that the Android 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.