Documentation

    Listening for Events

    You can listen for SDK events using Upscope.addListener(). Always remove subscriptions on cleanup to avoid memory leaks.

    import Upscope from '@upscopeio/react-native-sdk';

    Listening for Events

    import React, { useEffect } from 'react';
import Upscope from '@upscopeio/react-native-sdk';

function MyComponent() {
  useEffect(() => {
    const subs = [
      Upscope.addListener('connectionStateChanged', ({ state, error }) => {
        switch (state) {
          case 'inactive':
            console.log('Inactive');
            break;
          case 'connecting':
            console.log('Connecting...');
            break;
          case 'connected':
            console.log('Connected');
            break;
          case 'reconnecting':
            console.log('Reconnecting...');
            break;
          case 'error':
            console.log('Error:', error?.message);
            break;
        }
      }),

      Upscope.addListener('sessionStarted', ({ agentName }) => {
        console.log(`Session started with ${agentName ?? 'an agent'}`);
      }),

      Upscope.addListener('sessionEnded', ({ reason, error }) => {
        switch (reason) {
          case 'userStopped':
            console.log('User ended session');
            break;
          case 'agentStopped':
            console.log('Agent ended session');
            break;
          case 'timeout':
            console.log('Session timed out');
            break;
          case 'error':
            console.log('Session error:', error?.message);
            break;
        }
      }),

      Upscope.addListener('customMessageReceived', ({ message, observerId }) => {
        console.log(`Message from ${observerId}: ${message}`);
      }),

      Upscope.addListener('error', ({ code, message }) => {
        console.log(`Error: ${code} - ${message}`);
      }),

      Upscope.addListener('observerJoined', (observer) => {
        console.log(`Observer joined: ${observer.name ?? observer.id}`);
      }),

      Upscope.addListener('observerLeft', ({ observerId }) => {
        console.log(`Observer left: ${observerId}`);
      }),

      Upscope.addListener('observerCountChanged', ({ count }) => {
        console.log(`Observers: ${count}`);
      }),
    ];

    return () => subs.forEach((sub) => sub.remove());
  }, []);

  return null;
}

    Event Reference

    EventPayloadDescription
    connectionStateChanged{ state, error? }Called when the connection state changes. error is present when state is "error".
    sessionStarted{ agentName }A screen sharing session has started. agentName is the agent's display name if available.
    sessionEnded{ reason, error? }A session has ended. reason indicates why (userStopped, agentStopped, timeout, or error).
    customMessageReceived{ message, observerId }A custom message was received from an observer.
    error{ code, message }An SDK error occurred.
    observerJoinedObserverAn agent started observing the session. The Observer includes id, name, screen dimensions, and focus state.
    observerLeft{ observerId }An agent stopped observing the session.
    observerCountChanged{ count }The total number of active observers changed.
    shortIdChanged{ shortId }The visitor's short ID was assigned or changed.
    lookupCodeChanged{ lookupCode }The lookup code was issued or changed.

    Using Hooks Instead

    For most use cases, the reactive hooks are simpler than manual event subscriptions. See SDK Functions for details on useConnectionState(), useSessionState(), and other hooks.