Sending Virtual Gifts - React Native

Virtual gifting is a powerful monetization and engagement feature that allows viewers to support hosts or speakers during a livestream by sending them digital tokens or "gifts." These gifts can be visually animated and even linked to leaderboards or reward systems.

This guide explains how to implement a secure and real-time virtual gifting experience using your backend server in combination with VideoSDK PubSub.

How It Works

1. User Action: A viewer taps on a gift button to send a virtual gift to the host.

2. Server Verification:

   • A request is made to your business backend to process the gift.
   • The server authenticates the user, checks their wallet balance, deducts the gift value, and returns a success response.

3. Event Broadcast: Upon success, the client publishes a PubSub message to inform everyone in the meeting (host + other viewers) that a gift has been sent. Clients can then visually show an animation or notification.

Backend Responsibility

Your backend plays a central role in verifying, validating, and processing gift transactions. It should:

• Authenticate the request (token/session)
• Verify if the user has sufficient balance
• Deduct the gift cost
• Store the transaction in a database (optional but recommended)
• Respond with success or failure

Frontend Implementation

• Sending a Gift (Client to Backend + PubSub)

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

function GiftSender({ senderId, hostId }) {
  const { publish } = usePubSub("GIFT");

  const sendGift = async (giftType) => {
    try {
      const response = await axios.post("https://your-api.com/send-gift", {
        senderId,
        hostId,
        giftType,
      });

      if (response.data.success) {
        // Notify everyone in the meeting
        publish({
          giftType,
          from: senderId,
          to: hostId,
        });
      } else {
        Alert.alert("Error", "Gift could not be sent: " + response.data.message);
      }
    } catch (error) {
      console.error("Error while sending gift:", error);
    }
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity 
        style={styles.giftButton} 
        onPress={() => sendGift("rose")}
      >
        <Text style={styles.buttonText}>🌹 Send Rose</Text>
      </TouchableOpacity>
      <TouchableOpacity 
        style={styles.giftButton} 
        onPress={() => sendGift("diamond")}
      >
        <Text style={styles.buttonText}>💎 Send Diamond</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    padding: 10,
  },
  giftButton: {
    backgroundColor: '#007AFF',
    padding: 10,
    borderRadius: 8,
    minWidth: 120,
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
  },
});

• Displaying the Gift (All Clients)

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

function GiftReceiver() {
  const [gifts, setGifts] = useState([]);
  const { messages } = usePubSub("GIFT");

  useEffect(() => {
    messages.forEach(({ message }) => {
      setGifts((prev) => [
        ...prev,
        {
          id: Date.now(),
          from: message.from,
          to: message.to,
          type: message.giftType,
        },
      ]);
    });
  }, [messages]);

  return (
    <View style={styles.container}>
      {gifts.map((gift) => (
        <View key={gift.id} style={styles.giftToast}>
          <Text style={styles.giftText}>
            🎁 {gift.from} sent a {gift.type} to {gift.to}
          </Text>
        </View>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 50,
    left: 0,
    right: 0,
    alignItems: 'center',
  },
  giftToast: {
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    padding: 10,
    borderRadius: 8,
    marginVertical: 5,
    minWidth: 200,
  },
  giftText: {
    color: 'white',
    textAlign: 'center',
    fontSize: 14,
  },
});

API Reference

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

• usePubSub()