This document describes how to customize components of Channel React Native SDK.

Channel button

Position of Channel button

Change the position of the Channel button using channelButtonOption. Pass the value to the boot.

let settings = {
  "pluginKey": YOUR_PLUGIN_KEY,
  "channelButtonOption": {
    "xMargin": 16,
    "yMargin": 16,
    "position": POSITION,  // 'left', 'right'
  }
}

ChannelIO.boot(settings).then((result) => {
  //boot completed
})

Custom Channel button

To change the appearance of the Channel button, create a custom view:

1. To prevent the default Channel button from being shown, call ChannelIO.hideChannelButton().
2. Place your button view on a preferred position and call ChannelIO.showMessenger() when a user clicks the view.

Display unread alerts

Custom Channel button does not show unread alert counts. Use onBadgeChanged listener to get notified when an alert count changes and show the number to the user.

ChannelIO.onBadgeChanged((count) => {
  //do something with count
});

In-app Popup

1. Receive in-app popup data

Use onPopupDataReceived to receive popup data. See PopupData for details.

ChannelIO.onPopupDataReceived((popupData) => { });

2. Custom in-app popup appearance

To change the appearance of an in-app popup, you should create a custom view.

1. The default in-app popup should not be shown. Set BootConfig#hidePopup to true.
2. boot with the BootConfig configured.
3. Use onPopupDataReceived to show a popup with appropriate data and timing.

Event tracking

To track the action of a user, call track. For example, the following snippet tracks when a user checks out from your service.

ChannelIO.track(
  "CheckOut", 
  {
    "sampleID": 1234,
    "userName": "Jason" 
  }
);