Sending Virtual Gifts - React Native

Virtual gifting 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 virtual gifting using your backend server together with VideoSDK PubSub.

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

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 room (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)

  This example calls your backend with axios. If your app does not use it yet, install it with npm install axios.

import axios from "axios";
import { usePubSub } from "@videosdk.live/react-native-sdk";
import { View, TouchableOpacity, Text, StyleSheet, Alert } 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 room
        try {
          await publish(
            JSON.stringify({
              giftType,
              from: senderId,
              to: hostId,
            })
          );
        } catch (err) {
          console.error("publish failed:", err);
        }
      } 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 { useState } from "react";
import { View, Text, StyleSheet } from "react-native";

function GiftReceiver() {
  const [gifts, setGifts] = useState([]);

  // Runs once for every new gift message
  usePubSub("GIFT", {
    onMessageReceived: ({ id, message }) => {
      const parsed = JSON.parse(message);
      setGifts((prev) => [
        ...prev,
        {
          id,
          from: parsed.from,
          to: parsed.to,
          type: parsed.giftType,
        },
      ]);
    },
  });

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