React Native

React Native

You can integrate the widget into your React Native application using a web view.

This documentation provides an example of integration using the react-native-webview package.

1. First, add the required permissions

For Android: In your AndroidManifest.xml file

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />

‍

For iOS: In your Info.plist file

<key>NSCameraUsageDescription</key>
<string>Camera Permission</string>
<key>NSFileProviderDomainUsageDescription</key>
<string></string>

‍

2. Create an integration.html file in the assets directory containing your widget's web integration (example: integration.html)

Android

Assets directory: ./android/app/src/main/assets/

‍

iOS

Assets directory: ./ios/external/assets/

See also how to build assets

3. Finally load the file in a WebView. For example, in your main App component:

import React from "react"
import { Platform } from "react-native"
import { WebView } from "react-native-webview"
import { WebViewMessageEvent } from "react-native-webview/lib/WebViewTypes"

const uri = Platform.OS === "android" ? "file:///android_asset/integration.html" : "./assets/integration.html"

export default class App extends React.Component {
    private readonly _handleOnMessage = ({ nativeEvent: { data } }: WebViewMessageEvent) => {
        const message = JSON.parse(data)
        console.log("Message from WebView:", message)
    }

    render = () =>
        <WebView
            originWhitelist={["*"]}
            source={{ uri }}
            allowsInlineMediaPlayback={true}
            mediaPlaybackRequiresUserAction={false}
            onMessage={this._handleOnMessage}/>
}

‍

Here is the complete React Native Webview example and the React Native Webview with local content example.