# 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](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.

![React Native Android](https://user-images.githubusercontent.com/6588469/207170587-7e008648-6752-4be6-b117-458ba7b33522.png)

### 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](https://reactnative.dev/docs/native-modules-android).

And make sure to install native dependency before proceeding. Please see [Dixa's Android installation documentation](/docs/dixamessenger/android/overview#installation) for more details.

- Make sure to add native SDK as a dependency, align `minSdkVersion` with SDK and potentially include desugar support. See [Overview](/docs/dixamessenger/cross-platforms/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:



```groovy
// 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](https://reactnative.dev/docs/native-modules-android).

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`


```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`


```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.


```java
// 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.


```typescript
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](https://docs.flutter.dev/development/platform-integration/platform-channels) on how to create a native module (platform channel). Make sure to reference native platform [Android usage](/docs/dixamessenger/android/usage) where appropriate.