Notice

Before proceeding with the hybrid app setup, install the iOS SDK and Web SDK.

You can configure the Airbridge React Native SDK to handle Airbridge-related tasks occurring within the in-app website of a hybrid app without modifying the website's code.

The React Native SDK can handle commands related to event transmission, device settings, and user settings that occur within the Web SDK. Before displaying the website in the web view, configure the React Native SDK using the Airbridge.createWebInterfaceScript and Airbridge.handleWebInterfaceCommand functions.

• webToken: This is the Web SDK token. Your Web SDK token can be found on the [Settings]>[Tokens] page in the Airbridge dashboard.

• postMessageScript: This JavaScript code transmits the payload variable, which stores the command passed from the Web SDK to the React Native SDK, to the React Native area.

• command: This command is passed from the Web SDK to the React Native SDK.

import { useEffect, useState } from 'react'
import { WebView } from 'react-native-webview'
import { Airbridge } from 'airbridge-react-native-sdk'

export const App = () => {
    const [script, setScript] = useState<string | undefined>(undefined)

    useEffect(() => {
        const webToken = 'YOUR_WEB_SDK_TOKEN'
        const postMessageScript = 'window.ReactNativeWebView.postMessage(payload)'
        Airbridge.createWebInterfaceScript(webToken, postMessageScript).then((script) => {
            setScript(script)
        })
    }, [])

    return (
        script !== undefined
    ) ? (
        <WebView
            source={{ uri: 'https://...' }}
            onMessage={(event) => {
                const command = event.nativeEvent.data
                Airbridge.handleWebInterfaceCommand(command)
            }}
            injectedJavaScript={script}
        />
    ) : (
        <></>
    )
}