iOSCopy Anchor Link

Below you'll find the iOS specific documentation for using the native SDK from React Native and Flutter. Read the cross-platform overview first.

React NativeCopy Anchor Link

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.

DescriptionCopy Anchor Link

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.

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

Native Module exampleCopy Anchor Link

In the example below, an example of how to integrate the Dixa Messenger Mobile SDK for iOS 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 for any potential updates or suggestions for React Native.

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

RCTDixaMessengerModule.h RCTDixaMessengerModule.m

You expose additional functionality by modifying RCTDixaMessengerModule.

Example modulesCopy Anchor Link

Below you can see the content of each of these created modules.

RCTDixaMessengerModule.h

// RCTDixaMessengerModule.h

#import <React/RCTBridgeModule.h>

@interface RCTDixaMessengerModule : NSObject <RCTBridgeModule>
@end

RCTDixaMessengerModule.m

// RCTDixaMessengerModule.m

#import <DixaMessenger/DixaMessenger.h>
#import "RCTDixaMessengerModule.h"
#import <React/RCTUtils.h>
#import <React/RCTLog.h>

@implementation RCTDixaMessengerModule

RCT_EXPORT_MODULE(DixaMessengerModuleIos);

// Overriden to run from main queue
- (dispatch_queue_t)methodQueue
{
  return dispatch_get_main_queue();
}

RCT_EXPORT_METHOD(openMessenger)
{
  UIViewController *controller = RCTPresentedViewController();
  if (controller == nil) {
    RCTLogError(@"Tried to display Dixa Messenger but there is no application window.");
    return;
  }

  [Messenger openMessengerFrom:controller completion:nil];
}

@end

Updating AppDelegate in your iOS appCopy Anchor Link

In order to run the Messenger Configuration and register SDK for push notifications you need to update AppDelegate.m.

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.

logLevel takes 0 (none), 1 (error), 2 (warning) or 3 (all). pushEnvironment takes 0 (production) or 1 (sandbox): use sandbox only in builds you run from Xcode, so TestFlight and App Store builds get their push notifications.

// AppDelegate.m

@implementation AppDelegate

// Part of the code omitted for clarity

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // Part of the code omitted for clarity

#if DEBUG
  [Messenger configureWithMessengerToken: @"<YOUR_DIXA_MESSENGER_TOKEN>" logLevel:3 pushEnvironment:1];
#else
  [Messenger configureWithMessengerToken: @"<YOUR_DIXA_MESSENGER_TOKEN>" logLevel:1 pushEnvironment:0];
#endif

  return YES;
}

- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {
  [Messenger registerForPushNotificationWithDeviceToken:deviceToken];
}

@end

Expose modules in Javascript (or Typescript).Copy Anchor Link

Lastly exposing the module in JavaScript (or TypeScript) is needed. The example below shows this. Please note that the Android module can be omitted if you are only planning to use the Dixa Messenger Mobile SDK for iOS.

import { NativeModules, Platform } from 'react-native';

// Omit Android 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;
    }
  }
}

FlutterCopy Anchor Link

DescriptionCopy Anchor Link

Please follow the official guide on how to create a native module (platform channel). Make sure to reference native platform iOS usage where appropriate.