react-native-webview-bridge-seamless

make it easy to invoke functions on webview and in react

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-native-webview-bridge-seamless
1530.0.153 years ago4 years agoMinified + gzip package size for react-native-webview-bridge-seamless in KB

Readme

Setup
install react native webview package, the library wont work with the default webview
yarn install react-native-webview

install package
yarn install react-native-webview-bridge-seamless

make sure you import webview from react-native-webview and not from react-native
import {WebView, WebViewSharedProps} from 'react-native-webview';
import {withWebViewBridge} from 'react-native-webview-bridge-seamless';

wrap the webview
export const WebViewWithBridge = withWebViewBridge(WebView);
Usage
class MySmartWebView extends React.Component<> {
    constructor(props) {
        super(props);
        this.getToken = this.getToken.bind(this);
    }

    async getToken(type) {
       if (type === 'A')
          return await getTokenA();
       else
          return await getTokenB();
    }

    render() {
       return <WebViewWithBridge
            source={{uri: 'https://your-page.io'}}
            reactNativeApi={{
                getToken: this.getToken
            }}
         />
    }
}

inside your web application we can interact with the defined app in the following way
const timeout = 5000; // promise will fail if no response in 5 seconds
const tokenA = await window.getReactNativeApi(timeout).getToken('A');