React Native Hybrid App Integration Guide

React Native Hybrid App Integration Guide

There are several plugins that can be used for webviews in React Native. Since each plugin have different ways to integrate with hybrid apps, Airbridge provides methods to utilize the plugin through a JavaScript interface.

Interface

let webInterface = Airbridge.createWebInterface(
        'YOUR_WEB_TOKEN',
        (command) => { 
            return `...`;
        }
    )

YOUR_WEB_TOKEN can be found at the Airbridge dashboard → Settings → Tokens → Web SDK.

class WebInterface {
        
  public readonly script: string;

	handle(command: string): void;    
}

The javascript interface can be utilized through the returned WebInterface.

Guide

Below is an integration guide for react-native-webview.

react-native-webview

let webInterface = Airbridge.createWebInterface(
    'YOUR_WEB_TOKEN',
    (command) => { 
        return `window.ReactNativeWebView.postMessage(${command})`;
    }
)

const handleWebViewMessage = (event) => {
    const message = event.nativeEvent.data;
    webInterface.handle(message);
};

return (
    <WebView
        source={{ uri: 'YOUR_PAGE_URL' }}
        onMessage={ handleWebViewMessage }
        injectedJavaScript={ webInterface.script }
    />
);

1. Create a web interface. Send the message to the app's native channel by creating a javascript using postCommandFucntion.
2. Use handleWebViewMessage to process the message and forward it to the native SDK.
3. Process the below when creating a web view
   1. Insert handleWebViewMessage into onMessage.
   2. Insert the webInterface.script into injectedJavaScript. webInterface.script is the script you want to inject into the webInterface.