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.

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