Skip to content

kirill578/react-native-webview-bridge-seamless

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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');

About

simplify communication with webview once and for all

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published