User GuideDeveloper GuideAPI
Dashboard

Hybrid App Setup - React Native SDK (v4)

Notice

Before proceeding with the hybrid app settings, 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.

Manage Web SDK Commands with the React Native SDK

React Native SDK can handle commands related to event transmission, device settings, and user settings carried out by the Web SDK. Configure the Airbridge.createWebInterfaceScript and Airbridge.handleWebInterfaceCommand functions before displaying the website in the WebView.

webToken is a Web SDK token. You can find it on the [Settings]>[Tokens] page in the Airbridge dashboard.

postMessageScript is a JavaScript code that passes the payload variable, which stores the commands sent from the Web SDK to the React Native SDK, to the React Native area.

command is the command sent from the Web SDK to the React Native SDK.

123456789101112131415161718192021222324252627282930
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}
        />
    ) : (
        <></>
    )
}

Attention

Was this page helpful?

Have any questions or suggestions?