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.

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 = () => {
    const pollData = {
      id: Date.now(),
      question: "Which feature do you love the most?",
      options: ["Reactions", "Screen Share", "Whiteboard", "Polls"],
      responses: {},
    };
    publish(pollData);
  };

  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(message);
    },
  });

  const submitVote = (option) => {
    publish({ pollId: activePoll.id, option });
  };

  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 } = 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()