axa-rn-web-view/index.js

A middleware for webview

import React, { Component } from 'react';
import { Platform, View, SafeAreaView } from 'react-native';
import { WebView } from 'react-native-webview';
import PropTypes from 'prop-types';

export default class AxaWebView extends Component {
  // Props
  static propTypes = {
    handleNavigationChange: PropTypes.func.isRequired,
    sourceUri: PropTypes.string.isRequired,
    ref: PropTypes.func
  };

  // Keep track of going back navigation within component
  onHandleNavigationChange = async navState => {
    const androidPattern = /file:(\W+)/gi;
    const iosPattern = /Web.(\w+)/gi;
    const mailPattern = /mailto:(\w+)/gi;

    const { url } = navState;
    if (!url.match(iosPattern) || !url.match(androidPattern)) {
      // pass form props
      this.props.handleNavigationChange(navState);
      this.webview.stopLoading();
    }
  };

  render() {
    const params = 'platform=' + Platform.OS;

    const injectedJS = `if (!window.location.search) {
      var link = document.getElementById('progress-bar');
      link.href = './site/index.html?${params}';
      link.click();
      true;
    }`;

    return (
      <WebView
        {...this.props}
        ref={this.props.ref}
        injectedJavaScript={injectedJS}
        source={{ uri: this.props.sourceUri }}
        javaScriptEnabled={true}
        originWhitelist={['*']}
        allowFileAccess={true}
        onNavigationStateChange={this.onHandleNavigationChange}
      />
    );
  }
}