User GuideDeveloper GuideAPI
Dashboard

    [WIP] Hybrid App Setup - Expo SDK (v4)

    Notice

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

    You can set the Expo 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 Expo SDK

    Expo 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 Expo SDK, to the Expo area.

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