Awesome
react-native-bridgeable-webview
A <WebView>
component replacement for react-native
Requires react-native == 0.6
Add it to your project
- Run
npm install react-native-bridgeable-webview --save
- Open your project in XCode, right click on
Libraries
and clickAdd Files to "Your Project Name"
- (use the RNBridgeableWebview project rather than the one pictured in screenshot).
- Add
libRNBridgeableWebview.a
toBuild Phases -> Link Binary With Libraries
. - Whenever you want to use it within React code now you can:
var WebView = require('react-native-bridgeable-webview');
Usage
var WebView = require('react-native-bridgeable-webview');
It is the exact same component as WebView
except it offers a custom url scheme that acts as message bridge and a method onWebViewMessageSent
to respond to calls made from the webview.
In your react-native code you can include the following snippet as a WebView
replacement:
<WebView
ref={WEBVIEW_REF}
automaticallyAdjustContentInsets={false}
style={styles.webView}
url={this.state.url}
javaScriptEnabledAndroid={true}
onNavigationStateChange={this.onNavigationStateChange}
onWebViewMessageSent={this.onWebViewMessageSent}
startInLoadingState={true}
/>