Whiteboard - React Native

A whiteboard is a digital canvas that allows users to collaborate in real-time by drawing, writing, and sharing ideas visually.

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

note

This page uses the following asynchronous methods. Refer to their API reference for the errors each Promise may reject with, and handle these rejections appropriately based on your use case.

• 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: () => Promise<void>
• Description: Initiates a whiteboard session for all participants.
• Effect: Once the whiteboard starts, whiteboardUrl holds its URL.

stopWhiteboard()

• Type: () => Promise<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 once the whiteboard has started.

Embedding the Whiteboard

Display the whiteboard using a WebView:

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();

  const handleStartWhiteboard = async () => {
    try {
      await startWhiteboard();
    } catch (err) {
      console.error("startWhiteboard failed:", err);
    }
  };

  const handleStopWhiteboard = async () => {
    try {
      await stopWhiteboard();
    } catch (err) {
      console.error("stopWhiteboard failed:", err);
    }
  };

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

export default WhiteboardComponent;

API Reference

• useWhiteboard hook