User GuideDeveloper GuideAPI
Dashboard

    Hybrid App Setup - React Native SDK (v4)

    Notice

    Install the React Native SDK and Web SDK respectively on the app and website before setting up the hybrid app.

    You can set the React Native SDK to handle Airbridge related tasks occurring on the in-app website in hybrid apps without changing the website 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 that take place in the Web SDK. Set up using Airbridge.createWebInterfaceScript and Airbridge.handleWebInterfaceCommand functions before displaying the website in the web view.

    webToken is a Web SDK token. The Web SDK token can be checked in Airbridge dashboard under [Settings]>[Tokens].

    postMessageScript is a JavaScript code that delivers the payload variable, which stores the command passed from the web SDK to the React Native SDK, to the React Native area.

    command is the command received from the web SDK delivered 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

    Beware following.

    Was this page helpful?

    Have any questions or suggestions?