Simple React Native Android module to use Android's WebView inside your app.
This module will be useful until the official RN support are released.
npm install react-native-webview-android --save- In
android/setting.gradle
...
include ':RNWebView', ':app'
project(':RNWebView').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview-android')- In
android/app/build.gradle
...
dependencies {
...
compile project(':RNWebView')
}- Register Module (in MainActivity.java)
import com.burnweb.rnwebview.RNWebViewPackage; // <--- import
public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
......
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.addPackage(new RNWebViewPackage()) // <------ add this line to yout MainActivity class
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "AndroidRNSample", null);
setContentView(mReactRootView);
}
......
}var React = require('react-native');
var { StyleSheet } = React;
var WebViewAndroid = require('react-native-webview-android');
var WebViewAndroidExample = React.createClass({
goBack: function() {
this.refs.webViewAndroidSample.goBack(); // you can use this callbacks to control webview
},
goForward: function() {
this.refs.webViewAndroidSample.goForward();
},
reload: function() {
this.refs.webViewAndroidSample.reload();
},
onNavigationStateChange: function(event) {
console.log(event);
},
render: function() {
var SITE_URL = "https://www.google.com";
return (
<WebViewAndroid
ref="webViewAndroidSample"
javaScriptEnabled={true}
geolocationEnabled={false}
builtInZoomControls={false}
onNavigationStateChange={this.onNavigationStateChange}
url={SITE_URL}
style={styles.containerWebView} />
);
// other attributes: html, htmlCharset, baseUrl, injectedJavaScript, disableCookies
}
});
var styles = StyleSheet.create({
containerWebView: {
flex: 1,
}
});MIT