Audience Polls during Live Stream - React Native

Interactive polls are a great way to increase engagement during livestreams. Using VideoSDK's PubSub mechanism, you can easily implement real-time audience polling, where viewers can vote and see live results instantly.

This guide walks you through how to create, send, and visualize poll results during a livestream.

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.

• publish()

Step 1: Creating and Publishing a Poll

To initiate a poll, use the usePubSub hook with a POLL topic. The poll structure should include a question and multiple options. This message will be published to all participants.

PollHostView.js

import { usePubSub } from "@videosdk.live/react-native-sdk";
import { TouchableOpacity, Text, StyleSheet } from "react-native";

function PollHostView() {
  const { publish } = usePubSub("POLL");

  const startPoll = async () => {
    const pollData = {
      id: Date.now(),
      question: "Which feature do you love the most?",
      options: ["Reactions", "Screen Share", "Whiteboard", "Polls"],
      responses: {},
    };
    try {
      await publish(JSON.stringify(pollData));
    } catch (err) {
      console.error("publish failed:", err);
    }
  };

  return (
    <TouchableOpacity style={styles.button} onPress={startPoll}>
      <Text style={styles.buttonText}>Start Poll</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: "#007AFF",
    padding: 12,
    borderRadius: 8,
    alignItems: "center",
  },
  buttonText: {
    color: "white",
    fontSize: 16,
    fontWeight: "600",
  },
});

Step 2: Subscribing to Polls and Displaying Options

Participants can listen to the POLL topic and render voting options dynamically based on the incoming data.

import { usePubSub } from "@videosdk.live/react-native-sdk";
import { useState } from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";

function PollAudienceView() {
  const [activePoll, setActivePoll] = useState(null);
  const { publish } = usePubSub("POLL_RESPONSE");

  usePubSub("POLL", {
    onMessageReceived: ({ message }) => {
      setActivePoll(JSON.parse(message));
    },
  });

  const submitVote = async (option) => {
    try {
      await publish(JSON.stringify({ pollId: activePoll.id, option }));
    } catch (err) {
      console.error("publish failed:", err);
    }
  };

  if (!activePoll) return null;

  return (
    <View style={styles.container}>
      <Text style={styles.question}>{activePoll.question}</Text>
      {activePoll.options.map((option, index) => (
        <TouchableOpacity
          key={index}
          style={styles.optionButton}
          onPress={() => submitVote(option)}
        >
          <Text style={styles.optionText}>{option}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  question: {
    fontSize: 18,
    fontWeight: "600",
    marginBottom: 16,
  },
  optionButton: {
    backgroundColor: "#F0F0F0",
    padding: 12,
    borderRadius: 8,
    marginBottom: 8,
  },
  optionText: {
    fontSize: 16,
  },
});

Step 3: Aggregating and Displaying Poll Results

The host can subscribe to the POLL_RESPONSE topic to collect responses and render the result in real-time.

import { usePubSub } from "@videosdk.live/react-native-sdk";
import { useState } from "react";
import { View, Text, StyleSheet, ScrollView } from "react-native";

function PollResultsView() {
  const [results, setResults] = useState({});

  usePubSub("POLL_RESPONSE", {
    onMessageReceived: ({ message }) => {
      const { pollId, option } = JSON.parse(message);
      setResults((prev) => {
        const current = prev[pollId] || {};
        return {
          ...prev,
          [pollId]: {
            ...current,
            [option]: (current[option] || 0) + 1,
          },
        };
      });
    },
  });

  return (
    <ScrollView style={styles.container}>
      {Object.entries(results).map(([pollId, pollResult]) => (
        <View key={pollId} style={styles.pollContainer}>
          <Text style={styles.pollId}>Poll ID: {pollId}</Text>
          {Object.entries(pollResult).map(([option, count]) => (
            <View key={option} style={styles.resultRow}>
              <Text style={styles.optionText}>{option}</Text>
              <Text style={styles.countText}>{count} votes</Text>
            </View>
          ))}
        </View>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  pollContainer: {
    marginBottom: 20,
    backgroundColor: "#F8F8F8",
    padding: 16,
    borderRadius: 8,
  },
  pollId: {
    fontSize: 16,
    fontWeight: "600",
    marginBottom: 12,
  },
  resultRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    paddingVertical: 8,
    borderBottomWidth: 1,
    borderBottomColor: "#E0E0E0",
  },
  optionText: {
    fontSize: 14,
  },
  countText: {
    fontSize: 14,
    fontWeight: "500",
  },
});

API Reference

The API references for all the methods and events utilized in this guide are provided below.

• usePubSub()