wip

.eslintrc.js

@@ -1,8 +1,8 @@
 module.exports = {
   // Airbnb is the base, prettier is here so that eslint doesn't conflict with prettier
-  extends: ['airbnb-base', 'prettier', 'prettier/react'],
+  extends: ['airbnb', 'prettier', 'prettier/react'],
   parser: 'typescript-eslint-parser',
-  plugins: ['react', 'react-native', 'typescript'],
+  plugins: ['react-native', 'typescript'],
   rules: {
     // Parens will be needed for arrow functions
     'arrow-parens': ['error', 'as-needed', { requireForBlockBody: true }],
@@ -42,7 +42,7 @@ module.exports = {
     {
       files: ['*.ts?(x)'],
       parser: 'typescript-eslint-parser',
-      plugins: ['react', 'react-native', 'typescript'],
+      plugins: ['react-native', 'typescript'],
     },
   ],
   settings: {

js/WebViewTypes.js

@@ -1,470 +0,0 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * @flow
- */
-
- /* eslint-disable */
-
-'use strict';
-
-import type {Node, Element, ComponentType} from 'react';
-
-import type {SyntheticEvent} from 'CoreEventTypes';
-import type {EdgeInsetsProp} from 'EdgeInsetsPropType';
-import type {ViewStyleProp} from 'StyleSheet';
-import type {ViewProps} from 'ViewPropTypes';
-
-export type WebViewNativeEvent = $ReadOnly<{|
-  url: string,
-  loading: boolean,
-  title: string,
-  canGoBack: boolean,
-  canGoForward: boolean,
-|}>;
-
-export type WebViewProgressEvent = $ReadOnly<{|
-    ...WebViewNativeEvent,
-    progress: number,
-|}>
-
-export type WebViewNavigation = $ReadOnly<{|
-  ...WebViewNativeEvent,
-  navigationType:
-    | 'click'
-    | 'formsubmit'
-    | 'backforward'
-    | 'reload'
-    | 'formresubmit'
-    | 'other',
-|}>;
-
-export type WebViewMessage = $ReadOnly<{|
-  ...WebViewNativeEvent,
-  data: string,
-|}>;
-
-export type WebViewError = $ReadOnly<{|
-  ...WebViewNativeEvent,
-  /**
-   * `domain` is only used on iOS
-   */
-  domain: ?string,
-  code: number,
-  description: string,
-|}>;
-
-export type WebViewEvent = SyntheticEvent<WebViewNativeEvent>;
-
-export type WebViewNavigationEvent = SyntheticEvent<WebViewNavigation>;
-
-export type WebViewMessageEvent = SyntheticEvent<WebViewMessage>;
-
-export type WebViewErrorEvent = SyntheticEvent<WebViewError>;
-
-export type DataDetectorTypes =
-  | 'phoneNumber'
-  | 'link'
-  | 'address'
-  | 'calendarEvent'
-  | 'trackingNumber'
-  | 'flightNumber'
-  | 'lookupSuggestion'
-  | 'none'
-  | 'all';
-
-export type OverScrollModeType = 'always' | 'content' | 'never';
-
-export type WebViewSourceUri = $ReadOnly<{|
-  /**
-   * The URI to load in the `WebView`. Can be a local or remote file.
-   */
-  uri?: ?string,
-
-  /**
-   * The HTTP Method to use. Defaults to GET if not specified.
-   * NOTE: On Android, only GET and POST are supported.
-   */
-  method?: string,
-
-  /**
-   * Additional HTTP headers to send with the request.
-   * NOTE: On Android, this can only be used with GET requests.
-   */
-  headers?: Object,
-
-  /**
-   * The HTTP body to send with the request. This must be a valid
-   * UTF-8 string, and will be sent exactly as specified, with no
-   * additional encoding (e.g. URL-escaping or base64) applied.
-   * NOTE: On Android, this can only be used with POST requests.
-   */
-  body?: string,
-|}>;
-
-export type WebViewSourceHtml = $ReadOnly<{|
-  /**
-   * A static HTML page to display in the WebView.
-   */
-  html?: ?string,
-  /**
-   * The base URL to be used for any relative links in the HTML.
-   */
-  baseUrl?: ?string,
-|}>;
-
-export type WebViewSource = WebViewSourceUri | WebViewSourceHtml;
-
-export type WebViewNativeConfig = $ReadOnly<{|
-  /*
-   * The native component used to render the WebView.
-   */
-  component?: ComponentType<WebViewSharedProps>,
-  /*
-   * Set props directly on the native component WebView. Enables custom props which the
-   * original WebView doesn't pass through.
-   */
-  props?: ?Object,
-  /*
-   * Set the ViewManager to use for communication with the native side.
-   * @platform ios
-   */
-  viewManager?: ?Object,
-|}>;
-
-export type IOSWebViewProps = $ReadOnly<{|
-  /**
-   * If true, use WKWebView instead of UIWebView.
-   * @platform ios
-   */
-  useWebKit?: ?boolean,
-
-  /**
-   * Boolean value that determines whether the web view bounces
-   * when it reaches the edge of the content. The default value is `true`.
-   * @platform ios
-   */
-  bounces?: ?boolean,
-
-  /**
-   * A floating-point number that determines how quickly the scroll view
-   * decelerates after the user lifts their finger. You may also use the
-   * string shortcuts `"normal"` and `"fast"` which match the underlying iOS
-   * settings for `UIScrollViewDecelerationRateNormal` and
-   * `UIScrollViewDecelerationRateFast` respectively:
-   *
-   *   - normal: 0.998
-   *   - fast: 0.99 (the default for iOS web view)
-   * @platform ios
-   */
-  decelerationRate?: ?('fast' | 'normal' | number),
-
-  /**
-   * Boolean value that determines whether scrolling is enabled in the
-   * `WebView`. The default value is `true`.
-   * @platform ios
-   */
-  scrollEnabled?: ?boolean,
-
-  /**
-   * If the value of this property is true, the scroll view stops on multiples
-   * of the scroll view’s bounds when the user scrolls.
-   * The default value is false.
-   * @platform ios
-   */
-  pagingEnabled?: ?boolean,
-
-  /**
-   * The amount by which the web view content is inset from the edges of
-   * the scroll view. Defaults to {top: 0, left: 0, bottom: 0, right: 0}.
-   * @platform ios
-   */
-  contentInset?: ?EdgeInsetsProp,
-
-  /**
-   * Determines the types of data converted to clickable URLs in the web view's content.
-   * By default only phone numbers are detected.
-   *
-   * You can provide one type or an array of many types.
-   *
-   * Possible values for `dataDetectorTypes` are:
-   *
-   * - `'phoneNumber'`
-   * - `'link'`
-   * - `'address'`
-   * - `'calendarEvent'`
-   * - `'none'`
-   * - `'all'`
-   *
-   * With the new WebKit implementation, we have three new values:
-   * - `'trackingNumber'`,
-   * - `'flightNumber'`,
-   * - `'lookupSuggestion'`,
-   *
-   * @platform ios
-   */
-  dataDetectorTypes?:
-    | ?DataDetectorTypes
-    | $ReadOnlyArray<DataDetectorTypes>,
-
-  /**
-   * Function that allows custom handling of any web view requests. Return
-   * `true` from the function to continue loading the request and `false`
-   * to stop loading.
-   * @platform ios
-   */
-  onShouldStartLoadWithRequest?: (event: WebViewEvent) => mixed,
-
-  /**
-   * Boolean that determines whether HTML5 videos play inline or use the
-   * native full-screen controller. The default value is `false`.
-   *
-   * **NOTE** : In order for video to play inline, not only does this
-   * property need to be set to `true`, but the video element in the HTML
-   * document must also include the `webkit-playsinline` attribute.
-   * @platform ios
-   */
-  allowsInlineMediaPlayback?: ?boolean,
-  /**
-   * Hide the accessory view when the keyboard is open. Default is false to be
-   * backward compatible.
-   */
-  hideKeyboardAccessoryView?: ?boolean,
-  /**
-   * A Boolean value indicating whether horizontal swipe gestures will trigger
-   * back-forward list navigations.
-   */
-  allowsBackForwardNavigationGestures?: ?boolean,
-  /**
-   * The custom user agent string.
-   */
-  userAgent?: ?string,
-
-  /**
-   * A Boolean value that determines whether pressing on a link
-   * displays a preview of the destination for the link.
-   *
-   * This property is available on devices that support 3D Touch.
-   * In iOS 10 and later, the default value is `true`; before that, the default value is `false`.
-   * @platform ios
-   */
-  allowsLinkPreview?: ?boolean,
-|}>;
-
-export type AndroidWebViewProps = $ReadOnly<{|
-  onNavigationStateChange?: (event: WebViewNavigation) => mixed,
-  onContentSizeChange?: (event: WebViewEvent) => mixed,
-
-  /**
-   * https://developer.android.com/reference/android/view/View#OVER_SCROLL_NEVER
-   * Sets the overScrollMode. Possible values are:
-   *
-   * - `'always'` (default)
-   * - `'content'`
-   * - `'never'`
-   *
-   * @platform android
-   */
-  overScrollMode?: ?OverScrollModeType,
-
-  /**
-   * Sets whether Geolocation is enabled. The default is false.
-   * @platform android
-   */
-  geolocationEnabled?: ?boolean,
-
-  /**
-   * Boolean that sets whether JavaScript running in the context of a file
-   * scheme URL should be allowed to access content from any origin.
-   * Including accessing content from other file scheme URLs
-   * @platform android
-   */
-  allowUniversalAccessFromFileURLs?: ?boolean,
-
-  /**
-   * Sets whether the webview allow access to file system.
-   * @platform android
-   */
-  allowFileAccess?: ?boolean,
-
-  /**
-   * Used on Android only, controls whether form autocomplete data should be saved
-   * @platform android
-   */
-  saveFormDataDisabled?: ?boolean,
-
-  /*
-   * Used on Android only, controls whether the given list of URL prefixes should
-   * make {@link com.facebook.react.views.webview.ReactWebViewClient} to launch a
-   * default activity intent for those URL instead of loading it within the webview.
-   * Use this to list URLs that WebView cannot handle, e.g. a PDF url.
-   * @platform android
-   */
-  urlPrefixesForDefaultIntent?: $ReadOnlyArray<string>,
-
-  /**
-   * Boolean value to enable JavaScript in the `WebView`. Used on Android only
-   * as JavaScript is enabled by default on iOS. The default value is `true`.
-   * @platform android
-   */
-  javaScriptEnabled?: ?boolean,
-
-  /**
-   * Boolean value to enable third party cookies in the `WebView`. Used on
-   * Android Lollipop and above only as third party cookies are enabled by
-   * default on Android Kitkat and below and on iOS. The default value is `true`.
-   * @platform android
-   */
-  thirdPartyCookiesEnabled?: ?boolean,
-
-  /**
-   * Boolean value to control whether DOM Storage is enabled. Used only in
-   * Android.
-   * @platform android
-   */
-  domStorageEnabled?: ?boolean,
-
-  /**
-   * Sets the user-agent for the `WebView`.
-   * @platform android
-   */
-  userAgent?: ?string,
-
-  /**
-   * Specifies the mixed content mode. i.e WebView will allow a secure origin to load content from any other origin.
-   *
-   * Possible values for `mixedContentMode` are:
-   *
-   * - `'never'` (default) - WebView will not allow a secure origin to load content from an insecure origin.
-   * - `'always'` - WebView will allow a secure origin to load content from any other origin, even if that origin is insecure.
-   * - `'compatibility'` -  WebView will attempt to be compatible with the approach of a modern web browser with regard to mixed content.
-   * @platform android
-   */
-  mixedContentMode?: ?('never' | 'always' | 'compatibility'),
-|}>;
-
-export type WebViewSharedProps =  $ReadOnly<{|
-  ...ViewProps,
-  ...IOSWebViewProps,
-  ...AndroidWebViewProps,
-  /**
-   * Deprecated. Use `source` instead.
-   */
-  url?: ?string,
-  /**
-   * Deprecated. Use `source` instead.
-   */
-  html?: ?string,
-
-  /**
-   * Loads static html or a uri (with optional headers) in the WebView.
-   */
-  source?: ?WebViewSource,
-
-  /**
-   * Function that returns a view to show if there's an error.
-   */
-  renderError: (errorDomain: ?string, errorCode: number, errorDesc: string) => Element<any>, // view to show if there's an error
-
-  /**
-   * Function that returns a loading indicator.
-   */
-  renderLoading: () => Element<any>,
-
-  /**
-   * Function that is invoked when the `WebView` has finished loading.
-   */
-  onLoad: (event: WebViewNavigationEvent) => mixed,
-
-  /**
-   * Function that is invoked when the `WebView` load succeeds or fails.
-   */
-  onLoadEnd: (event: WebViewNavigationEvent | WebViewErrorEvent) => mixed,
-
-  /**
-   * Function that is invoked when the `WebView` starts loading.
-   */
-  onLoadStart: (event: WebViewNavigationEvent) => mixed,
-
-  /**
-   * Function that is invoked when the `WebView` load fails.
-   */
-  onError: (event: WebViewErrorEvent) => mixed,
-
-  /**
-   * Controls whether to adjust the content inset for web views that are
-   * placed behind a navigation bar, tab bar, or toolbar. The default value
-   * is `true`.
-   */
-  automaticallyAdjustContentInsets?: ?boolean,
-
-  /**
-   * Function that is invoked when the `WebView` loading starts or ends.
-   */
-  onNavigationStateChange?: (event: WebViewNavigation) => mixed,
-
-  /**
-   * A function that is invoked when the webview calls `window.postMessage`.
-   * Setting this property will inject a `postMessage` global into your
-   * webview, but will still call pre-existing values of `postMessage`.
-   *
-   * `window.postMessage` accepts one argument, `data`, which will be
-   * available on the event object, `event.nativeEvent.data`. `data`
-   * must be a string.
-   */
-  onMessage?: (event: WebViewMessageEvent) => mixed,
-
-  /**
-   * Function that is invoked when the `WebView` is loading.
-   */
-  onLoadProgress?: (event: WebViewProgressEvent) => mixed,
-
-  /**
-   * Boolean value that forces the `WebView` to show the loading view
-   * on the first load.
-   */
-  startInLoadingState?: ?boolean,
-
-  /**
-   * Set this to provide JavaScript that will be injected into the web page
-   * when the view loads.
-   */
-  injectedJavaScript?: ?string,
-
-  /**
-   * Boolean that controls whether the web content is scaled to fit
-   * the view and enables the user to change the scale. The default value
-   * is `true`.
-   *
-   * On iOS, when `useWebKit=true`, this prop will not work.
-   */
-  scalesPageToFit?: ?boolean,
-
-  /**
-   * Boolean that determines whether HTML5 audio and video requires the user
-   * to tap them before they start playing. The default value is `true`.
-   */
-  mediaPlaybackRequiresUserAction?: ?boolean,
-
-  /**
-   * List of origin strings to allow being navigated to. The strings allow
-   * wildcards and get matched against *just* the origin (not the full URL).
-   * If the user taps to navigate to a new page but the new page is not in
-   * this whitelist, we will open the URL in Safari.
-   * The default whitelisted origins are "http://*" and "https://*".
-   */
-  originWhitelist?: $ReadOnlyArray<string>,
-
-  /**
-   * Override the native component used to render the WebView. Enables a custom native
-   * WebView which uses the same JavaScript as the original WebView.
-   */
-  nativeConfig?: ?WebViewNativeConfig,
-
-  style?: ViewStyleProp,
-  children: Node,
-|}>;

package.json

@@ -32,9 +32,11 @@
     "@types/react": "16.7.7",
     "@types/react-native": "^0.57.6",
     "eslint": "5.9.0",
+    "eslint-config-airbnb": "17.1.0",
     "eslint-config-airbnb-base": "13.1.0",
     "eslint-config-prettier": "3.3.0",
     "eslint-plugin-import": "2.14.0",
+    "eslint-plugin-jsx-a11y": "6.1.2",
     "eslint-plugin-react": "7.11.1",
     "eslint-plugin-react-native": "3.5.0",
     "eslint-plugin-typescript": "0.14.0",
@@ -49,4 +51,4 @@
     "type": "git",
     "url": "https://github.com/react-native-community/react-native-webview.git"
   }
-}
+}

src/WebView.android.tsx

@@ -25,7 +25,24 @@ import {
   WebViewSource,
   WebViewProgressEvent,
 } from './types/WebViewTypes';
-import { isWebViewUriSource } from './utils';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  hidden: {
+    height: 0,
+    flex: 0, // disable 'flex:1' when hiding a View
+  },
+  loadingView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  loadingProgressBar: {
+    height: 20,
+  },
+});
 
 enum WebViewState {
   IDLE = 'IDLE',
@@ -33,6 +50,9 @@ enum WebViewState {
   ERROR = 'ERROR',
 }
 
+const isWebViewUriSource = (source: any): source is WebViewSourceUri =>
+  typeof source !== 'number' && !('html' in source);
+
 const defaultRenderLoading = (): React.ReactNode => (
   <View style={styles.loadingView}>
     <ActivityIndicator style={styles.loadingProgressBar} />
@@ -44,6 +64,8 @@ type State = {
   lastErrorEvent: WebViewError | null;
 };
 
+const RNCWebView = requireNativeComponent('RNCWebView');
+
 /**
  * Renders a native WebView.
  */
@@ -74,6 +96,117 @@ export default class WebView extends React.Component<
 
   webViewRef = React.createRef<React.ComponentClass>();
 
+  goForward = (): void => {
+    UIManager.dispatchViewManagerCommand(
+      this.getWebViewHandle(),
+      UIManager.RNCWebView.Commands.goForward,
+      null,
+    );
+  };
+
+  goBack = (): void => {
+    UIManager.dispatchViewManagerCommand(
+      this.getWebViewHandle(),
+      UIManager.RNCWebView.Commands.goBack,
+      null,
+    );
+  };
+
+  reload = (): void => {
+    this.setState({
+      viewState: WebViewState.LOADING,
+    });
+    UIManager.dispatchViewManagerCommand(
+      this.getWebViewHandle(),
+      UIManager.RNCWebView.Commands.reload,
+      null,
+    );
+  };
+
+  stopLoading = (): void => {
+    UIManager.dispatchViewManagerCommand(
+      this.getWebViewHandle(),
+      UIManager.RNCWebView.Commands.stopLoading,
+      null,
+    );
+  };
+
+  postMessage = (data: string): void => {
+    UIManager.dispatchViewManagerCommand(
+      this.getWebViewHandle(),
+      UIManager.RNCWebView.Commands.postMessage,
+      [String(data)],
+    );
+  };
+
+  /**
+   * Injects a javascript string into the referenced WebView. Deliberately does not
+   * return a response because using eval() to return a response breaks this method
+   * on pages with a Content Security Policy that disallows eval(). If you need that
+   * functionality, look into postMessage/onMessage.
+   */
+  injectJavaScript = (data: string): void => {
+    UIManager.dispatchViewManagerCommand(
+      this.getWebViewHandle(),
+      UIManager.RNCWebView.Commands.injectJavaScript,
+      [data],
+    );
+  };
+
+  /**
+   * We return an event with a bunch of fields including:
+   *  url, title, loading, canGoBack, canGoForward
+   */
+  updateNavigationState = (event: WebViewNavigationEvent): void => {
+    if (this.props.onNavigationStateChange) {
+      this.props.onNavigationStateChange(event.nativeEvent);
+    }
+  };
+
+  getWebViewHandle = (): number | null =>
+    findNodeHandle(this.webViewRef.current);
+
+  onLoadingStart = (event: WebViewNavigationEvent): void => {
+    const { onLoadStart } = this.props;
+    onLoadStart && onLoadStart(event);
+    this.updateNavigationState(event);
+  };
+
+  onLoadingError = (event: WebViewErrorEvent): void => {
+    event.persist(); // persist this event because we need to store it
+    const { onError, onLoadEnd } = this.props;
+    onError && onError(event);
+    onLoadEnd && onLoadEnd(event);
+    console.warn('Encountered an error loading page', event.nativeEvent);
+
+    this.setState({
+      lastErrorEvent: event.nativeEvent,
+      viewState: WebViewState.ERROR,
+    });
+  };
+
+  onLoadingFinish = (event: WebViewNavigationEvent): void => {
+    const { onLoad, onLoadEnd } = this.props;
+    onLoad && onLoad(event);
+    onLoadEnd && onLoadEnd(event);
+    this.setState({
+      viewState: WebViewState.IDLE,
+    });
+    this.updateNavigationState(event);
+  };
+
+  onMessage = (event: WebViewMessageEvent): void => {
+    const { onMessage } = this.props;
+    onMessage && onMessage(event);
+  };
+
+  onLoadingProgress = (
+    event: NativeSyntheticEvent<WebViewProgressEvent>,
+  ): void => {
+    const { onLoadProgress } = this.props;
+    onLoadProgress && onLoadProgress(event);
+  };
+
   render(): React.ReactNode {
     let otherView = null;
 
@@ -180,132 +313,4 @@ export default class WebView extends React.Component<
       </View>
     );
   }
-
-  goForward = () => {
-    UIManager.dispatchViewManagerCommand(
-      this.getWebViewHandle(),
-      UIManager.RNCWebView.Commands.goForward,
-      null,
-    );
-  };
-
-  goBack = () => {
-    UIManager.dispatchViewManagerCommand(
-      this.getWebViewHandle(),
-      UIManager.RNCWebView.Commands.goBack,
-      null,
-    );
-  };
-
-  reload = () => {
-    this.setState({
-      viewState: WebViewState.LOADING,
-    });
-    UIManager.dispatchViewManagerCommand(
-      this.getWebViewHandle(),
-      UIManager.RNCWebView.Commands.reload,
-      null,
-    );
-  };
-
-  stopLoading = () => {
-    UIManager.dispatchViewManagerCommand(
-      this.getWebViewHandle(),
-      UIManager.RNCWebView.Commands.stopLoading,
-      null,
-    );
-  };
-
-  postMessage = (data: string) => {
-    UIManager.dispatchViewManagerCommand(
-      this.getWebViewHandle(),
-      UIManager.RNCWebView.Commands.postMessage,
-      [String(data)],
-    );
-  };
-
-  /**
-   * Injects a javascript string into the referenced WebView. Deliberately does not
-   * return a response because using eval() to return a response breaks this method
-   * on pages with a Content Security Policy that disallows eval(). If you need that
-   * functionality, look into postMessage/onMessage.
-   */
-  injectJavaScript = (data: string) => {
-    UIManager.dispatchViewManagerCommand(
-      this.getWebViewHandle(),
-      UIManager.RNCWebView.Commands.injectJavaScript,
-      [data],
-    );
-  };
-
-  /**
-   * We return an event with a bunch of fields including:
-   *  url, title, loading, canGoBack, canGoForward
-   */
-  updateNavigationState = (event: WebViewNavigationEvent) => {
-    if (this.props.onNavigationStateChange) {
-      this.props.onNavigationStateChange(event.nativeEvent);
-    }
-  };
-
-  getWebViewHandle = () => findNodeHandle(this.webViewRef.current);
-
-  onLoadingStart = (event: WebViewNavigationEvent) => {
-    const onLoadStart = this.props.onLoadStart;
-    onLoadStart && onLoadStart(event);
-    this.updateNavigationState(event);
-  };
-
-  onLoadingError = (event: WebViewErrorEvent) => {
-    event.persist(); // persist this event because we need to store it
-    const { onError, onLoadEnd } = this.props;
-    onError && onError(event);
-    onLoadEnd && onLoadEnd(event);
-    console.warn('Encountered an error loading page', event.nativeEvent);
-
-    this.setState({
-      lastErrorEvent: event.nativeEvent,
-      viewState: WebViewState.ERROR,
-    });
-  };
-
-  onLoadingFinish = (event: WebViewNavigationEvent) => {
-    const { onLoad, onLoadEnd } = this.props;
-    onLoad && onLoad(event);
-    onLoadEnd && onLoadEnd(event);
-    this.setState({
-      viewState: WebViewState.IDLE,
-    });
-    this.updateNavigationState(event);
-  };
-
-  onMessage = (event: WebViewMessageEvent) => {
-    const { onMessage } = this.props;
-    onMessage && onMessage(event);
-  };
-
-  onLoadingProgress = (event: NativeSyntheticEvent<WebViewProgressEvent>) => {
-    const { onLoadProgress } = this.props;
-    onLoadProgress && onLoadProgress(event);
-  };
 }
-
-const RNCWebView = requireNativeComponent('RNCWebView');
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  hidden: {
-    height: 0,
-    flex: 0, // disable 'flex:1' when hiding a View
-  },
-  loadingView: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  loadingProgressBar: {
-    height: 20,
-  },
-});

src/WebView.ios.tsx

@@ -31,17 +31,19 @@ import {
 type DecelerationRate = number | 'normal' | 'fast';
 
 // Imported from https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollView/processDecelerationRate.js
-function processDecelerationRate(decelerationRate?: DecelerationRate) {
+function processDecelerationRate(
+  decelerationRate?: DecelerationRate,
+): number | undefined {
   if (decelerationRate === 'normal') {
-    decelerationRate = 0.998;
-  } else if (decelerationRate === 'fast') {
-    decelerationRate = 0.99;
+    return 0.998;
+  }
+  if (decelerationRate === 'fast') {
+    return 0.99;
   }
   return decelerationRate;
 }
 
-const RNCUIWebViewManager = NativeModules.RNCUIWebViewManager;
-const RNCWKWebViewManager = NativeModules.RNCWKWebViewManager;
+const { RNCWKWebViewManager, RNCUIWebViewManager } = NativeModules;
 
 const BGWASH = 'rgba(255,255,255,0.8)';
 
@@ -67,7 +69,7 @@ type State = {
   lastErrorEvent: WebViewError | null;
 };
 
-const defaultRenderLoading = () => (
+const defaultRenderLoading = (): React.ReactNode => (
   <View style={styles.loadingView}>
     <ActivityIndicator />
   </View>
@@ -76,7 +78,7 @@ const defaultRenderError = (
   errorDomain: string | undefined,
   errorCode: number,
   errorDesc: string,
-) => (
+): React.ReactNode => (
   <View style={styles.errorContainer}>
     <Text style={styles.errorTextTitle}>Error loading page</Text>
     <Text style={styles.errorText}>{`Domain: ${errorDomain}`}</Text>
@@ -120,7 +122,7 @@ export default class WebView extends React.Component<
     originWhitelist: WebViewShared.defaultOriginWhitelist,
   };
 
-  static isFileUploadSupported = async () =>
+  static isFileUploadSupported = async (): Promise<boolean> =>
     // no native implementation for iOS, depends only on permissions
     true;
 
@@ -152,149 +154,14 @@ export default class WebView extends React.Component<
     }
   }
 
-  render(): React.ReactNode {
-    let otherView = null;
-
-    let scalesPageToFit;
-
-    if (this.props.useWebKit) {
-      ({ scalesPageToFit } = this.props);
-    } else {
-      ({ scalesPageToFit = true } = this.props);
-    }
-
-    if (this.state.viewState === WebViewState.LOADING) {
-      otherView = (this.props.renderLoading || defaultRenderLoading)();
-    } else if (this.state.viewState === WebViewState.ERROR) {
-      const errorEvent = this.state.lastErrorEvent;
-      invariant(errorEvent != null, 'lastErrorEvent expected to be non-null');
-      otherView = (this.props.renderError || defaultRenderError)(
-        errorEvent!.domain,
-        errorEvent!.code,
-        errorEvent!.description,
-      );
-    } else if (this.state.viewState !== WebViewState.IDLE) {
-      console.error(
-        `RNCWebView invalid state encountered: ${this.state.viewState}`,
-      );
-    }
-
-    const webViewStyles = [styles.container, styles.webView, this.props.style];
-    if (
-      this.state.viewState === WebViewState.LOADING
-      || this.state.viewState === WebViewState.ERROR
-    ) {
-      // if we're in either LOADING or ERROR states, don't show the webView
-      webViewStyles.push(styles.hidden);
-    }
-
-    const nativeConfig = this.props.nativeConfig || {};
-
-    let viewManager = nativeConfig.viewManager;
-
-    if (this.props.useWebKit) {
-      viewManager = viewManager || RNCWKWebViewManager;
-    } else {
-      viewManager = viewManager || RNCUIWebViewManager;
-    }
-
-    const compiledWhitelist = [
-      'about:blank',
-      ...(this.props.originWhitelist || []),
-    ].map(WebViewShared.originWhitelistToRegex);
-    const onShouldStartLoadWithRequest = (
-      event: NativeSyntheticEvent<WebViewIOSLoadRequestEvent>,
-    ) => {
-      let shouldStart = true;
-      const { url } = event.nativeEvent;
-      const origin = WebViewShared.extractOrigin(url);
-      const passesWhitelist = compiledWhitelist.some(x =>
-        new RegExp(x).test(origin),
-      );
-      shouldStart = shouldStart && passesWhitelist;
-      if (!passesWhitelist) {
-        Linking.openURL(url);
-      }
-      if (this.props.onShouldStartLoadWithRequest) {
-        shouldStart
-          = shouldStart
-          && this.props.onShouldStartLoadWithRequest(event.nativeEvent);
-      }
-      invariant(viewManager != null, 'viewManager expected to be non-null');
-      viewManager.startLoadWithResult(
-        !!shouldStart,
-        event.nativeEvent.lockIdentifier,
-      );
-    };
-
-    const decelerationRate = processDecelerationRate(
-      this.props.decelerationRate,
-    );
-
-    let source: WebViewSource = this.props.source || {};
-    if (!this.props.source && this.props.html) {
-      source = { html: this.props.html };
-    } else if (!this.props.source && this.props.url) {
-      source = { uri: this.props.url };
-    }
-
-    const messagingEnabled = typeof this.props.onMessage === 'function';
-
-    let NativeWebView = nativeConfig.component;
-
-    if (this.props.useWebKit) {
-      NativeWebView = NativeWebView || RNCWKWebView;
-    } else {
-      NativeWebView = NativeWebView || RNCUIWebView;
-    }
-
-    const webView = (
-      <NativeWebView
-        ref={this.webViewRef}
-        key="webViewKey"
-        style={webViewStyles}
-        source={Image.resolveAssetSource(source as WebViewSourceUri)} // typing issue of not compatible of WebViewSourceHtml in react native.
-        injectedJavaScript={this.props.injectedJavaScript}
-        bounces={this.props.bounces}
-        scrollEnabled={this.props.scrollEnabled}
-        pagingEnabled={this.props.pagingEnabled}
-        decelerationRate={decelerationRate}
-        contentInset={this.props.contentInset}
-        automaticallyAdjustContentInsets={
-          this.props.automaticallyAdjustContentInsets
-        }
-        hideKeyboardAccessoryView={this.props.hideKeyboardAccessoryView}
-        allowsBackForwardNavigationGestures={
-          this.props.allowsBackForwardNavigationGestures
-        }
-        userAgent={this.props.userAgent}
-        onLoadingStart={this._onLoadingStart}
-        onLoadingFinish={this._onLoadingFinish}
-        onLoadingError={this._onLoadingError}
-        onLoadingProgress={this._onLoadingProgress}
-        messagingEnabled={messagingEnabled}
-        onMessage={this._onMessage}
-        onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
-        scalesPageToFit={scalesPageToFit}
-        allowsInlineMediaPlayback={this.props.allowsInlineMediaPlayback}
-        mediaPlaybackRequiresUserAction={
-          this.props.mediaPlaybackRequiresUserAction
-        }
-        dataDetectorTypes={this.props.dataDetectorTypes}
-        allowsLinkPreview={this.props.allowsLinkPreview}
-        {...nativeConfig.props}
-      />
-    );
-
-    return (
-      <View style={styles.container}>
-        {webView}
-        {otherView}
-      </View>
-    );
-  }
-
-  _getCommands() {
+  _getCommands(): {
+    goForward: () => void,
+    goBack: () => void,
+    reload: () => void,
+    stopLoading: () => void,
+    postMessage: () => void,
+    injectJavaScript: () => void,
+  } {
     if (!this.props.useWebKit) {
       return UIManager.RNCUIWebView.Commands;
     }
@@ -305,7 +172,7 @@ export default class WebView extends React.Component<
   /**
    * Go forward one page in the web view's history.
    */
-  goForward = () => {
+  goForward = (): void => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       this._getCommands().goForward,
@@ -316,7 +183,7 @@ export default class WebView extends React.Component<
   /**
    * Go back one page in the web view's history.
    */
-  goBack = () => {
+  goBack = (): void => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       this._getCommands().goBack,
@@ -327,7 +194,7 @@ export default class WebView extends React.Component<
   /**
    * Reloads the current page.
    */
-  reload = () => {
+  reload = (): void => {
     this.setState({ viewState: WebViewState.LOADING });
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
@@ -339,7 +206,7 @@ export default class WebView extends React.Component<
   /**
    * Stop loading the current page.
    */
-  stopLoading = () => {
+  stopLoading = (): void => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       this._getCommands().stopLoading,
@@ -357,7 +224,7 @@ export default class WebView extends React.Component<
    * document.addEventListener('message', e => { document.title = e.data; });
    * ```
    */
-  postMessage = (data: string) => {
+  postMessage = (data: string): void => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       this._getCommands().postMessage,
@@ -371,7 +238,7 @@ export default class WebView extends React.Component<
    * on pages with a Content Security Policy that disallows eval(). If you need that
    * functionality, look into postMessage/onMessage.
    */
-  injectJavaScript = (data: string) => {
+  injectJavaScript = (data: string): void => {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       this._getCommands().injectJavaScript,
@@ -383,7 +250,7 @@ export default class WebView extends React.Component<
    * We return an event with a bunch of fields including:
    *  url, title, loading, canGoBack, canGoForward
    */
-  _updateNavigationState = (event: WebViewNavigationEvent) => {
+  _updateNavigationState = (event: WebViewNavigationEvent): void => {
     if (this.props.onNavigationStateChange) {
       this.props.onNavigationStateChange(event.nativeEvent);
     }
@@ -392,15 +259,16 @@ export default class WebView extends React.Component<
   /**
    * Returns the native `WebView` node.
    */
-  getWebViewHandle = () => findNodeHandle(this.webViewRef.current);
+  getWebViewHandle = (): number | null =>
+    findNodeHandle(this.webViewRef.current);
 
-  _onLoadingStart = (event: WebViewNavigationEvent) => {
+  _onLoadingStart = (event: WebViewNavigationEvent): void => {
     const onLoadStart = this.props.onLoadStart;
     onLoadStart && onLoadStart(event);
     this._updateNavigationState(event);
   };
 
-  _onLoadingError = (event: WebViewErrorEvent) => {
+  _onLoadingError = (event: WebViewErrorEvent): void => {
     event.persist(); // persist this event because we need to store it
     const { onError, onLoadEnd } = this.props;
     onError && onError(event);
@@ -413,7 +281,7 @@ export default class WebView extends React.Component<
     });
   };
 
-  _onLoadingFinish = (event: WebViewNavigationEvent) => {
+  _onLoadingFinish = (event: WebViewNavigationEvent): void => {
     const { onLoad, onLoadEnd } = this.props;
     onLoad && onLoad(event);
     onLoadEnd && onLoadEnd(event);
@@ -423,17 +291,19 @@ export default class WebView extends React.Component<
     this._updateNavigationState(event);
   };
 
-  _onMessage = (event: WebViewMessageEvent) => {
+  _onMessage = (event: WebViewMessageEvent): void => {
     const { onMessage } = this.props;
     onMessage && onMessage(event);
   };
 
-  _onLoadingProgress = (event: NativeSyntheticEvent<WebViewProgressEvent>) => {
+  _onLoadingProgress = (
+    event: NativeSyntheticEvent<WebViewProgressEvent>,
+  ): void => {
     const { onLoadProgress } = this.props;
     onLoadProgress && onLoadProgress(event);
   };
 
-  componentDidUpdate(prevProps: WebViewSharedProps) {
+  componentDidUpdate(prevProps: WebViewSharedProps): void {
     if (!(prevProps.useWebKit && this.props.useWebKit)) {
       return;
     }
@@ -455,13 +325,158 @@ export default class WebView extends React.Component<
       | 'allowsInlineMediaPlayback'
       | 'mediaPlaybackRequiresUserAction'
       | 'dataDetectorTypes',
-  ) {
+  ): void {
     if (this.props[propName] !== prevProps[propName]) {
       console.error(
         `Changes to property ${propName} do nothing after the initial render.`,
       );
     }
   }
+
+  render(): React.ReactNode {
+    let otherView = null;
+
+    let scalesPageToFit;
+
+    if (this.props.useWebKit) {
+      ({ scalesPageToFit } = this.props);
+    } else {
+      ({ scalesPageToFit = true } = this.props);
+    }
+
+    if (this.state.viewState === WebViewState.LOADING) {
+      otherView = (this.props.renderLoading || defaultRenderLoading)();
+    } else if (this.state.viewState === WebViewState.ERROR) {
+      const errorEvent = this.state.lastErrorEvent;
+      if (errorEvent) {
+        otherView = (this.props.renderError || defaultRenderError)(
+          errorEvent.domain,
+          errorEvent.code,
+          errorEvent.description,
+        );
+      } else {
+        invariant(errorEvent != null, 'lastErrorEvent expected to be non-null');
+      }
+    } else if (this.state.viewState !== WebViewState.IDLE) {
+      console.error(
+        `RNCWebView invalid state encountered: ${this.state.viewState}`,
+      );
+    }
+
+    const webViewStyles = [styles.container, styles.webView, this.props.style];
+    if (
+      this.state.viewState === WebViewState.LOADING
+      || this.state.viewState === WebViewState.ERROR
+    ) {
+      // if we're in either LOADING or ERROR states, don't show the webView
+      webViewStyles.push(styles.hidden);
+    }
+
+    const nativeConfig = this.props.nativeConfig || {};
+
+    let { viewManager } = nativeConfig;
+
+    if (this.props.useWebKit) {
+      viewManager = viewManager || RNCWKWebViewManager;
+    } else {
+      viewManager = viewManager || RNCUIWebViewManager;
+    }
+
+    const compiledWhitelist = [
+      'about:blank',
+      ...(this.props.originWhitelist || []),
+    ].map(WebViewShared.originWhitelistToRegex);
+    const onShouldStartLoadWithRequest = (
+      event: NativeSyntheticEvent<WebViewIOSLoadRequestEvent>,
+    ): void => {
+      let shouldStart = true;
+      const { url } = event.nativeEvent;
+      const origin = WebViewShared.extractOrigin(url);
+      const passesWhitelist = compiledWhitelist.some(
+        (x): boolean => new RegExp(x).test(origin),
+      );
+      shouldStart = shouldStart && passesWhitelist;
+      if (!passesWhitelist) {
+        Linking.openURL(url);
+      }
+      if (this.props.onShouldStartLoadWithRequest) {
+        shouldStart
+          = shouldStart
+          && this.props.onShouldStartLoadWithRequest(event.nativeEvent);
+      }
+      invariant(viewManager != null, 'viewManager expected to be non-null');
+      viewManager.startLoadWithResult(
+        !!shouldStart,
+        event.nativeEvent.lockIdentifier,
+      );
+    };
+
+    const decelerationRate = processDecelerationRate(
+      this.props.decelerationRate,
+    );
+
+    let source: WebViewSource = this.props.source || {};
+    if (!this.props.source && this.props.html) {
+      source = { html: this.props.html };
+    } else if (!this.props.source && this.props.url) {
+      source = { uri: this.props.url };
+    }
+
+    const messagingEnabled = typeof this.props.onMessage === 'function';
+
+    let NativeWebView = nativeConfig.component;
+
+    if (this.props.useWebKit) {
+      NativeWebView = NativeWebView || RNCWKWebView;
+    } else {
+      NativeWebView = NativeWebView || RNCUIWebView;
+    }
+
+    const webView = (
+      <NativeWebView
+        ref={this.webViewRef}
+        key="webViewKey"
+        style={webViewStyles}
+        source={Image.resolveAssetSource(source as WebViewSourceUri)} // typing issue of not compatible of WebViewSourceHtml in react native.
+        injectedJavaScript={this.props.injectedJavaScript}
+        bounces={this.props.bounces}
+        scrollEnabled={this.props.scrollEnabled}
+        pagingEnabled={this.props.pagingEnabled}
+        decelerationRate={decelerationRate}
+        contentInset={this.props.contentInset}
+        automaticallyAdjustContentInsets={
+          this.props.automaticallyAdjustContentInsets
+        }
+        hideKeyboardAccessoryView={this.props.hideKeyboardAccessoryView}
+        allowsBackForwardNavigationGestures={
+          this.props.allowsBackForwardNavigationGestures
+        }
+        userAgent={this.props.userAgent}
+        onLoadingStart={this._onLoadingStart}
+        onLoadingFinish={this._onLoadingFinish}
+        onLoadingError={this._onLoadingError}
+        onLoadingProgress={this._onLoadingProgress}
+        messagingEnabled={messagingEnabled}
+        onMessage={this._onMessage}
+        onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
+        scalesPageToFit={scalesPageToFit}
+        allowsInlineMediaPlayback={this.props.allowsInlineMediaPlayback}
+        mediaPlaybackRequiresUserAction={
+          this.props.mediaPlaybackRequiresUserAction
+        }
+        dataDetectorTypes={this.props.dataDetectorTypes}
+        allowsLinkPreview={this.props.allowsLinkPreview}
+        {...nativeConfig.props}
+      />
+    );
+
+    return (
+      <View style={styles.container}>
+        {webView}
+        {otherView}
+      </View>
+    );
+  }
 }
 
 const RNCUIWebView = requireNativeComponent('RNCUIWebView');

src/index.ts

@@ -1,2 +0,0 @@
-export * from './types/WebViewTypes';
-export * from './WebView.ios';

src/test.ts

@@ -1,4 +0,0 @@
-const a
-  = 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa';
-
-console.log(a);

src/test.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-const Test: React.SFC<{
-  show: boolean;
-}> = ({ show }): React.ReactElement<string> => show && <div />;
-
-const a =
-  'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa';
-
-console.log(a);
-
-export default Test;

src/utils.ts

@@ -1,4 +0,0 @@
-import { WebViewSourceUri } from './types/WebViewTypes';
-
-export const isWebViewUriSource = (source: any): source is WebViewSourceUri =>
-  typeof source !== 'number' && !('html' in source);

tsconfig.json

@@ -1,20 +1,22 @@
 {
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
     "esModuleInterop": true,
     "jsx": "react-native",
     "lib": ["es6"],
     "module": "esnext",
     "moduleResolution": "node",
-    "noEmit": true,
     "noFallthroughCasesInSwitch": true,
     "noImplicitReturns": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
+    "outDir": "./types/",
     "pretty": true,
     "skipLibCheck": true,
     "strict": true
   },
-  "include": ["src", "./typings.d.ts", "types", "test"],
-  "exclude": ["node_modules"]
+  "include": ["src", "index.js"],
+  "exclude": ["node_modules", "index.flow.js", "types"]
 }

types/WebView.android.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+import { NativeSyntheticEvent } from 'react-native';
+import { WebViewError, WebViewSharedProps, WebViewProgressEvent } from './types/WebViewTypes';
+declare enum WebViewState {
+    IDLE = "IDLE",
+    LOADING = "LOADING",
+    ERROR = "ERROR"
+}
+declare type State = {
+    viewState: WebViewState;
+    lastErrorEvent: WebViewError | null;
+};
+/**
+ * Renders a native WebView.
+ */
+export default class WebView extends React.Component<WebViewSharedProps, State> {
+    static defaultProps: {
+        overScrollMode: string;
+        javaScriptEnabled: boolean;
+        thirdPartyCookiesEnabled: boolean;
+        scalesPageToFit: boolean;
+        allowFileAccess: boolean;
+        saveFormDataDisabled: boolean;
+        originWhitelist: string[];
+    };
+    static isFileUploadSupported: () => Promise<boolean>;
+    state: State;
+    webViewRef: React.RefObject<React.ComponentClass<{}, any>>;
+    goForward: () => void;
+    goBack: () => void;
+    reload: () => void;
+    stopLoading: () => void;
+    postMessage: (data: string) => void;
+    /**
+     * Injects a javascript string into the referenced WebView. Deliberately does not
+     * return a response because using eval() to return a response breaks this method
+     * on pages with a Content Security Policy that disallows eval(). If you need that
+     * functionality, look into postMessage/onMessage.
+     */
+    injectJavaScript: (data: string) => void;
+    /**
+     * We return an event with a bunch of fields including:
+     *  url, title, loading, canGoBack, canGoForward
+     */
+    updateNavigationState: (event: NativeSyntheticEvent<import("./types/WebViewTypes").WebViewNavigation>) => void;
+    getWebViewHandle: () => number | null;
+    onLoadingStart: (event: NativeSyntheticEvent<import("./types/WebViewTypes").WebViewNavigation>) => void;
+    onLoadingError: (event: NativeSyntheticEvent<WebViewError>) => void;
+    onLoadingFinish: (event: NativeSyntheticEvent<import("./types/WebViewTypes").WebViewNavigation>) => void;
+    onMessage: (event: NativeSyntheticEvent<import("./types/WebViewTypes").WebViewMessage>) => void;
+    onLoadingProgress: (event: NativeSyntheticEvent<WebViewProgressEvent>) => void;
+    render(): React.ReactNode;
+}
+export {};

types/WebView.ios.d.ts

@@ -0,0 +1,114 @@
+import React from 'react';
+import { NativeSyntheticEvent } from 'react-native';
+import { WebViewError, WebViewSharedProps, WebViewProgressEvent } from './types/WebViewTypes';
+declare enum WebViewState {
+    IDLE = "IDLE",
+    LOADING = "LOADING",
+    ERROR = "ERROR"
+}
+declare enum NavigationType {
+    click = "click",
+    formsubmit = "formsubmit",
+    backforward = "backforward",
+    reload = "reload",
+    formresubmit = "formresubmit",
+    other = "other"
+}
+declare type State = {
+    viewState: WebViewState;
+    lastErrorEvent: WebViewError | null;
+};
+/**
+ * `WebView` renders web content in a native view.
+ *
+ *```
+ * import React, { Component } from 'react';
+ * import { WebView } from 'react-native';
+ *
+ * class MyWeb extends Component {
+ *   render() {
+ *     return (
+ *       <WebView
+ *         source={{uri: 'https://github.com/facebook/react-native'}}
+ *         style={{marginTop: 20}}
+ *       />
+ *     );
+ *   }
+ * }
+ *```
+ *
+ * You can use this component to navigate back and forth in the web view's
+ * history and configure various properties for the web content.
+ */
+export default class WebView extends React.Component<WebViewSharedProps, State> {
+    static JSNavigationScheme: string;
+    static NavigationType: typeof NavigationType;
+    static defaultProps: {
+        useWebKit: boolean;
+        originWhitelist: string[];
+    };
+    static isFileUploadSupported: () => Promise<boolean>;
+    state: State;
+    webViewRef: React.RefObject<React.ComponentClass<{}, any>>;
+    UNSAFE_componentWillMount(): void;
+    _getCommands(): {
+        goForward: () => void;
+        goBack: () => void;
+        reload: () => void;
+        stopLoading: () => void;
+        postMessage: () => void;
+        injectJavaScript: () => void;
+    };
+    /**
+     * Go forward one page in the web view's history.
+     */
+    goForward: () => void;
+    /**
+     * Go back one page in the web view's history.
+     */
+    goBack: () => void;
+    /**
+     * Reloads the current page.
+     */
+    reload: () => void;
+    /**
+     * Stop loading the current page.
+     */
+    stopLoading: () => void;
+    /**
+     * Posts a message to the web view, which will emit a `message` event.
+     * Accepts one argument, `data`, which must be a string.
+     *
+     * In your webview, you'll need to something like the following.
+     *
+     * ```js
+     * document.addEventListener('message', e => { document.title = e.data; });
+     * ```
+     */
+    postMessage: (data: string) => void;
+    /**
+     * Injects a javascript string into the referenced WebView. Deliberately does not
+     * return a response because using eval() to return a response breaks this method
+     * on pages with a Content Security Policy that disallows eval(). If you need that
+     * functionality, look into postMessage/onMessage.
+     */
+    injectJavaScript: (data: string) => void;
+    /**
+     * We return an event with a bunch of fields including:
+     *  url, title, loading, canGoBack, canGoForward
+     */
+    _updateNavigationState: (event: NativeSyntheticEvent<import("./types/WebViewTypes").WebViewNavigation>) => void;
+    /**
+     * Returns the native `WebView` node.
+     */
+    getWebViewHandle: () => number | null;
+    _onLoadingStart: (event: NativeSyntheticEvent<import("./types/WebViewTypes").WebViewNavigation>) => void;
+    _onLoadingError: (event: NativeSyntheticEvent<WebViewError>) => void;
+    _onLoadingFinish: (event: NativeSyntheticEvent<import("./types/WebViewTypes").WebViewNavigation>) => void;
+    _onMessage: (event: NativeSyntheticEvent<import("./types/WebViewTypes").WebViewMessage>) => void;
+    _onLoadingProgress: (event: NativeSyntheticEvent<WebViewProgressEvent>) => void;
+    componentDidUpdate(prevProps: WebViewSharedProps): void;
+    _showRedboxOnPropChanges(prevProps: WebViewSharedProps, propName: 'allowsInlineMediaPlayback' | 'mediaPlaybackRequiresUserAction' | 'dataDetectorTypes'): void;
+    render(): React.ReactNode;
+}
+export {};

types/WebViewShared.d.ts

@@ -0,0 +1,6 @@
+declare const WebViewShared: {
+    defaultOriginWhitelist: string[];
+    extractOrigin: (url: string) => string;
+    originWhitelistToRegex: (originWhitelist: string) => string;
+};
+export default WebViewShared;

types/types/WebViewTypes.d.ts

@@ -0,0 +1,358 @@
+import { ComponentType, ReactElement, ReactNode } from 'react';
+import { Insets, NativeSyntheticEvent, StyleProp, ViewProps, ViewStyle } from 'react-native';
+declare module 'react-native' {
+    interface UIManagerStatic {
+        dispatchViewManagerCommand(node: any, callback: any, x: any): void;
+        RNCUIWebView: any;
+        RNCWKWebView: any;
+        RNCWebView: any;
+    }
+}
+export interface WebViewNativeEvent {
+    readonly url: string;
+    readonly loading: boolean;
+    readonly title: string;
+    readonly canGoBack: boolean;
+    readonly canGoForward: boolean;
+}
+export interface WebViewIOSLoadRequestEvent extends WebViewNativeEvent {
+    target: number;
+    lockIdentifier: number;
+    navigationType: 'click' | 'formsubmit' | 'backforward' | 'reload' | 'formresubmit' | 'other';
+}
+export interface WebViewProgressEvent extends WebViewNativeEvent {
+    readonly progress: number;
+}
+export interface WebViewNavigation extends WebViewNativeEvent {
+    readonly navigationType: 'click' | 'formsubmit' | 'backforward' | 'reload' | 'formresubmit' | 'other';
+}
+export interface WebViewMessage extends WebViewNativeEvent {
+    readonly data: string;
+}
+export interface WebViewError extends WebViewNativeEvent {
+    readonly domain?: string;
+    readonly code: number;
+    readonly description: string;
+}
+export declare type WebViewEvent = NativeSyntheticEvent<WebViewNativeEvent>;
+export declare type WebViewNavigationEvent = NativeSyntheticEvent<WebViewNavigation>;
+export declare type WebViewMessageEvent = NativeSyntheticEvent<WebViewMessage>;
+export declare type WebViewErrorEvent = NativeSyntheticEvent<WebViewError>;
+export declare type DataDetectorTypes = 'phoneNumber' | 'link' | 'address' | 'calendarEvent' | 'trackingNumber' | 'flightNumber' | 'lookupSuggestion' | 'none' | 'all';
+export declare type OverScrollModeType = 'always' | 'content' | 'never';
+export interface WebViewSourceUri {
+    /**
+     * The URI to load in the `WebView`. Can be a local or remote file.
+     */
+    uri?: string;
+    /**
+     * The HTTP Method to use. Defaults to GET if not specified.
+     * NOTE: On Android, only GET and POST are supported.
+     */
+    method?: string;
+    /**
+     * Additional HTTP headers to send with the request.
+     * NOTE: On Android, this can only be used with GET requests.
+     */
+    headers?: {
+        [key: string]: string;
+    };
+    /**
+     * The HTTP body to send with the request. This must be a valid
+     * UTF-8 string, and will be sent exactly as specified, with no
+     * additional encoding (e.g. URL-escaping or base64) applied.
+     * NOTE: On Android, this can only be used with POST requests.
+     */
+    body?: string;
+}
+export interface WebViewSourceHtml {
+    /**
+     * A static HTML page to display in the WebView.
+     */
+    html?: string;
+    /**
+     * The base URL to be used for any relative links in the HTML.
+     */
+    baseUrl?: string;
+}
+export declare type WebViewSource = WebViewSourceUri | WebViewSourceHtml;
+export interface WebViewNativeConfig {
+    component?: ComponentType<WebViewSharedProps>;
+    props?: any;
+    viewManager?: any;
+}
+export interface IOSWebViewProps {
+    /**
+     * If true, use WKWebView instead of UIWebView.
+     * @platform ios
+     */
+    useWebKit?: boolean;
+    /**
+     * Boolean value that determines whether the web view bounces
+     * when it reaches the edge of the content. The default value is `true`.
+     * @platform ios
+     */
+    bounces?: boolean;
+    /**
+     * A floating-point number that determines how quickly the scroll view
+     * decelerates after the user lifts their finger. You may also use the
+     * string shortcuts `"normal"` and `"fast"` which match the underlying iOS
+     * settings for `UIScrollViewDecelerationRateNormal` and
+     * `UIScrollViewDecelerationRateFast` respectively:
+     *
+     *   - normal: 0.998
+     *   - fast: 0.99 (the default for iOS web view)
+     * @platform ios
+     */
+    decelerationRate?: 'fast' | 'normal' | number;
+    /**
+     * Boolean value that determines whether scrolling is enabled in the
+     * `WebView`. The default value is `true`.
+     * @platform ios
+     */
+    scrollEnabled?: boolean;
+    /**
+     * If the value of this property is true, the scroll view stops on multiples
+     * of the scroll view’s bounds when the user scrolls.
+     * The default value is false.
+     * @platform ios
+     */
+    pagingEnabled?: boolean;
+    /**
+     * The amount by which the web view content is inset from the edges of
+     * the scroll view. Defaults to {top: 0, left: 0, bottom: 0, right: 0}.
+     * @platform ios
+     */
+    contentInset?: Insets;
+    /**
+     * Determines the types of data converted to clickable URLs in the web view's content.
+     * By default only phone numbers are detected.
+     *
+     * You can provide one type or an array of many types.
+     *
+     * Possible values for `dataDetectorTypes` are:
+     *
+     * - `'phoneNumber'`
+     * - `'link'`
+     * - `'address'`
+     * - `'calendarEvent'`
+     * - `'none'`
+     * - `'all'`
+     *
+     * With the new WebKit implementation, we have three new values:
+     * - `'trackingNumber'`,
+     * - `'flightNumber'`,
+     * - `'lookupSuggestion'`,
+     *
+     * @platform ios
+     */
+    dataDetectorTypes?: DataDetectorTypes | DataDetectorTypes[];
+    /**
+     * Function that allows custom handling of any web view requests. Return
+     * `true` from the function to continue loading the request and `false`
+     * to stop loading.
+     * @platform ios
+     */
+    onShouldStartLoadWithRequest?: (event: WebViewIOSLoadRequestEvent) => any;
+    /**
+     * Boolean that determines whether HTML5 videos play inline or use the
+     * native full-screen controller. The default value is `false`.
+     *
+     * **NOTE** : In order for video to play inline, not only does this
+     * property need to be set to `true`, but the video element in the HTML
+     * document must also include the `webkit-playsinline` attribute.
+     * @platform ios
+     */
+    allowsInlineMediaPlayback?: boolean;
+    /**
+     * Hide the accessory view when the keyboard is open. Default is false to be
+     * backward compatible.
+     */
+    hideKeyboardAccessoryView?: boolean;
+    /**
+     * If true, this will be able horizontal swipe gestures when using the WKWebView. The default value is `false`.
+     */
+    allowsBackForwardNavigationGestures?: boolean;
+    /**
+     * A Boolean value that determines whether pressing on a link
+     * displays a preview of the destination for the link.
+     *
+     * This property is available on devices that support 3D Touch.
+     * In iOS 10 and later, the default value is `true`; before that, the default value is `false`.
+     * @platform ios
+     */
+    allowsLinkPreview?: boolean;
+}
+export interface AndroidWebViewProps {
+    onNavigationStateChange?: (event: WebViewNavigation) => any;
+    onContentSizeChange?: (event: WebViewEvent) => any;
+    /**
+     * https://developer.android.com/reference/android/view/View#OVER_SCROLL_NEVER
+     * Sets the overScrollMode. Possible values are:
+     *
+     * - `'always'` (default)
+     * - `'content'`
+     * - `'never'`
+     *
+     * @platform android
+     */
+    overScrollMode?: OverScrollModeType;
+    /**
+     * Sets whether Geolocation is enabled. The default is false.
+     * @platform android
+     */
+    geolocationEnabled?: boolean;
+    /**
+     * Boolean that sets whether JavaScript running in the context of a file
+     * scheme URL should be allowed to access content from any origin.
+     * Including accessing content from other file scheme URLs
+     * @platform android
+     */
+    allowUniversalAccessFromFileURLs?: boolean;
+    /**
+     * Sets whether the webview allow access to file system.
+     * @platform android
+     */
+    allowFileAccess?: boolean;
+    /**
+     * Used on Android only, controls whether form autocomplete data should be saved
+     * @platform android
+     */
+    saveFormDataDisabled?: boolean;
+    urlPrefixesForDefaultIntent?: string[];
+    /**
+     * Boolean value to enable JavaScript in the `WebView`. Used on Android only
+     * as JavaScript is enabled by default on iOS. The default value is `true`.
+     * @platform android
+     */
+    javaScriptEnabled?: boolean;
+    /**
+     * Boolean value to enable third party cookies in the `WebView`. Used on
+     * Android Lollipop and above only as third party cookies are enabled by
+     * default on Android Kitkat and below and on iOS. The default value is `true`.
+     * @platform android
+     */
+    thirdPartyCookiesEnabled?: boolean;
+    /**
+     * Boolean value to control whether DOM Storage is enabled. Used only in
+     * Android.
+     * @platform android
+     */
+    domStorageEnabled?: boolean;
+    /**
+     * Sets the user-agent for the `WebView`.
+     * @platform android
+     */
+    userAgent?: string;
+    /**
+     * Specifies the mixed content mode. i.e WebView will allow a secure origin to load content from any other origin.
+     *
+     * Possible values for `mixedContentMode` are:
+     *
+     * - `'never'` (default) - WebView will not allow a secure origin to load content from an insecure origin.
+     * - `'always'` - WebView will allow a secure origin to load content from any other origin, even if that origin is insecure.
+     * - `'compatibility'` -  WebView will attempt to be compatible with the approach of a modern web browser with regard to mixed content.
+     * @platform android
+     */
+    mixedContentMode?: 'never' | 'always' | 'compatibility';
+}
+export interface WebViewSharedProps extends ViewProps, IOSWebViewProps, AndroidWebViewProps {
+    /**
+     * @Deprecated. Use `source` instead.
+     */
+    url?: string;
+    /**
+     * @Deprecated. Use `source` instead.
+     */
+    html?: string;
+    /**
+     * Loads static html or a uri (with optional headers) in the WebView.
+     */
+    source?: WebViewSource;
+    /**
+     * Function that returns a view to show if there's an error.
+     */
+    renderError?: (errorDomain: string | undefined, errorCode: number, errorDesc: string) => ReactElement<any>;
+    /**
+     * Function that returns a loading indicator.
+     */
+    renderLoading?: () => ReactElement<any>;
+    /**
+     * Function that is invoked when the `WebView` has finished loading.
+     */
+    onLoad?: (event: WebViewNavigationEvent) => any;
+    /**
+     * Function that is invoked when the `WebView` load succeeds or fails.
+     */
+    onLoadEnd?: (event: WebViewNavigationEvent | WebViewErrorEvent) => any;
+    /**
+     * Function that is invoked when the `WebView` starts loading.
+     */
+    onLoadStart?: (event: WebViewNavigationEvent) => any;
+    /**
+     * Function that is invoked when the `WebView` load fails.
+     */
+    onError?: (event: WebViewErrorEvent) => any;
+    /**
+     * Controls whether to adjust the content inset for web views that are
+     * placed behind a navigation bar, tab bar, or toolbar. The default value
+     * is `true`.
+     */
+    automaticallyAdjustContentInsets?: boolean;
+    /**
+     * Function that is invoked when the `WebView` loading starts or ends.
+     */
+    onNavigationStateChange?: (event: WebViewNavigation) => any;
+    /**
+     * A function that is invoked when the webview calls `window.postMessage`.
+     * Setting this property will inject a `postMessage` global into your
+     * webview, but will still call pre-existing values of `postMessage`.
+     *
+     * `window.postMessage` accepts one argument, `data`, which will be
+     * available on the event object, `event.nativeEvent.data`. `data`
+     * must be a string.
+     */
+    onMessage?: (event: WebViewMessageEvent) => any;
+    /**
+     * Function that is invoked when the `WebView` is loading.
+     */
+    onLoadProgress?: (event: NativeSyntheticEvent<WebViewProgressEvent>) => any;
+    /**
+     * Boolean value that forces the `WebView` to show the loading view
+     * on the first load.
+     */
+    startInLoadingState?: boolean;
+    /**
+     * Set this to provide JavaScript that will be injected into the web page
+     * when the view loads.
+     */
+    injectedJavaScript?: string;
+    /**
+     * Boolean that controls whether the web content is scaled to fit
+     * the view and enables the user to change the scale. The default value
+     * is `true`.
+     *
+     * On iOS, when `useWebKit=true`, this prop will not work.
+     */
+    scalesPageToFit?: boolean;
+    /**
+     * Boolean that determines whether HTML5 audio and video requires the user
+     * to tap them before they start playing. The default value is `true`.
+     */
+    mediaPlaybackRequiresUserAction?: boolean;
+    /**
+     * List of origin strings to allow being navigated to. The strings allow
+     * wildcards and get matched against *just* the origin (not the full URL).
+     * If the user taps to navigate to a new page but the new page is not in
+     * this whitelist, we will open the URL in Safari.
+     * The default whitelisted origins are "http://*" and "https://*".
+     */
+    originWhitelist?: string[];
+    /**
+     * Override the native component used to render the WebView. Enables a custom native
+     * WebView which uses the same JavaScript as the original WebView.
+     */
+    nativeConfig?: WebViewNativeConfig;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+}

yarn.lock

@@ -892,6 +892,13 @@ argv-formatter@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/argv-formatter/-/argv-formatter-1.0.0.tgz#a0ca0cbc29a5b73e836eebe1cbf6c5e0e4eb82f9"
 
+aria-query@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-3.0.0.tgz#65b3fcc1ca1155a8c9ae64d6eee297f15d5133cc"
+  dependencies:
+    ast-types-flow "0.0.7"
+    commander "^2.11.0"
+
 arr-diff@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-1.1.0.tgz#687c32758163588fef7de7b36fabe495eb1a399a"
@@ -996,6 +1003,10 @@ assign-symbols@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
 
+ast-types-flow@0.0.7, ast-types-flow@^0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
+
 async-limiter@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
@@ -1022,6 +1033,12 @@ aws4@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
 
+axobject-query@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.0.2.tgz#ea187abe5b9002b377f925d8bf7d1c561adf38f9"
+  dependencies:
+    ast-types-flow "0.0.7"
+
 babel-code-frame@^6.22.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -1537,7 +1554,7 @@ combined-stream@^1.0.6, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@^2.9.0:
+commander@^2.11.0, commander@^2.9.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
 
@@ -1775,6 +1792,10 @@ cyclist@~0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
 
+damerau-levenshtein@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.4.tgz#03191c432cb6eea168bb77f3a55ffdccb8978514"
+
 dashdash@^1.12.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
@@ -1990,6 +2011,10 @@ ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
+emoji-regex@^6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.5.1.tgz#9baea929b155565c11ea41c6626eaa65cef992c2"
+
 encodeurl@~1.0.1, encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
@@ -2076,7 +2101,7 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
 
-eslint-config-airbnb-base@13.1.0:
+eslint-config-airbnb-base@13.1.0, eslint-config-airbnb-base@^13.1.0:
   version "13.1.0"
   resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-13.1.0.tgz#b5a1b480b80dfad16433d6c4ad84e6605052c05c"
   dependencies:
@@ -2084,6 +2109,14 @@ eslint-config-airbnb-base@13.1.0:
     object.assign "^4.1.0"
     object.entries "^1.0.4"
 
+eslint-config-airbnb@17.1.0:
+  version "17.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-17.1.0.tgz#3964ed4bc198240315ff52030bf8636f42bc4732"
+  dependencies:
+    eslint-config-airbnb-base "^13.1.0"
+    object.assign "^4.1.0"
+    object.entries "^1.0.4"
+
 eslint-config-prettier@3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-3.3.0.tgz#41afc8d3b852e757f06274ed6c44ca16f939a57d"
@@ -2119,6 +2152,19 @@ eslint-plugin-import@2.14.0:
     read-pkg-up "^2.0.0"
     resolve "^1.6.0"
 
+eslint-plugin-jsx-a11y@6.1.2:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.1.2.tgz#69bca4890b36dcf0fe16dd2129d2d88b98f33f88"
+  dependencies:
+    aria-query "^3.0.0"
+    array-includes "^3.0.3"
+    ast-types-flow "^0.0.7"
+    axobject-query "^2.0.1"
+    damerau-levenshtein "^1.0.4"
+    emoji-regex "^6.5.1"
+    has "^1.0.3"
+    jsx-ast-utils "^2.0.1"
+
 eslint-plugin-react-native-globals@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-native-globals/-/eslint-plugin-react-native-globals-0.1.2.tgz#ee1348bc2ceb912303ce6bdbd22e2f045ea86ea2"