React Native UI Kit — Implementation

With the package installed and permissions configured, rendering a full video call in your React Native app is straightforward: import EnxVideoView, pass a token and settings object, and register callbacks for session lifecycle events. The kit takes care of rendering the complete call UI — toolbar, video tiles, chat, polling, and all configured panels.

Import

At the top of the screen file where you want to render the call:

import { EnxVideoView } from 'enx-uikit-react-native';

Render EnxVideoView

EnxVideoView accepts a token, an optional Low Code embed URL, a settings configuration array, and callback props. Place it inside your JSX wherever the call screen should appear — it is designed to fill its container:

<EnxVideoView
  token={tokenObj}
  embedUrl={this.state.embedUrl}
  setting={this.state.setting}
  customButtonHandler={this.customButtonHandler}
  onDisconnect={this.onDisconnect}
  connectError={this.connectError}
  onPageSlide={this.onPageSlide}
  onUserDataReceived={this.onUserDataReceived}
/>

Props Reference

Prop	Description
`token`	Required. The room token obtained from your app server. Without a valid token the component cannot connect.
`embedUrl`	Optional. A Low Code Embed URL from the EnableX Visual Builder. When provided, the kit imports room configuration — layout, feature flags, branding — from the portal instead of using local settings.
`setting`	Feature configuration array. Controls which toolbar buttons appear and how the participant list behaves. See Customization.
`onDisconnect`	Callback fired when the local participant disconnects from the session, whether by choice or by a moderator action.
`connectError`	Callback fired when the connection to the EnableX room fails. Receives an error details object.
`customButtonHandler`	Handles tap events for any custom toolbar button defined in the `setting` array's `CUSTOM_BUTTON` entry.
`onPageSlide`	Fires when an in-call panel opens or closes. Receives the panel name and a boolean (`true` = opened, `false` = closed).
`onUserDataReceived`	Fires when another participant sends a custom user data payload to the room.

Callback Implementations

Implement each callback as a class method or arrow function. These are the key integration points where your app reacts to session lifecycle events.

onDisconnect

Fires when the local participant leaves the session. This is where you should navigate away from the call screen and release any held resources. The data object contains the disconnect reason.

onDisconnect = (data) => {
  console.log('Disconnected:', data);
  // Navigate back to home screen or show a call-ended screen
  this.props.navigation.navigate('Home');
}

connectError

Fires when EnxVideoView cannot connect to the room. This can happen due to an invalid or expired token, network issues, or a room that has already ended. Log the error and present a user-friendly retry option.

connectError = (data) => {
  console.log('Connection error:', data);
  // Show an error message and offer a retry or exit option
}

onPageSlide

Fires whenever an in-call panel opens or closes — chat, polling, Q&A, screen share, and others. Use pageName to identify which panel changed and isShow to determine its new visibility state.

onPageSlide = (pageName, isShow) => {
  console.log(pageName + ' panel ' + (isShow ? 'opened' : 'closed'));
}

onUserDataReceived

Fires when another participant sends a custom data payload using the sendUserData capability. Use this to build collaborative features that run alongside the call — for example, syncing a shared state or triggering a custom UI action.

onUserDataReceived = (data) => {
  console.log('User data received:', data);
}

customButtonHandler

Fires when the user taps a custom toolbar button defined in your setting configuration. Use this to trigger app-specific actions directly from the call toolbar.

customButtonHandler = (event) => {
  console.log('Custom button tapped:', event);
  // Handle your custom action here
}

← Installation Customization →