Crosswalk's WebView for React Native on Android.

Last update: Jun 16, 2022

react-native-webview-crosswalk

Crosswalk's WebView for React Native on Android.

npm version npm downloads npm licence

Dependencies

  • 0.4.0+: react-native >=0.32.0, react >= 15.3.0

  • 0.3.0+: react-native >=0.29.0, react >= 15.2.0

  • 0.2.0+: react-native >=0.25.0, react >= 0.14.5

  • 0.1.0: react-native >= 0.19.0

Installation

  • From the root of your React Native project
npm install react-native-webview-crosswalk --save
mkdir android/app/libs
cp node_modules/react-native-webview-crosswalk/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-webview-crosswalk')

Include libs in your Android project

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

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

If 0.1.0 or 0.2.0+ used add code into MainActivity.java

import com.jordansexton.react.crosswalk.webview.CrosswalkWebViewPackage;    // <--- add this line

public class MainActivity extends ReactActivity {
  ......

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

  ......

}

If 0.3.0+ used add code into MainApplication.java

import com.jordansexton.react.crosswalk.webview.CrosswalkWebViewPackage;    // <--- add this line

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

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

  ......

}

License

MIT

GitHub

https://github.com/jordansexton/react-native-webview-crosswalk
Comments
  • 1. Build Failed

    when I try to run react-native run-android

    the build was failed and returning this error

    :CrosswalkWebView:generateReleaseSources
    :CrosswalkWebView:processReleaseJavaRes UP-TO-DATE
    :CrosswalkWebView:compileReleaseJavaWithJavac
    C:\react-apps\qt-games-mobile-app\node_modules\react-native-webview-crosswalk\sr
    c\main\java\com\jordansexton\react\crosswalk\webview\CrosswalkWebViewGroupManage
    r.java:44: error: getCurrentActivity() is not public in ReactContext; cannot be
    accessed from outside package
            Activity _activity = reactContext.getCurrentActivity();
                                             ^
    C:\react-apps\qt-games-mobile-app\node_modules\react-native-webview-crosswalk\sr
    c\main\java\com\jordansexton\react\crosswalk\webview\CrosswalkWebViewGroupManage
    r.java:59: error: getCurrentActivity() is not public in ReactContext; cannot be
    accessed from outside package
          Activity _activity = reactContext.getCurrentActivity();
                                           ^
    C:\react-apps\qt-games-mobile-app\node_modules\react-native-webview-crosswalk\sr
    c\main\java\com\jordansexton\react\crosswalk\webview\CrosswalkWebViewGroupManage
    r.java:95: error: getCurrentActivity() is not public in ReactContext; cannot be
    accessed from outside package
            Activity _activity = reactContext.getCurrentActivity();
                                             ^
    Note: C:\react-apps\qt-games-mobile-app\node_modules\react-native-webview-crossw
    alk\src\main\java\com\jordansexton\react\crosswalk\webview\CrosswalkWebViewGroup
    Manager.java uses unchecked or unsafe operations.
    Note: Recompile with -Xlint:unchecked for details.
    3 errors
    :CrosswalkWebView:compileReleaseJavaWithJavac FAILED
    
    FAILURE: Build failed with an exception.
    
    * What went wrong:
    Execution failed for task ':CrosswalkWebView:compileReleaseJavaWithJavac'.
    > Compilation failed; see the compiler error output for details.
    
    * Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug
    option to get more log output.
    

    cureently using react-native 0.31.0

    Reviewed by devken-net at 2016-08-25 07:44
  • 2. doesn't work with react native 0.26

    due to separation of react and react native: release notes

    I am not sure how to disentangle these imports accordingly:

    import React, { requireNativeComponent, PropTypes, View } from 'react-native';
    var { addons: { PureRenderMixin }, NativeModules: { UIManager, CrosswalkWebViewManager: { JSNavigationScheme } } } = React;
    
    Reviewed by timofischer81 at 2016-06-02 15:26
  • 3. Build Failed

    I get the following error. Why it does not search xwalk_core_library-16.45.421.19.aar file in node_modules?

    $ react-native run-android
    JS server already running.
    Building and installing the app on the device (cd android && ./gradlew installDebug)...
    
    FAILURE: Build failed with an exception.
    
    * What went wrong:
    A problem occurred configuring project ':app'.
    > Could not resolve all dependencies for configuration ':app:_debugCompile'.
       > Could not find :xwalk_core_library-16.45.421.19:.
         Searched in the following locations:
             https://jcenter.bintray.com//xwalk_core_library-16.45.421.19//xwalk_core_library-16.45.421.19-.pom
             https://jcenter.bintray.com//xwalk_core_library-16.45.421.19//xwalk_core_library-16.45.421.19-.aar
         Required by:
             MyApp:app:unspecified > MyApp:RNCrosswalkWebView:unspecified
    
    * Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
    
    BUILD FAILED
    
    Total time: 6.594 secs
    Could not install the app on the device, read the error above for details.
    Make sure you have an Android emulator running or a device connected and have
    set up your Android development environment:
    https://facebook.github.io/react-native/docs/android-setup.html
    
    Reviewed by bcalik at 2016-02-27 23:25
  • 4. Can not implement with react-native 0.29.0 - new app template structure

    Apparently react-native 0.29.0 requires that we no longer pass this to the constructor :

    https://github.com/facebook/react-native/releases/tag/v0.29.0

    Plugins which pass activity reference in the constructor need to be updated to extend ReactContextBaseJavaModule use getCurrentActivity to get the activity reference. This change is backward compatible.

    The dependency is now initiated in a MainApplication.java file. Ugh.

    Reviewed by mcconkiee at 2016-07-07 22:53
  • 5. cannot install on windows 10

    npm ERR! Windows_NT 10.0.10586 npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install" "react-native-web view-crosswalk" "--save" npm ERR! node v4.4.0 npm ERR! npm v3.8.3 npm ERR! code ELIFECYCLE

    npm ERR! [email protected] postinstall: ./crosswalk.sh npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] postinstall script './crosswalk.sh'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the react-native-webview-crosswalk package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! ./crosswalk.sh npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs react-native-webview-crosswalk npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls react-native-webview-crosswalk npm ERR! There is likely additional logging output above.

    I figured out that this was only to path problems. Running the commands manually worked.

    Reviewed by timofischer81 at 2016-06-02 09:00
  • 6. URL opened in Chrome instead of CrosswalkWebView

    As subject. Code below.

    -------- index.android.js --------

    /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     * @flow
     */
    
    import React, { Component } from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View
    } from 'react-native';
    
    var Xwalk = require('./js/webview').default;
    
    class xwalk extends Component {
      render() {
        return (
          <Xwalk
            injectedJavascript="alert('hello world')"
            onJavascriptResponse={(result) => {
              // result returned
            }}
            localhost={ true }
            style={{ flex: 1 }}
            url="http://google.com" />
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
      },
      instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
      },
    });
    
    AppRegistry.registerComponent('xwalk', () => xwalk);
    

    ------------ webview.js ----------------

    'use strict';
    
    import React, { requireNativeComponent, PropTypes, View } from 'react-native';
    var { addons: { PureRenderMixin }, NativeModules: { UIManager, CrosswalkWebViewManager: { JSNavigationScheme } } } = React;
    
    var WEBVIEW_REF = 'crosswalkWebView';
    
    var CrosswalkWebView = React.createClass({
    
        mixins:    [PureRenderMixin],
        statics:   { JSNavigationScheme },
        propTypes: {
            localhost:               PropTypes.bool.isRequired,
            onNavigationStateChange: PropTypes.func,
            url:                     PropTypes.string,
            ...View.propTypes
        },
        getDefaultProps () {
            return {
                localhost: false
            };
        },    
        render () {
            return (
                <NativeCrosswalkWebView
                    { ...this.props }
                    onNavigationStateChange={ this.onNavigationStateChange }
                    ref={ WEBVIEW_REF }/>
            );
        },
        getWebViewHandle () {
            return React.findNodeHandle(this.refs[WEBVIEW_REF]);
        },
        onNavigationStateChange (event) {
            var { onNavigationStateChange } = this.props;
            if (onNavigationStateChange) {
                onNavigationStateChange(event.nativeEvent);
            }
        },
        goBack () {
            UIManager.dispatchViewManagerCommand(
                this.getWebViewHandle(),
                UIManager.NativeCrosswalkWebView.Commands.goBack,
                null
            );
        },
        goForward () {
            UIManager.dispatchViewManagerCommand(
                this.getWebViewHandle(),
                UIManager.NativeCrosswalkWebView.Commands.goForward,
                null
            );
        },
        reload () {
            UIManager.dispatchViewManagerCommand(
                this.getWebViewHandle(),
                UIManager.NativeCrosswalkWebView.Commands.reload,
                null
            );
        }
    });
    
    var NativeCrosswalkWebView = requireNativeComponent('CrosswalkWebView', CrosswalkWebView);
    
    export default CrosswalkWebView;
    

    Reviewed by app2one at 2016-05-13 04:29
  • 7. Add headers in the source attribute

    In the react native webview it's possible to send a request header as well in the source. Currently only the uri and html are supported in this package.

    Let's introduce headers as well to make the source attribute more complete 👍

    Reviewed by williamrijksen at 2017-01-19 15:07
  • 8. npm install react-native-webview-crosswalk will get old version of this repo

    When i run npm install react-native-webview-crosswalk --save, i got a old one like this

    It use 18.48.477.13.aar

    Now I have to run npm install git+ssh://[email protected]:jordansexton/react-native-webview-crosswalk.git --save to use latest one.

    Reviewed by tenvgo at 2016-12-19 08:38
  • 9. iOS Support

    Hey guys, couldn't find a more appropriate place to ask so feel free to close this if it clutters your issues.

    Just checking to see if anyone has managed to get cross walk for iOS into RN?

    And as a side note, does anyone know if the performance of Crosswalk's implementation of WkWebview is actually more performant? As in, is it just better to rely on the default WkWebview for iOS?

    Reviewed by thomasdavis at 2016-12-14 00:58
  • 10. onActivityResult not callback

    CrosswalkWebView.java

    onActivityResult not callback

        @Override
        public void onActivityResult(int requestCode, int resultCode, Intent data) {
            if (isChoosingFile) {
                isChoosingFile = false;
            }
            super.onActivityResult(requestCode, resultCode, data);
        }
    
    Reviewed by ljspace at 2016-11-17 09:22
  • 11. Destroy webview and cleanup when native viewInstance is dropped.

    In my case webview code was running (I was hearing media) even when Webview was unmounted.

    Override onDropViewinstance to call onDestroy for XWalkView. and similar when app is destroyed. Refer to original WebView implementation of React-Native.

    Reviewed by jayshah123 at 2016-05-05 16:52
  • 12. Doesn't work with react-native 0.55.2

    :CrosswalkWebView:incrementalReleaseJavaCompilationSafeguard UP-TO-DATE
    :CrosswalkWebView:compileReleaseJavaWithJavac
    :CrosswalkWebView:compileReleaseJavaWithJavac - is not incremental (e.g. outputs have changed, no previous execution, etc.).
    /Users/user/dev/tests/crosswalk-test/node_modules/react-native-webview-crosswalk/src/main/java/com/jordansexton/react/crosswalk/webview/CrosswalkWebViewPackage.java:26: error: method does not override or implement a method from a supertype
        @Override
    
    Reviewed by RafaelHovhannisyan at 2018-04-13 13:51
  • 13. Fails to build with React-Native 0.52

    react-native run-android gives

    :CrosswalkWebView:incrementalReleaseJavaCompilationSafeguard UP-TO-DATE
    :CrosswalkWebView:compileReleaseJavaWithJavac
    :CrosswalkWebView:compileReleaseJavaWithJavac - is not incremental (e.g. outputs have changed, no previous execution, etc.).
    /Users/user/dev/tests/crosswalk-test/node_modules/react-native-webview-crosswalk/src/main/java/com/jordansexton/react/crosswalk/webview/CrosswalkWebViewPackage.java:26: error: method does not override or implement a method from a supertype
        @Override
        ^
    Note: /Users/user/dev/tests/crosswalk-test/node_modules/react-native-webview-crosswalk/src/main/java/com/jordansexton/react/crosswalk/webview/CrosswalkWebViewGroupManager.java uses or overrides a deprecated API.
    Note: Recompile with -Xlint:deprecation for details.
    Note: /Users/user/dev/tests/crosswalk-test/node_modules/react-native-webview-crosswalk/src/main/java/com/jordansexton/react/crosswalk/webview/CrosswalkWebViewGroupManager.java uses unchecked or unsafe operations.
    Note: Recompile with -Xlint:unchecked for details.
    1 error
    :CrosswalkWebView:compileReleaseJavaWithJavac FAILED
    
    FAILURE: Build failed with an exception.
    
    * What went wrong:
    Execution failed for task ':CrosswalkWebView:compileReleaseJavaWithJavac'.
    > Compilation failed; see the compiler error output for details.
    
    * Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
    

    Problem can be reproduced in demo project

    Reviewed by romanlv at 2018-01-30 18:16
  • 14. how I can call xwalk-command-line

    I have question about the file xwalk-command-line, I tried to add the file in many places in the Project, but the code in the file not called. any body can help me please ?

    thank you very much

    Reviewed by AbbasBourji at 2017-07-17 19:43
  • 15. Cannot read property 'PureRenderMixin' of undefined

    After installing App crashes with the following error at line no 7 of index.android.js

    "react": "16.0.0-alpha.6", "react-native": "0.44.0", "react-native-webview-crosswalk": "^0.5.0"

    Reviewed by tarun29061990 at 2017-05-11 20:19
React Native Webview with Javascript Bridge
React Native Webview with Javascript Bridge

Please take a look at this issue first React Native WebView Javascript Bridge I have been testing and reading a lot of way to safely create a bridge b

Jun 17, 2022
A set of classes and react components to make work your react-native app in a browser. (with some limitations obviously)

React Native for Web A set of classes and react components to make work your react-native app in a browser. (with some limitations obviously) GitHub r

Jun 1, 2022
A React Native wrapper for Safari View Controller.

React Native Safari View React Native Safari View is a Safari View Controller wrapper for React Native. Documentation Install Usage Example Methods Ev

May 19, 2022
Full-featured web browser module for React Native apps, based on TOWebViewController
Full-featured web browser module for React Native apps, based on TOWebViewController

react-native-browser A full-featured web browser module for React Native apps, based on the awesome TOWebViewController Installation Run npm install r

May 8, 2022
React Native adapter for building hybrid apps with Turbolinks 5
React Native adapter for building hybrid apps with Turbolinks 5

React Native Turbolinks A implementation of Turbolinks for iOS and Turbolinks Android for React Native. Getting started yarn add react-native-webview

May 17, 2022
Luna - a React Native Web boilerplate
Luna - a React Native Web boilerplate

?? Luna ?? Luna is a React Native boilerplate with minimal configuration so your app can run on Android, IOS and Web concurrently. ⭐ Features: React N

Jun 16, 2022
Crosswalk's WebView for React Native on Android.

react-native-webview-crosswalk Crosswalk's WebView for React Native on Android. Dependencies 0.4.0+: react-native >=0.32.0, react >= 15.3.0 0.3.0+: re

Jun 16, 2022
An easy way to integrate your React (or Preact) app into React Native app with WebView.
An easy way to integrate your React (or Preact) app into React Native app with WebView.

react-native-react-bridge An easy way to integrate your React (or Preact) app into React Native app with WebView. Why? If you'd like to run your React

Jun 16, 2022
React-native component which renders markdown into a webview!

react-native-showdown React-native component which renders markdown into a webview! Since version 1.0.0 it requires the peer dependency react-native-w

Jan 31, 2022
React Native Webview with Javascript Bridge
React Native Webview with Javascript Bridge

Please take a look at this issue first React Native WebView Javascript Bridge I have been testing and reading a lot of way to safely create a bridge b

Jun 17, 2022
A LeafletView component using WebView and Leaflet map for React Native applications
A LeafletView component using WebView and Leaflet map for React Native applications

A LeafletView component using WebView and Leaflet map for React Native applications

Jun 19, 2022
Develop a vscode sidebar webview extension

vscode-webview-extension-with-react README vscode-webview-extension-with-react is a repo to illustrate how to register a webview using react to side b

Mar 1, 2022
🚀🚀🚀Build universal cross-platform apps with React Native. Includes latest iOS, tvOS, Android, Android TV, Android Wear, Web, Tizen TV, Tizen Watch, Tizen Mobile, LG webOS, macOS/OSX, Windows, KaiOS, FirefoxOS Firefox TV platforms
🚀🚀🚀Build universal cross-platform apps with React Native. Includes latest iOS, tvOS, Android, Android TV, Android Wear, Web, Tizen TV, Tizen Watch, Tizen Mobile, LG webOS, macOS/OSX, Windows, KaiOS, FirefoxOS Firefox TV platforms

build universal cross-platform apps with react native Introduction Video Quick Start • Features • Templates • Plugins • Integrations • JSON Configurat

Jun 14, 2022
A android like toast for android and ios, android use native toast, ios use UIView+Toast

React Native Toast (remobile) A android like toast for react-native support for ios and android Installation npm install @remobile/react-native-toast

Apr 4, 2022
react-native-wheel-picker-android ★186 - Simple and flexible React native wheel picker for Android, including DatePicker and TimePicker.
react-native-wheel-picker-android ★186 - Simple and flexible React native wheel picker for Android, including DatePicker and TimePicker.

React native wheel picker V2 A simple Wheel Picker for Android (For IOs is using Picker from react-native) Example You can clone the repo and run exam

Jun 20, 2022
A react native module to show toast like android, it works on iOS and Android.
A react native module to show toast like android, it works on iOS and Android.

react-native-easy-toast A react native module to show toast like android, it works on iOS and Android. Content Installation Demo Getting started API C

Jun 15, 2022
A react native android module to control the android statusbar.

Status bar for React Native Android A react native android module to control the android statusbar. Setup There are five steps in the setup process in

Nov 24, 2021
React Native Android module to use Android's AlertDialog - same idea of AlertIOS

react-native-simpledialog-android React Native Android module to use Android's AlertDialog - same idea of AlertIOS Installation npm install react-nati

Mar 1, 2020
icons for react-native android using android-iconify

react-native-android-iconify icons for react native android using android-iconify Installation and How to use Step 1 - NPM Install npm install --save

May 26, 2020
🌄 Image editor using native modules for iOS and Android. Inherit from 2 available libraries, Brightroom (iOS) and PhotoEditor (Android)
🌄 Image editor using native modules for iOS and Android. Inherit from 2 available libraries, Brightroom (iOS) and PhotoEditor (Android)

?? Image editor using native modules for iOS and Android. Inherit from 2 available libraries, Brightroom (iOS) and PhotoEditor (Android)

Jun 16, 2022