React Native UI Kit — Customization

All UI Kit customization is done through the setting prop you pass to EnxVideoView. The setting array has two main keys: enxRequiredEventOption controls which toolbar buttons are shown, and participantOption controls which action buttons appear in the participant list. Omit any key to hide that feature from the UI entirely.

The enxRequiredEventOption array is a list of feature flag objects. Each object has a key for the feature name and a boolean value — set it to true to enable that toolbar button, or omit it entirely to hide it. The order of entries does not affect the toolbar layout; the kit renders buttons in its own defined order.

setting: [
  enxRequiredEventOption: [
    { AUDIO: true },           // Mute/unmute self audio
    { VIDEO: true },           // Mute/unmute self video
    { SWITCH_CAMERA: true },   // Switch front/rear camera
    { SWITCH_AUDIO: true },    // Switch active audio device
    { GROUP_CHAT: true },      // Open group chat panel
    { DISCONNECT: true },      // Leave call button
    { MUTE_ROOM: true },       // Moderator: mute all participants
    { RECORDING: true },       // Moderator: start/stop recording
    { SCREEN_SHARE: true },    // Screen sharing
    { ANNOTATION: true },      // Annotation drawing tools
    { LOBBY: true },           // Lobby / waiting room control
    { REQUEST: true },         // Floor access request (Lecture mode)
    { ROOM_SETTING: true },    // Room settings panel
    { POLLING: true },         // Polling feature
    { QNA: true },             // Q&A feature
    {
      CUSTOM_BUTTON: true,
      imagePath: require('./assets/my_button.png')
      // imagePath sets the icon for your custom toolbar button
    }
  ]
]

The participantOption array controls which action buttons appear next to each participant's entry in the participant list panel. These are direct controls — a moderator can mute or disconnect a participant with a single tap from this list.

setting: [
  participantOption: [
    { VIDEO: true },       // Hard stop participant's video feed
    { AUDIO: false },      // Hard mute participant's audio (set false to hide)
    { CHAT: true },        // Open a private chat thread with this participant
    { DISCONNECT: true },  // Force disconnect this participant from the room
  ]
]

The following example shows a fully configured setting array with all available options enabled. Use this as a starting point and remove any entries you do not need:

setting: [
  enxRequiredEventOption: [
    { AUDIO: true },
    { VIDEO: true },
    { SWITCH_CAMERA: true },
    { SWITCH_AUDIO: true },
    { GROUP_CHAT: true },
    { DISCONNECT: true },
    { MUTE_ROOM: true },
    { RECORDING: true },
    { SCREEN_SHARE: true },
    { ANNOTATION: true },
    { LOBBY: true },
    { REQUEST: true },
    { ROOM_SETTING: true },
    { POLLING: true },
    { QNA: true },
    {
      CUSTOM_BUTTON: true,
      imagePath: require('./assets/recording_on.png')
    }
  ],
  participantOption: [
    { VIDEO: true },
    { AUDIO: false },
    { CHAT: true },
    { DISCONNECT: true }
  ]
]

The onPageSlide callback on EnxVideoView fires every time an in-call panel opens or closes. Use it to track UI state — for example, to pause a background sync when the polling panel is open, or to log analytics for feature usage.

pageName is a string identifying the panel (e.g. "chat", "polling", "qna", "screenShare"). isShow is true when the panel opened and false when it closed.

onPageSlide = (pageName, isShow) => {
  console.log(pageName + ' page slide: ' + isShow);
  // Example: pageName = "chat", isShow = true (chat panel just opened)
}

When another participant sends a custom payload using the user data feature, the onUserDataReceived callback fires on your end. This is a real-time side channel you can use to build collaborative features that run alongside the video session — for example, syncing a shared document or triggering a branded animation.

onUserDataReceived = (data) => {
  console.log('User data received:', JSON.stringify(data));
  // Process the payload and update your app state accordingly
}