/react-native-webkit-webview

💼 Common webkit latest-feature-supported webview for both android and iOS platform

Primary LanguageJavaMIT LicenseMIT

react-native-webkit-webview

NPM

Build Status MIT Licence depedencies

Forked from react-native-webview-crosswalk

Cross-platform Webview component,With better performance on android.

Npm scripts sucks.Yarn recommended

Dependencies

react-native >=0.32.0, react >= 15.3.0

Installation

  • From the root of your React Native project
npm install react-native-webkit-webview --save
mkdir android/app/libs
cp node_modules/react-native-webkit-webview/libs/xwalk_core_library-22.52.561.4.aar android/app/libs/

Include module in your Android project

  • In android/setting.gradle
...
+ include ':CrosswalkWebView', ':app'
+ project(':CrosswalkWebView').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webkit-webview')

Include libs in your Android project

  • In android/build.gradle
...
allprojects {
    repositories {
        mavenLocal()
        jcenter()

+        flatDir {
+            dirs 'libs'
+        }
    }
}
  • In android/app/build.gradle
...
dependencies {
  ...
+  compile (name: "xwalk_core_library-22.52.561.4", ext: "aar")
+  compile project(':CrosswalkWebView')
}
  • Register package :

  • In android/app/src/main/java/com/YOUR_PROJECT_NAME/MainApplication.java

+ import com.jordansexton.react.crosswalk.webview.CrosswalkWebViewPackage;

public class MainApplication extends Application implements ReactApplication {
  ......

  @Override
  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
+       new CrosswalkWebViewPackage()    // <--- add this line
    );
  }

  ......

}

Usage

// DemoComponents.js
import React,{ Component } from 'react'
import { View,TouchableHighlight,Text } from 'react-native'
import WebkitView from 'react-native-webkit-webview'

import localDemoPage from './demoPage.html'

export default class DemoComponents extends Component{
  render(){
    return (
      <View>
        <TouchableHighlight onPress={ this.passMessageToWebpage }>
          <Text>Tell webpage some message</Text>
        </TouchableHighlight>
        <WebkitView
          source={ localDemoPage // local file usage}
          source={{ uri:'http://www.demo.com/path' //link usage }}
          injectedJavaScript="setTimeout(function(){document.write('WONDERFUL')},1000)"
          onMessage = { this.messageHandler }
          ref={ (webkitView) => { this.webkitView = webkitView } }
        />
      </View>
    )
  }

  passMessageToWebpage = () => {
    this.webkitView.postMessage('hello there')
  }

  messageHandler = (ev) => {
    console.log(ev)
  }
}
<!-- demoPage.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
    window.addEventListener('message',(ev) => {
      console.log(ev);
    })
  </script>
</body>
</html>

License

MIT