Build visitor and agent communications inside a React Native app

# Pilot install from a local source package
npm install ./ringnity-react-native-sdk

# or
yarn add file:./ringnity-react-native-sdk

# iOS native module install
cd ios && pod install && cd ..

import {
  Ringnity,
  createRingnityReactNativeCallAdapter,
} from '@ringnity/react-native-sdk';

const mediaAdapter = createRingnityReactNativeCallAdapter();

async function fetchRingnityRuntimeToken() {
  const response = await fetch(
    'https://your-backend.example.com/ringnity/runtime-token',
    {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        userId: currentUser.id,
        name: currentUser.name,
        email: currentUser.email,
        appVersion: '1.0.0',
        platform: Platform.OS,
      }),
    },
  );

  if (!response.ok) {
    throw new Error('Ringnity runtime token request failed');
  }

  return response.json();
}

const ringnity = await Ringnity.create({
  apiBaseUrl: 'https://api.ringnity.com',
  tokenProvider: fetchRingnityRuntimeToken,
  callMode: 'basic',
  mediaAdapter,
  notificationAdapter: mediaAdapter,
  notifications: {
    incomingCall: {
      soundName: 'ringnity_default',
      vibrate: true,
    },
  },
});

import { useEffect, useRef, useState } from 'react';
import { Platform } from 'react-native';
import {
  Ringnity,
  RingnityWidget,
  createRingnityReactNativeCallAdapter,
} from '@ringnity/react-native-sdk';

const mediaAdapter = createRingnityReactNativeCallAdapter();

async function fetchRingnityRuntimeToken() {
  const response = await fetch(
    'https://your-backend.example.com/ringnity/runtime-token',
    {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        userId: currentUser.id,
        name: currentUser.name,
        email: currentUser.email,
        platform: Platform.OS,
      }),
    },
  );

  return response.json();
}

const config = {
  tokenProvider: fetchRingnityRuntimeToken,
  callMode: 'basic',
  mediaAdapter,
  notificationAdapter: mediaAdapter,
};

export function SupportScreen() {
  return (
    <RingnityWidget
      config={config}
      mode="full"
      conversationSubject="Mobile customer support"
    />
  );
}

export function HeadlessSupportScreen() {
  const [messages, setMessages] = useState([]);
  const subscriptionRef = useRef(null);

  useEffect(() => {
    let disposed = false;

    async function start() {
      const ringnity = await Ringnity.create(config);
      const conversation = await ringnity.chat.createConversation({
        subject: 'Mobile customer support',
      });

      if (disposed) return;

      subscriptionRef.current = await ringnity.chat.subscribe(
        conversation.conversationId,
      );

      subscriptionRef.current.on('message.created', (event) => {
        setMessages((current) => [...current, event.data]);
      });

      await ringnity.chat.sendMessage({
        conversationId: conversation.conversationId,
        body: 'Hi, I need help.',
      });
    }

    start();

    return () => {
      disposed = true;
      subscriptionRef.current?.unsubscribe();
    };
  }, []);

  return <YourCustomSupportView messages={messages} />;
}