index.js

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 * All rights reserved.
 *
 * Copyright (c) 2016-present, Ali Najafizadeh
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 *
 * @providesModule WebViewLocalCache
 */

'use strict';

var React = require('react');
var ReactNative = require('react-native');
var invariant = require('invariant');
var keyMirror = require('keymirror');
var resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource');

var {
    ReactNativeViewAttributes,
    UIManager,
    EdgeInsetsPropType,
    StyleSheet,
    Text,
    View,
    WebView,
    requireNativeComponent,
    DeviceEventEmitter,
    NativeModules: {
        WebViewLocalCacheManager
    }
} = ReactNative;
var { PropTypes } = React;

var RCT_WEBVIEWBRIDGE_REF = 'webviewbridge';

var WebViewLocalCacheState = keyMirror({
    IDLE: null,
    LOADING: null,
    ERROR: null,
});

var RCTWebViewLocalCache = requireNativeComponent('RCTWebViewLocalCache', WebViewLocalCache);


/**
 * Renders a native WebView.
 */
var WebViewLocalCache = React.createClass({

    propTypes: {
        ...RCTWebViewLocalCache.propTypes,

        /**
         * Will be called once the message is being sent from webview
         */
        onBridgeMessage: PropTypes.func,
    },

    getInitialState: function() {
        return {
            viewState: WebViewLocalCacheState.IDLE,
            lastErrorEvent: null,
            startInLoadingState: true,
        };
    },

    componentWillMount: function() {
        DeviceEventEmitter.addListener("webViewBridgeMessage", (body) => {
            const { onBridgeMessage } = this.props;
            const message = body.message;
            if (onBridgeMessage) {
                onBridgeMessage(message);
            }
        });

        if (this.props.startInLoadingState) {
            this.setState({viewState: WebViewLocalCacheState.LOADING});
        }
    },

    render: function() {
        var otherView = null;

        if (this.state.viewState === WebViewLocalCacheState.LOADING) {
            otherView = this.props.renderLoading && this.props.renderLoading();
        } else if (this.state.viewState === WebViewLocalCacheState.ERROR) {
            var errorEvent = this.state.lastErrorEvent;
            otherView = this.props.renderError && this.props.renderError(
                errorEvent.domain,
                errorEvent.code,
                errorEvent.description);
        } else if (this.state.viewState !== WebViewLocalCacheState.IDLE) {
            console.error('RCTWebViewLocalCache invalid state encountered: ' + this.state.loading);
        }

        var webViewStyles = [styles.container, this.props.style];
        if (this.state.viewState === WebViewLocalCacheState.LOADING ||
            this.state.viewState === WebViewLocalCacheState.ERROR) {
            // if we're in either LOADING or ERROR states, don't show the webView
            webViewStyles.push(styles.hidden);
        }

        var {javaScriptEnabled, domStorageEnabled} = this.props;
        if (this.props.javaScriptEnabledAndroid) {
            console.warn('javaScriptEnabledAndroid is deprecated. Use javaScriptEnabled instead');
            javaScriptEnabled = this.props.javaScriptEnabledAndroid;
        }
        if (this.props.domStorageEnabledAndroid) {
            console.warn('domStorageEnabledAndroid is deprecated. Use domStorageEnabled instead');
            domStorageEnabled = this.props.domStorageEnabledAndroid;
        }

        let {source, ...props} = {...this.props};


        var webView =
            <RCTWebViewLocalCache
                ref={RCT_WEBVIEWBRIDGE_REF}
                key="webViewKey"
                javaScriptEnabled={true}
                {...props}
                source={resolveAssetSource(source)}
                style={webViewStyles}
                onLoadingStart={this.onLoadingStart}
                onLoadingFinish={this.onLoadingFinish}
                onLoadingError={this.onLoadingError}
                onChange={this.onMessage}
            />;

        return (
                <View style={styles.container}>
                    {webView}
                    {otherView}
                </View>
        );
    },

    onMessage(event) {
        if (this.props.onBridgeMessage != null && event.nativeEvent != null) {
            this.props.onBridgeMessage(event.nativeEvent.message)
        }
    },

    goForward: function() {
        UIManager.dispatchViewManagerCommand(
            this.getWebViewLocalCacheHandle(),
            UIManager.RCTWebViewLocalCache.Commands.goForward,
            null
        );
    },

    goBack: function() {
        UIManager.dispatchViewManagerCommand(
            this.getWebViewLocalCacheHandle(),
            UIManager.RCTWebViewLocalCache.Commands.goBack,
            null
        );
    },

    reload: function() {
        UIManager.dispatchViewManagerCommand(
            this.getWebViewLocalCacheHandle(),
            UIManager.RCTWebViewLocalCache.Commands.reload,
            null
        );
    },

    sendToBridge: function (message) {
        UIManager.dispatchViewManagerCommand(
            this.getWebViewLocalCacheHandle(),
            UIManager.RCTWebViewLocalCache.Commands.sendToBridge,
            [message]
        );
    },

    /**
     * We return an event with a bunch of fields including:
     *  url, title, loading, canGoBack, canGoForward
     */
    updateNavigationState: function(event) {
        if (this.props.onNavigationStateChange) {
            this.props.onNavigationStateChange(event.nativeEvent);
        }
    },

    getWebViewLocalCacheHandle: function() {
        return ReactNative.findNodeHandle(this.refs[RCT_WEBVIEWBRIDGE_REF]);
    },

    onLoadingStart: function(event) {
        var onLoadStart = this.props.onLoadStart;
        onLoadStart && onLoadStart(event);
        this.updateNavigationState(event);
    },

    onLoadingError: function(event) {
        event.persist(); // persist this event because we need to store it
        var {onError, onLoadEnd} = this.props;
        onError && onError(event);
        onLoadEnd && onLoadEnd(event);

        this.setState({
            lastErrorEvent: event.nativeEvent,
            viewState: WebViewLocalCacheState.ERROR
        });
    },

    onLoadingFinish: function(event) {
        var {onLoad, onLoadEnd} = this.props;
        onLoad && onLoad(event);
        onLoadEnd && onLoadEnd(event);
        this.setState({
            viewState: WebViewLocalCacheState.IDLE,
        });
        this.updateNavigationState(event);
    },
});


var styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    hidden: {
        height: 0,
        flex: 0, // disable 'flex:1' when hiding a View
    },
});

module.exports = WebViewLocalCache;