Reactions during Live Stream - React Native

To enhance interaction between viewers and speakers during a livestream, a creative approach is to display viewers' reactions to everyone. This can be achieved by creating a lively atmosphere with flying emojis, similar to the experience seen in livestreams on platforms like Instagram.

This guide explains how to implement this engaging feature using the VideoSDK PubSub mechanism.

Step 1: Creating a button to send reaction

To implement this functionality, start by creating a button that sends reactions to all users. When this button is clicked, publish a message with the emoji name to all participants using the VideoSDK PubSub mechanism. Additionally, use React Native's EventEmitter to notify the local participant about the reaction.

ILSView.js

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

const eventEmitter = new EventEmitter();

function ILSView() {
  const { publish } = usePubSub("REACTION");
  
  function sendEmoji(emoji) {
    // Emit event here so the local user can see their own emoji
    eventEmitter.emit("reaction_added", { emoji });
  }
  
  return (
    <View>
      <TouchableOpacity
        onPress={() => {
          sendEmoji("confetti");
          publish("confetti");
        }}
      >
        <Text>Send 🎉 Reaction</Text>
      </TouchableOpacity>

      <TouchableOpacity
        onPress={() => {
          sendEmoji("clap");
          publish("clap");
        }}
      >
        <Text>Send 👏 Reaction</Text>
      </TouchableOpacity>
    </View>
  );
}

Step 2: Displaying the Reactions to all the users

FlyingEmojiOverlay.js will be utilized to display the reactions on the screen. Listen to the event emitter sent on the button click to show the flying emoji and display all reactions sent by other participants.

• Listening to local event and adding the FlyingEmojiOverlay component to the ILSView:

ILSView.js

function ILSView(){
  return (
    <View style={{ flex: 1 }}>
      <FlyingEmojiOverlay/>
      {/* Other components */}
    </View>
  );
}

FlyingEmojiOverlay.js

import { View, Animated, StyleSheet } from "react-native";
import { useRef, useEffect, useCallback } from "react";
import { usePubSub } from "@videosdk.live/react-native-sdk";

const EMOJI_MAP = {
  confetti: "🎉",
  clap: "👏",
};

const FlyingEmojisOverlay = () => {
  const emojis = useRef([]);
  
  // Listen to events to show local user emojis and send the emoji to all participants on the call
  useEffect(() => {
    function handleSendFlyingEmoji({ emoji }) {
      if (emoji) {
        pubsubDataRef.current.publish(emoji);
      }
    }

    eventEmitter.addListener("reaction_added", handleSendFlyingEmoji);
    return () => {
      eventEmitter.removeListener("reaction_added", handleSendFlyingEmoji);
    };
  }, []);

  // Handler to display the emoji and start its animations
  const handleDisplayFlyingEmoji = useCallback((emoji) => {
    const newEmoji = {
      id: Date.now(),
      emoji: EMOJI_MAP[emoji],
      position: new Animated.Value(0),
      left: Math.random() * 100,
      rotation: -30 + Math.random() * 60,
    };

    emojis.current.push(newEmoji);

    Animated.timing(newEmoji.position, {
      toValue: 1,
      duration: 3000,
      useNativeDriver: true,
    }).start(() => {
      emojis.current = emojis.current.filter(e => e.id !== newEmoji.id);
    });
  }, []);

  // Subscribing to the PubSub topic REACTION to receive other participants reactions
  const pubsubData = usePubSub("REACTION", {
    onMessageReceived: ({ message }) => {
      handleDisplayFlyingEmoji(message);
    },
  });

  const pubsubDataRef = useRef(pubsubData);

  useEffect(() => {
    pubsubDataRef.current = pubsubData;
  }, [pubsubData]);

  return (
    <View style={styles.container}>
      {emojis.current.map((emoji) => (
        <Animated.Text
          key={emoji.id}
          style={[
            styles.emoji,
            {
              transform: [
                { translateY: emoji.position.interpolate({
                    inputRange: [0, 1],
                    outputRange: [0, -500]
                  })
                },
                { rotate: `${emoji.rotation}deg` }
              ],
              left: `${emoji.left}%`,
            },
          ]}
        >
          {emoji.emoji}
        </Animated.Text>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    pointerEvents: 'none',
  },
  emoji: {
    position: 'absolute',
    bottom: 0,
    fontSize: 48,
    width: 48,
    height: 48,
  },
});

export default FlyingEmojisOverlay;

API Reference

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

• usePubSub()