Whiteboard - React Native

A whiteboard is a digital canvas that allows users to collaborate in real-time by drawing, writing, and sharing ideas visually, making it ideal for brainstorming, presentations, and teamwork.

Before initiating Whiteboard, it is essential to have a VideoSDK Meeting in progress.

note

This page uses the following async methods. See their reference for the errors each promise can reject with make sure you handle all the rejection based on your usecase:

• startWhiteboard()
• stopWhiteboard()

useWhiteboard Hook

The useWhiteboard hook provides functionality to manage a collaborative whiteboard session in your application.

Usage

import { useWhiteboard } from "@videosdk.live/react-native-sdk";

const { startWhiteboard, stopWhiteboard, whiteboardUrl } = useWhiteboard();

Returns

The hook returns an object with the following properties:

startWhiteboard()

• Type: () => void
• Description: Initiates a whiteboard session for all participants.
• Effect: When called, this method generates a whiteboardUrl.

stopWhiteboard()

• Type: () => void
• Description: Terminates the active whiteboard session for all participants.

whiteboardUrl

• Type: string | null
• Description: URL for the current whiteboard session.
• Value:
  • null when no session is active.
  • A valid URL string after startWhiteboard() has been called.

Embedding the Whiteboard

Display the whiteboard using an iframe:

import { WebView } from "react-native-webview";

{
  whiteboardUrl && (
    <WebView source={{ uri: whiteboardUrl }} style={{ flex: 1 }} />
  );
}

Note: To set up react-native-webview, follow the Getting Started Guide.

Example Component

import React from "react";
import { View, TouchableOpacity, Text } from "react-native";
import { WebView } from "react-native-webview";
import { useWhiteboard } from "@videosdk.live/react-native-sdk";

// Custom Button component
const Button = ({ onPress, title }) => {
  return (
    <TouchableOpacity
      onPress={onPress}
      style={{
        backgroundColor: "#1178F8",
        justifyContent: "center",
        alignItems: "center",
        padding: 12,
        borderRadius: 4,
      }}
    >
      <Text style={{ color: "white", fontSize: 14 }}>{title}</Text>
    </TouchableOpacity>
  );
};

function WhiteboardComponent() {
  // Destructure functions and URL from useWhiteboard hook
  const { startWhiteboard, stopWhiteboard, whiteboardUrl } = useWhiteboard();

  return (
    <View style={{ flex: 1 }}>
      {!whiteboardUrl ? (
        // Display Start Whiteboard button when no session is active
        <Button title="Start Whiteboard" onPress={startWhiteboard} />
      ) : (
        // Display Stop Whiteboard button and the WebView when session is active
        <>
          <Button title="Stop Whiteboard" onPress={stopWhiteboard} />
          <WebView source={{ uri: whiteboardUrl }} style={{ flex: 1 }} />
        </>
      )}
    </View>
  );
}

export default WhiteboardComponent;

API Reference

• useWhiteboard hook