rte-controller-react-native

RTE UI controller is a module to be used in the UI resource itself to facilitate the integration with RTE world.

How to Use?

Install

cd path/to/your project
npm i @agora-rte/rte-controller-react-native --save-dev

Use

Create RteContext instance

import { createDefaultRteContext } from "@agora-rte/rte-controller-base";

// We need to init RteContext before rendering any widget.
const rteContext = await createDefaultRteContext({
  uri: "http://192.168.0.104:8001/",
  graph_id: "0",
  extension_group: "default_ui_gateway_extension_ts_group",
  extension: "default_ui_gateway_extension_ts",
});

Use with RTE layout template

import { RteLayoutComp } from "@agora-rte/rte-controller-react-native";

return (
  <RteLayoutComp rteContext={rteContext} />
);

Use with your own layouts

import {
  RteLayoutRenderOptions,
  ExtensionContainer,
} from "@agora-rte/rte-controller-react-native";

return (
  <View
    style={{
      width: "200px",
    }}
  >
    <ExtensionContainer
      extension="default_ui_extension_ts"
      rteContext={rteContext}
      options={options}
    />
  </View>
);

You can use widgetProps in ExtensionContainer to define any props, which will be passed to the widget component directly.

Customize the timing of receiving message

By default, rte-controller will start to receive message when all the widgets are mounted.

You can customize with setWidgetMountedListener() in RteContext. For example:

import {
  RteContext,
  RteUiWidgetInfo,
} from '@agora-rte/rte-controller';

rteContext.setWidgetMountedListener(
  (
    rteContext: RteContext,
    widget: RteUiWidgetInfo,
    error?: Error,
  ): void => {
    console.log(
      `The widget is ready, ${JSON.stringify(widget)}, error: ${error}`,
    );

    // Calling 'readyToReceiveExtensionMessage()' to open the message channel between the App and RTE Extension, and will receive events from RTE Extension if any.
    setTimeout(() => {
      rteContext.readyToReceiveExtensionMessage();
    }, 5000);
  },
);

Keep in mind that you have to call readyToReceiveExtensionMessage() yourself when the App is ready to receive messages from RTE Extension.

Subscribe events

You can subscribe event from RTE Extension like the UI Widget with subscribeEvent() in RteContext. For example:

rteContext.subscribeEvent({
  extension: 'default_ui_extension_ts',
  handler: (msg: RteUiWidgetMsg) => {
    console.log(
      `Receive message from default_ui_extension_ts: ${JSON.stringify(
        msg,
      )}`,
    );
  },
});

The extension and type are used to filter the events, you have to specify at least one. And of course, you can specify both of them.

And you can use unsubscribeEvent() to cancel the subscription.