React Native (Expo) Integration

Integrating Rapport Web Viewer is done using the react-native-webview component.

TSX

import { WebView } from 'react-native-webview';

<WebView source={{ uri: 'https://.../rwv.html' }} />

⚠️ Note: The WebView component’s source property must point to a HTML file served over a secure connection with a valid certificate.

The HTML file should contain the RapportScene web component and all necessary functionality to start a session.

rwv.html

CODE

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>RWV</title>
  </head>
  <body>
    <button id="startSessionButton">Start session</button>

    <rapport-scene
      project-token="..."
    >
    </rapport-scene>

    <div id="errorContainer"></div>

    <script>
      document.getElementById('startSessionButton').addEventListener('click', async () => {
        try {
          await document.getElementsByTagName('rapport-scene')[0].sessionRequest();
        } catch (error) {
          document.getElementById('errorContainer').innerText = JSON.stringify(error);
        }
      });
    </script>

    <script src="https://cdn.rapport.cloud/rapport-web-viewer/rapport.js"></script>
  </body>
</html>

⚠️ Note: The RWV plugin must be imported after the rapport-scene component is loaded to ensure iOS compatibility.

Microphone permission must be provided by the React Native application before the RWV session can be started.

The expo-audio module will provide the necessary functionality to ask microphone permission from the user.

app.json

JSON

{
  "expo": {
    "plugins": [
      [
        "expo-audio",
        {
          "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone."
        }
      ]
    ]
  }
}

TSX

import { getRecordingPermissionsAsync, requestRecordingPermissionsAsync } from 'expo-audio';

async function getMic() {
  const { status } = await getRecordingPermissionsAsync();

  if (status !== 'granted') {
    // Permission not granted, request it
    const { granted } = await requestRecordingPermissionsAsync();
    return granted;
  }

  return true; // Already granted
}