WherebyEmbed

The WherebyEmbed renders a react-native-webview, with some added custom Whereby properties. It accepts a room property, various attributes, event listeners and commands, as well as all other WebView props.

<WherebyEmbed
    // Room URL. (required)
    room={"https://subdomain.whereby.com/your_room"}
    // Removes some UI elements. Useful for small screens. (optional)
    minimal
    // Skips the media permission prompt. (optional)
    skipMediaPermissionPrompt
    // Catch-all for any Whereby event (optional)
    onWherebyMessage={(event) => {
        console.log(event);
    }}
    // Specific callbacks for each Whereby event (optional)
    onReady={() => {
        console.log("ready");
    }}
/>

Attributes

The WherebyEmbed component accepts attributes that you can use to customize the room and user experience. Every one of these attributes can be passed in as props.

Attributes that accept on/off values in the list must be used as normal boolean props in the react-native-sdk.

Attributes of the component

Event listeners

These are optional props, that will trigger the callback on the corresponding event.

Property	Parameters	Description
onWherebyMessage	(data: WherebyEvent) => void	Catch-all listener, that triggers on all the below events.
onReady	() => void	Basic dependencies have loaded and the room is ready to be used
onKnock	() => void	The local user knocks to get into the room
onParticipantUpdate	({ count: number }) => void	A new participant join/leave
onJoin	() => void	The local user joins
onLeave	({ removed: boolean }) => void	The local user leaves
onParticipantJoin	{ participant: { metadata: string | null; externalId: string | null } }) => void	A new participant joins the room
onParticipantLeave	{ participant: { metadata: string | null; externalId: string | null } }) => void	A participant leaves the room
onMeetingEnd	() => void	A host has ended the meeting via "end meeting for all"
onMicrophoneToggle	({ enabled: boolean }) => void	The local user toggles the microphone
onCameraToggle	({ enabled: boolean }) => void	The local user toggles the camera
onChatToggle	({ open: boolean }) => void	The local user toggles the chat
onPeopleToggle	({ open: boolean }) => void	The local user toggles the people pane
onPipToggle	({ open: boolean }) => void	The local user toggles Picture-in-Picture mode
onGrantDevicePermission	({ granted: boolean }) => void	The local user grants permission to camera and microphone in the pre-call screen
onDenyDevicePermission	({ denied: boolean }) => void	The local user denies permission to camera and microphone in the pre-call screen
onScreenshareToggle	({ enabled: boolean }) => void	The local user toggles the screenshare
onStreamingStatusChange	({ status: string }) => void	Streaming status changes. Possible values: " | requested | starting | streaming | stopping | stopped"
onConnectionStatusChange	({ status: string }) => void	User connection status changes. Possible values: "stable | unstable"
onPrecallCheckSkipped	() => void	The local user skipped the presented pre-call check steps
onPrecallCheckCompleted	(status: String, steps: { camera: { status: String; }, speaker: { status: String; }, microphone: { status: String; }, bandwidth: { status: String; }, } }) => void	The local user completed the presented pre-call check steps. Possible values for all status properties: "passed | failed".

Commands

Commands can be triggered by assigning a React.useRef to the WherebyEmbed component. Then use that to call the specific function:

const wherebyRoomRef = React.useRef<WherebyWebView>(null);

// Call this from a button in your app, for example.
wherebyRoomRef.current.endMeeting()

Full list of available commands:

Sending commands