remove flow. add typescript

.gitignore

@@ -42,6 +42,9 @@ package-lock.json
 #
 bundles/
 
+# Typescript compile
+lib/
+
 # VS Code
 .vscode/*
 !.vscode/settings.json
@@ -51,4 +54,5 @@ bundles/
 
 android/gradle
 android/gradlew
-android/gradlew.bat
+android/gradlew.bat
+

index.js

@@ -1,3 +0,0 @@
-import WebView from './js/WebView';
-
-export { WebView };

js/WebViewTypes.js

@@ -1,458 +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
- */
-
-'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,
-|}>;
-
-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

@@ -1,8 +1,8 @@
 {
   "name": "react-native-webview",
   "description": "React Native WebView component for iOS, Android, and Windows 10 (coming soon)",
-  "main": "index.js",
-  "typings": "typings/index.d.ts",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
   "author": "Jamon Holmgren <jamon@infinite.red>",
   "contributors": [
     "Thibault Malbranche <malbranche.thibault@gmail.com>"
@@ -11,11 +11,10 @@
   "version": "2.12.1",
   "homepage": "https://github.com/react-native-community/react-native-webview#readme",
   "scripts": {
-    "test:ios:flow": "flow check",
-    "test:android:flow": "flow check --flowconfig-name .flowconfig.android",
+    "compile": "tsc",
     "ci:publish": "yarn semantic-release",
-    "ci:test": "yarn ci:test:flow",
-    "ci:test:flow": "yarn test:ios:flow && yarn test:android:flow",
+    "ci:test": "yarn ci:test:compile",
+    "ci:test:compile": "yarn compile",
     "semantic-release": "semantic-release"
   },
   "peerDependencies": {
@@ -24,15 +23,16 @@
   },
   "dependencies": {
     "escape-string-regexp": "^1.0.5",
-    "fbjs": "^0.8.17"
+    "invariant": "^2.2.4"
   },
   "devDependencies": {
     "@semantic-release/git": "7.0.5",
+    "@types/invariant": "^2.2.29",
     "@types/react": "^16.4.18",
     "@types/react-native": "^0.57.6",
-    "flow-bin": "^0.80.0",
     "react-native": "^0.57",
-    "semantic-release": "15.10.3"
+    "semantic-release": "15.10.3",
+    "typescript": "^3.1.6"
   },
   "repository": {
     "type": "git",

js/WebView.android.js → src/WebView.android.tsx

@@ -1,51 +1,37 @@
-/**
- * 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
- */
-
-'use strict';
+import React from "react";
 
-import React from 'react';
-
-import ReactNative from 'react-native';
+import ReactNative from "react-native";
 import {
   ActivityIndicator,
   StyleSheet,
   UIManager,
   View,
-  Image,
   requireNativeComponent,
-  NativeModules
-} from 'react-native';
+  NativeModules,
+  Image,
+  NativeSyntheticEvent
+} from "react-native";
 
-import invariant from 'fbjs/lib/invariant';
-import keyMirror from 'fbjs/lib/keyMirror';
+import invariant from "invariant";
 
-import WebViewShared from './WebViewShared';
-import type {
-  WebViewEvent,
+import WebViewShared from "./WebViewShared";
+import {
+  WebViewSourceUri,
   WebViewError,
   WebViewErrorEvent,
   WebViewMessageEvent,
-  WebViewNavigation,
   WebViewNavigationEvent,
   WebViewSharedProps,
   WebViewSource,
-  WebViewProgressEvent,
-} from './WebViewTypes';
-
-const resolveAssetSource = Image.resolveAssetSource;
-
-const WebViewState = keyMirror({
-  IDLE: null,
-  LOADING: null,
-  ERROR: null,
-});
+  WebViewProgressEvent
+} from "./types/WebViewTypes";
+import { isWebViewUriSource } from "./utils";
+
+enum WebViewState {
+  IDLE = "IDLE",
+  LOADING = "LOADING",
+  ERROR = "ERROR"
+}
 
 const defaultRenderLoading = () => (
   <View style={styles.loadingView}>
@@ -53,36 +39,38 @@ const defaultRenderLoading = () => (
   </View>
 );
 
-type State = {|
-  viewState: WebViewState,
-  lastErrorEvent: ?WebViewError,
-|};
+type State = {
+  viewState: WebViewState;
+  lastErrorEvent: WebViewError;
+};
 
 /**
  * Renders a native WebView.
  */
-class WebView extends React.Component<WebViewSharedProps, State> {
+export default class WebView extends React.Component<WebViewSharedProps, State> {
   static defaultProps = {
-    overScrollMode: 'always',
+    overScrollMode: "always",
     javaScriptEnabled: true,
     thirdPartyCookiesEnabled: true,
     scalesPageToFit: true,
     allowFileAccess: false,
     saveFormDataDisabled: false,
-    originWhitelist: WebViewShared.defaultOriginWhitelist,
+    originWhitelist: WebViewShared.defaultOriginWhitelist
   };
 
   static isFileUploadSupported = async () => {
     // native implementation should return "true" only for Android 5+
     return NativeModules.RNCWebView.isFileUploadSupported();
-  }
+  };
 
-  state = {
-    viewState: this.props.startInLoadingState ? WebViewState.LOADING : WebViewState.IDLE,
-    lastErrorEvent: null,
+  state: State = {
+    viewState: this.props.startInLoadingState
+      ? WebViewState.LOADING
+      : WebViewState.IDLE,
+    lastErrorEvent: null
   };
 
-  webViewRef = React.createRef();
+  webViewRef = React.createRef<React.ComponentClass>();
 
   render() {
     let otherView = null;
@@ -91,17 +79,17 @@ class WebView extends React.Component<WebViewSharedProps, State> {
       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');
+      invariant(errorEvent != null, "lastErrorEvent expected to be non-null");
       otherView =
         this.props.renderError &&
         this.props.renderError(
           errorEvent.domain,
           errorEvent.code,
-          errorEvent.description,
+          errorEvent.description
         );
     } else if (this.state.viewState !== WebViewState.IDLE) {
       console.error(
-        'RNCWebView invalid state encountered: ' + this.state.viewState,
+        "RNCWebView invalid state encountered: " + this.state.viewState
       );
     }
 
@@ -121,18 +109,20 @@ class WebView extends React.Component<WebViewSharedProps, State> {
       source = { uri: this.props.url };
     }
 
-    if (source.method === 'POST' && source.headers) {
-      console.warn(
-        'WebView: `source.headers` is not supported when using POST.',
-      );
-    } else if (source.method === 'GET' && source.body) {
-      console.warn('WebView: `source.body` is not supported when using GET.');
+    if (isWebViewUriSource(source)) {
+      if (source.method === "POST" && source.headers) {
+        console.warn(
+          "WebView: `source.headers` is not supported when using POST."
+        );
+      } else if (source.method === "GET" && source.body) {
+        console.warn("WebView: `source.body` is not supported when using GET.");
+      }
     }
 
     const nativeConfig = this.props.nativeConfig || {};
 
     const originWhitelist = (this.props.originWhitelist || []).map(
-      WebViewShared.originWhitelistToRegex,
+      WebViewShared.originWhitelistToRegex
     );
 
     let NativeWebView = nativeConfig.component || RNCWebView;
@@ -142,7 +132,7 @@ class WebView extends React.Component<WebViewSharedProps, State> {
         ref={this.webViewRef}
         key="webViewKey"
         style={webViewStyles}
-        source={resolveAssetSource(source)}
+        source={Image.resolveAssetSource(source as WebViewSourceUri)} // typing issue of not compatible of WebViewSourceHtml in react native.
         scalesPageToFit={this.props.scalesPageToFit}
         allowFileAccess={this.props.allowFileAccess}
         injectedJavaScript={this.props.injectedJavaScript}
@@ -150,7 +140,7 @@ class WebView extends React.Component<WebViewSharedProps, State> {
         javaScriptEnabled={this.props.javaScriptEnabled}
         thirdPartyCookiesEnabled={this.props.thirdPartyCookiesEnabled}
         domStorageEnabled={this.props.domStorageEnabled}
-        messagingEnabled={typeof this.props.onMessage === 'function'}
+        messagingEnabled={typeof this.props.onMessage === "function"}
         onMessage={this.onMessage}
         overScrollMode={this.props.overScrollMode}
         contentInset={this.props.contentInset}
@@ -190,7 +180,7 @@ class WebView extends React.Component<WebViewSharedProps, State> {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       UIManager.RNCWebView.Commands.goForward,
-      null,
+      null
     );
   };
 
@@ -198,18 +188,18 @@ class WebView extends React.Component<WebViewSharedProps, State> {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       UIManager.RNCWebView.Commands.goBack,
-      null,
+      null
     );
   };
 
   reload = () => {
     this.setState({
-      viewState: WebViewState.LOADING,
+      viewState: WebViewState.LOADING
     });
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       UIManager.RNCWebView.Commands.reload,
-      null,
+      null
     );
   };
 
@@ -217,7 +207,7 @@ class WebView extends React.Component<WebViewSharedProps, State> {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       UIManager.RNCWebView.Commands.stopLoading,
-      null,
+      null
     );
   };
 
@@ -225,7 +215,7 @@ class WebView extends React.Component<WebViewSharedProps, State> {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       UIManager.RNCWebView.Commands.postMessage,
-      [String(data)],
+      [String(data)]
     );
   };
 
@@ -239,7 +229,7 @@ class WebView extends React.Component<WebViewSharedProps, State> {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       UIManager.RNCWebView.Commands.injectJavaScript,
-      [data],
+      [data]
     );
   };
 
@@ -268,11 +258,11 @@ class WebView extends React.Component<WebViewSharedProps, State> {
     const { onError, onLoadEnd } = this.props;
     onError && onError(event);
     onLoadEnd && onLoadEnd(event);
-    console.warn('Encountered an error loading page', event.nativeEvent);
+    console.warn("Encountered an error loading page", event.nativeEvent);
 
     this.setState({
       lastErrorEvent: event.nativeEvent,
-      viewState: WebViewState.ERROR,
+      viewState: WebViewState.ERROR
     });
   };
 
@@ -281,7 +271,7 @@ class WebView extends React.Component<WebViewSharedProps, State> {
     onLoad && onLoad(event);
     onLoadEnd && onLoadEnd(event);
     this.setState({
-      viewState: WebViewState.IDLE,
+      viewState: WebViewState.IDLE
     });
     this.updateNavigationState(event);
   };
@@ -290,31 +280,29 @@ class WebView extends React.Component<WebViewSharedProps, State> {
     const { onMessage } = this.props;
     onMessage && onMessage(event);
   };
-  
-  onLoadingProgress = (event: WebViewProgressEvent) => {
-    const { onLoadProgress} = this.props;
+
+  onLoadingProgress = (event: NativeSyntheticEvent<WebViewProgressEvent>) => {
+    const { onLoadProgress } = this.props;
     onLoadProgress && onLoadProgress(event);
-  }
+  };
 }
 
-const RNCWebView = requireNativeComponent('RNCWebView');
+const RNCWebView = requireNativeComponent("RNCWebView");
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
+    flex: 1
   },
   hidden: {
     height: 0,
-    flex: 0, // disable 'flex:1' when hiding a View
+    flex: 0 // disable 'flex:1' when hiding a View
   },
   loadingView: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
+    justifyContent: "center",
+    alignItems: "center"
   },
   loadingProgressBar: {
-    height: 20,
-  },
-});
-
-module.exports = WebView;
+    height: 20
+  }
+});

js/WebView.ios.js → src/WebView.ios.tsx

@@ -1,14 +1,4 @@
-/**
- * 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
- */
-
-import React from 'react';
+import React from "react";
 import {
   ActivityIndicator,
   Linking,
@@ -20,30 +10,31 @@ import {
   NativeModules,
   Image,
   findNodeHandle,
-} from 'react-native';
+  NativeSyntheticEvent
+} from "react-native";
 
-import invariant from 'fbjs/lib/invariant';
-import keyMirror from 'fbjs/lib/keyMirror';
+import invariant from "invariant";
 
-import WebViewShared from './WebViewShared';
-import type {
-  WebViewEvent,
+import WebViewShared from "./WebViewShared";
+import {
+  WebViewSourceUri,
   WebViewError,
+  WebViewIOSLoadRequestEvent,
   WebViewErrorEvent,
   WebViewMessageEvent,
   WebViewNavigationEvent,
   WebViewSharedProps,
   WebViewSource,
-  WebViewProgressEvent,
-} from './WebViewTypes';
+  WebViewProgressEvent
+} from "./types/WebViewTypes";
 
-const resolveAssetSource = Image.resolveAssetSource;
+type DecelerationRate = number | "normal" | "fast";
 
 // Imported from https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollView/processDecelerationRate.js
-function processDecelerationRate(decelerationRate) {
-  if (decelerationRate === 'normal') {
+function processDecelerationRate(decelerationRate: DecelerationRate) {
+  if (decelerationRate === "normal") {
     decelerationRate = 0.998;
-  } else if (decelerationRate === 'fast') {
+  } else if (decelerationRate === "fast") {
     decelerationRate = 0.99;
   }
   return decelerationRate;
@@ -52,53 +43,45 @@ function processDecelerationRate(decelerationRate) {
 const RNCUIWebViewManager = NativeModules.RNCUIWebViewManager;
 const RNCWKWebViewManager = NativeModules.RNCWKWebViewManager;
 
-const BGWASH = 'rgba(255,255,255,0.8)';
+const BGWASH = "rgba(255,255,255,0.8)";
 
-const WebViewState = keyMirror({
-  IDLE: null,
-  LOADING: null,
-  ERROR: null,
-});
+enum WebViewState {
+  IDLE = "IDLE",
+  LOADING = "LOADING",
+  ERROR = "ERROR"
+}
 
-const NavigationType = keyMirror({
-  click: true,
-  formsubmit: true,
-  backforward: true,
-  reload: true,
-  formresubmit: true,
-  other: true,
-});
+enum NavigationType {
+  click = "click",
+  formsubmit = "formsubmit",
+  backforward = "backforward",
+  reload = "reload",
+  formresubmit = "formresubmit",
+  other = "other"
+}
+
+const JSNavigationScheme = "react-js-navigation";
 
-const JSNavigationScheme = 'react-js-navigation';
-
-type State = {|
-  viewState: WebViewState,
-  lastErrorEvent: ?WebViewError,
-|};
-
-const DataDetectorTypes = [
-  'phoneNumber',
-  'link',
-  'address',
-  'calendarEvent',
-  'trackingNumber',
-  'flightNumber',
-  'lookupSuggestion',
-  'none',
-  'all',
-];
+type State = {
+  viewState: WebViewState;
+  lastErrorEvent: WebViewError;
+};
 
 const defaultRenderLoading = () => (
   <View style={styles.loadingView}>
     <ActivityIndicator />
   </View>
 );
-const defaultRenderError = (errorDomain, errorCode, errorDesc) => (
+const defaultRenderError = (
+  errorDomain: string,
+  errorCode: number,
+  errorDesc: string
+) => (
   <View style={styles.errorContainer}>
     <Text style={styles.errorTextTitle}>Error loading page</Text>
-    <Text style={styles.errorText}>{'Domain: ' + errorDomain}</Text>
-    <Text style={styles.errorText}>{'Error Code: ' + errorCode}</Text>
-    <Text style={styles.errorText}>{'Description: ' + errorDesc}</Text>
+    <Text style={styles.errorText}>{"Domain: " + errorDomain}</Text>
+    <Text style={styles.errorText}>{"Error Code: " + errorCode}</Text>
+    <Text style={styles.errorText}>{"Description: " + errorDesc}</Text>
   </View>
 );
 
@@ -124,28 +107,31 @@ const defaultRenderError = (errorDomain, errorCode, errorDesc) => (
  * You can use this component to navigate back and forth in the web view's
  * history and configure various properties for the web content.
  */
-class WebView extends React.Component<WebViewSharedProps, State> {
+export default class WebView extends React.Component<
+  WebViewSharedProps,
+  State
+> {
   static JSNavigationScheme = JSNavigationScheme;
   static NavigationType = NavigationType;
 
   static defaultProps = {
     useWebKit: true,
-    originWhitelist: WebViewShared.defaultOriginWhitelist,
+    originWhitelist: WebViewShared.defaultOriginWhitelist
   };
 
   static isFileUploadSupported = async () => {
     // no native implementation for iOS, depends only on permissions
     return true;
-  }
+  };
 
-  state = {
+  state: State = {
     viewState: this.props.startInLoadingState
       ? WebViewState.LOADING
       : WebViewState.IDLE,
-    lastErrorEvent: null,
+    lastErrorEvent: null
   };
 
-  webViewRef = React.createRef();
+  webViewRef = React.createRef<React.ComponentClass>();
 
   UNSAFE_componentWillMount() {
     if (
@@ -153,7 +139,7 @@ class WebView extends React.Component<WebViewSharedProps, State> {
       this.props.scalesPageToFit !== undefined
     ) {
       console.warn(
-        'The scalesPageToFit property is not supported when useWebKit = true',
+        "The scalesPageToFit property is not supported when useWebKit = true"
       );
     }
     if (
@@ -161,7 +147,7 @@ class WebView extends React.Component<WebViewSharedProps, State> {
       this.props.allowsBackForwardNavigationGestures
     ) {
       console.warn(
-        'The allowsBackForwardNavigationGestures property is not supported when useWebKit = false',
+        "The allowsBackForwardNavigationGestures property is not supported when useWebKit = false"
       );
     }
   }
@@ -181,15 +167,15 @@ class WebView extends React.Component<WebViewSharedProps, State> {
       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');
+      invariant(errorEvent != null, "lastErrorEvent expected to be non-null");
       otherView = (this.props.renderError || defaultRenderError)(
         errorEvent.domain,
         errorEvent.code,
-        errorEvent.description,
+        errorEvent.description
       );
     } else if (this.state.viewState !== WebViewState.IDLE) {
       console.error(
-        'RNCWebView invalid state encountered: ' + this.state.viewState,
+        "RNCWebView invalid state encountered: " + this.state.viewState
       );
     }
 
@@ -213,15 +199,17 @@ class WebView extends React.Component<WebViewSharedProps, State> {
     }
 
     const compiledWhitelist = [
-      'about:blank',
-      ...(this.props.originWhitelist || []),
+      "about:blank",
+      ...(this.props.originWhitelist || [])
     ].map(WebViewShared.originWhitelistToRegex);
-    const onShouldStartLoadWithRequest = event => {
+    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),
+        new RegExp(x).test(origin)
       );
       shouldStart = shouldStart && passesWhitelist;
       if (!passesWhitelist) {
@@ -232,15 +220,15 @@ class WebView extends React.Component<WebViewSharedProps, State> {
           shouldStart &&
           this.props.onShouldStartLoadWithRequest(event.nativeEvent);
       }
-      invariant(viewManager != null, 'viewManager expected to be non-null');
+      invariant(viewManager != null, "viewManager expected to be non-null");
       viewManager.startLoadWithResult(
         !!shouldStart,
-        event.nativeEvent.lockIdentifier,
+        event.nativeEvent.lockIdentifier
       );
     };
 
     const decelerationRate = processDecelerationRate(
-      this.props.decelerationRate,
+      this.props.decelerationRate
     );
 
     let source: WebViewSource = this.props.source || {};
@@ -250,7 +238,7 @@ class WebView extends React.Component<WebViewSharedProps, State> {
       source = { uri: this.props.url };
     }
 
-    const messagingEnabled = typeof this.props.onMessage === 'function';
+    const messagingEnabled = typeof this.props.onMessage === "function";
 
     let NativeWebView = nativeConfig.component;
 
@@ -265,7 +253,7 @@ class WebView extends React.Component<WebViewSharedProps, State> {
         ref={this.webViewRef}
         key="webViewKey"
         style={webViewStyles}
-        source={resolveAssetSource(source)}
+        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}
@@ -276,7 +264,9 @@ class WebView extends React.Component<WebViewSharedProps, State> {
           this.props.automaticallyAdjustContentInsets
         }
         hideKeyboardAccessoryView={this.props.hideKeyboardAccessoryView}
-        allowsBackForwardNavigationGestures={this.props.allowsBackForwardNavigationGestures}
+        allowsBackForwardNavigationGestures={
+          this.props.allowsBackForwardNavigationGestures
+        }
         userAgent={this.props.userAgent}
         onLoadingStart={this._onLoadingStart}
         onLoadingFinish={this._onLoadingFinish}
@@ -318,7 +308,7 @@ class WebView extends React.Component<WebViewSharedProps, State> {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       this._getCommands().goForward,
-      null,
+      null
     );
   };
 
@@ -329,7 +319,7 @@ class WebView extends React.Component<WebViewSharedProps, State> {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       this._getCommands().goBack,
-      null,
+      null
     );
   };
 
@@ -341,7 +331,7 @@ class WebView extends React.Component<WebViewSharedProps, State> {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       this._getCommands().reload,
-      null,
+      null
     );
   };
 
@@ -352,7 +342,7 @@ class WebView extends React.Component<WebViewSharedProps, State> {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       this._getCommands().stopLoading,
-      null,
+      null
     );
   };
 
@@ -370,7 +360,7 @@ class WebView extends React.Component<WebViewSharedProps, State> {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       this._getCommands().postMessage,
-      [String(data)],
+      [String(data)]
     );
   };
 
@@ -384,7 +374,7 @@ class WebView extends React.Component<WebViewSharedProps, State> {
     UIManager.dispatchViewManagerCommand(
       this.getWebViewHandle(),
       this._getCommands().injectJavaScript,
-      [data],
+      [data]
     );
   };
 
@@ -416,11 +406,11 @@ class WebView extends React.Component<WebViewSharedProps, State> {
     const { onError, onLoadEnd } = this.props;
     onError && onError(event);
     onLoadEnd && onLoadEnd(event);
-    console.warn('Encountered an error loading page', event.nativeEvent);
+    console.warn("Encountered an error loading page", event.nativeEvent);
 
     this.setState({
       lastErrorEvent: event.nativeEvent,
-      viewState: WebViewState.ERROR,
+      viewState: WebViewState.ERROR
     });
   };
 
@@ -429,7 +419,7 @@ class WebView extends React.Component<WebViewSharedProps, State> {
     onLoad && onLoad(event);
     onLoadEnd && onLoadEnd(event);
     this.setState({
-      viewState: WebViewState.IDLE,
+      viewState: WebViewState.IDLE
     });
     this._updateNavigationState(event);
   };
@@ -439,73 +429,77 @@ class WebView extends React.Component<WebViewSharedProps, State> {
     onMessage && onMessage(event);
   };
 
-  _onLoadingProgress = (event: WebViewProgressEvent) => {
-    const {onLoadProgress} = this.props;
+  _onLoadingProgress = (event: NativeSyntheticEvent<WebViewProgressEvent>) => {
+    const { onLoadProgress } = this.props;
     onLoadProgress && onLoadProgress(event);
-  }
+  };
 
   componentDidUpdate(prevProps: WebViewSharedProps) {
     if (!(prevProps.useWebKit && this.props.useWebKit)) {
       return;
     }
 
-    this._showRedboxOnPropChanges(prevProps, 'allowsInlineMediaPlayback');
-    this._showRedboxOnPropChanges(prevProps, 'mediaPlaybackRequiresUserAction');
-    this._showRedboxOnPropChanges(prevProps, 'dataDetectorTypes');
+    this._showRedboxOnPropChanges(prevProps, "allowsInlineMediaPlayback");
+    this._showRedboxOnPropChanges(prevProps, "mediaPlaybackRequiresUserAction");
+    this._showRedboxOnPropChanges(prevProps, "dataDetectorTypes");
 
     if (this.props.scalesPageToFit !== undefined) {
       console.warn(
-        'The scalesPageToFit property is not supported when useWebKit = true',
+        "The scalesPageToFit property is not supported when useWebKit = true"
       );
     }
   }
 
-  _showRedboxOnPropChanges(prevProps, propName: string) {
+  _showRedboxOnPropChanges(
+    prevProps: WebViewSharedProps,
+    propName:
+      | "allowsInlineMediaPlayback"
+      | "mediaPlaybackRequiresUserAction"
+      | "dataDetectorTypes"
+  ) {
     if (this.props[propName] !== prevProps[propName]) {
       console.error(
-        `Changes to property ${propName} do nothing after the initial render.`,
+        `Changes to property ${propName} do nothing after the initial render.`
       );
     }
   }
 }
 
-const RNCUIWebView = requireNativeComponent('RNCUIWebView');
-const RNCWKWebView = requireNativeComponent('RNCWKWebView');
+const RNCUIWebView = requireNativeComponent("RNCUIWebView");
+const RNCWKWebView = requireNativeComponent("RNCWKWebView");
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
+    flex: 1
   },
   errorContainer: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: BGWASH,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: BGWASH
   },
   errorText: {
     fontSize: 14,
-    textAlign: 'center',
-    marginBottom: 2,
+    textAlign: "center",
+    marginBottom: 2
   },
   errorTextTitle: {
     fontSize: 15,
-    fontWeight: '500',
-    marginBottom: 10,
+    fontWeight: "500",
+    marginBottom: 10
   },
   hidden: {
     height: 0,
-    flex: 0, // disable 'flex:1' when hiding a View
+    flex: 0 // disable 'flex:1' when hiding a View
   },
   loadingView: {
     backgroundColor: BGWASH,
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: 100,
+    justifyContent: "center",
+    alignItems: "center",
+    height: 100
   },
   webView: {
-    backgroundColor: '#ffffff',
-  },
+    backgroundColor: "#ffffff"
+  }
 });
-
-module.exports = WebView;

js/WebViewShared.js → src/WebViewShared.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
- * @flow
+ * @typescript
  */
 
 'use strict';
@@ -23,4 +23,4 @@ const WebViewShared = {
   },
 };
 
-module.exports = WebViewShared;
+export default WebViewShared

src/index.ts

@@ -0,0 +1,8 @@
+import IOSWebView from "./WebView.ios"; 
+import AndroidWebView from "./WebView.android"; 
+
+declare var _test1: typeof IOSWebView;
+declare var _test2: typeof AndroidWebView;
+
+/// export to get the shape of the module
+export default { WebView: IOSWebView}

typings/index.d.ts → src/types/WebViewTypes.ts

@@ -1,5 +1,20 @@
-import { ComponentType, ReactElement, ReactNode, Component } from 'react';
-import { Insets, NativeSyntheticEvent, StyleProp, ViewProps, ViewStyle } from 'react-native';
+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;
@@ -12,7 +27,13 @@ export interface WebViewNativeEvent {
 export interface WebViewIOSLoadRequestEvent extends WebViewNativeEvent {
   target: number;
   lockIdentifier: number;
-  navigationType: "click" | "formsubmit" | "backforward" | "reload" | "formresubmit" | "other";
+  navigationType:
+    | "click"
+    | "formsubmit"
+    | "backforward"
+    | "reload"
+    | "formresubmit"
+    | "other";
 }
 
 export interface WebViewProgressEvent extends WebViewNativeEvent {
@@ -21,12 +42,12 @@ export interface WebViewProgressEvent extends WebViewNativeEvent {
 
 export interface WebViewNavigation extends WebViewNativeEvent {
   readonly navigationType:
-    | 'click'
-    | 'formsubmit'
-    | 'backforward'
-    | 'reload'
-    | 'formresubmit'
-    | 'other';
+    | "click"
+    | "formsubmit"
+    | "backforward"
+    | "reload"
+    | "formresubmit"
+    | "other";
 }
 
 export interface WebViewMessage extends WebViewNativeEvent {
@@ -48,17 +69,17 @@ export type WebViewMessageEvent = NativeSyntheticEvent<WebViewMessage>;
 export type WebViewErrorEvent = NativeSyntheticEvent<WebViewError>;
 
 export type DataDetectorTypes =
-  | 'phoneNumber'
-  | 'link'
-  | 'address'
-  | 'calendarEvent'
-  | 'trackingNumber'
-  | 'flightNumber'
-  | 'lookupSuggestion'
-  | 'none'
-  | 'all';
-
-export type OverScrollModeType = 'always' | 'content' | 'never';
+  | "phoneNumber"
+  | "link"
+  | "address"
+  | "calendarEvent"
+  | "trackingNumber"
+  | "flightNumber"
+  | "lookupSuggestion"
+  | "none"
+  | "all";
+
+export type OverScrollModeType = "always" | "content" | "never";
 
 export interface WebViewSourceUri {
   /**
@@ -76,7 +97,7 @@ export interface WebViewSourceUri {
    * Additional HTTP headers to send with the request.
    * NOTE: On Android, this can only be used with GET requests.
    */
-  headers?: {[key: string]: string};
+  headers?: { [key: string]: string };
 
   /**
    * The HTTP body to send with the request. This must be a valid
@@ -102,18 +123,18 @@ export type WebViewSource = WebViewSourceUri | WebViewSourceHtml;
 
 export interface WebViewNativeConfig {
   /*
-    * The native component used to render the WebView.
-    */
+   * 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.
-    */
+   * Set props directly on the native component WebView. Enables custom props which the
+   * original WebView doesn't pass through.
+   */
   props?: any;
   /*
-    * Set the ViewManager to use for communication with the native side.
-    * @platform ios
-    */
+   * Set the ViewManager to use for communication with the native side.
+   * @platform ios
+   */
   viewManager?: any;
 }
 
@@ -142,7 +163,7 @@ export interface IOSWebViewProps {
    *   - fast: 0.99 (the default for iOS web view)
    * @platform ios
    */
-  decelerationRate?: 'fast' | 'normal' | number;
+  decelerationRate?: "fast" | "normal" | number;
 
   /**
    * Boolean value that determines whether scrolling is enabled in the
@@ -157,7 +178,7 @@ export interface IOSWebViewProps {
    * The default value is false.
    * @platform ios
    */
-  pagingEnabled?: boolean,
+  pagingEnabled?: boolean;
 
   /**
    * The amount by which the web view content is inset from the edges of
@@ -216,7 +237,7 @@ export interface IOSWebViewProps {
   /**
    * If true, this will be able horizontal swipe gestures when using the WKWebView. The default value is `false`.
    */
-  allowsBackForwardNavigationGestures?: boolean
+  allowsBackForwardNavigationGestures?: boolean;
 }
 
 export interface AndroidWebViewProps {
@@ -262,12 +283,12 @@ export interface AndroidWebViewProps {
   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
-    */
+   * 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?: string[];
 
   /**
@@ -308,10 +329,13 @@ export interface AndroidWebViewProps {
    * - `'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';
+  mixedContentMode?: "never" | "always" | "compatibility";
 }
 
-export interface WebViewSharedProps extends ViewProps, IOSWebViewProps, AndroidWebViewProps {
+export interface WebViewSharedProps
+  extends ViewProps,
+    IOSWebViewProps,
+    AndroidWebViewProps {
   /**
    * @Deprecated. Use `source` instead.
    */
@@ -329,7 +353,11 @@ export interface WebViewSharedProps extends ViewProps, IOSWebViewProps, AndroidW
   /**
    * Function that returns a view to show if there's an error.
    */
-  renderError?: (errorDomain: string | undefined, errorCode: number, errorDesc: string) => ReactElement<any>; // view to show if there's an error
+  renderError?: (
+    errorDomain: string | undefined,
+    errorCode: number,
+    errorDesc: string
+  ) => ReactElement<any>; // view to show if there's an error
 
   /**
    * Function that returns a loading indicator.
@@ -429,12 +457,3 @@ export interface WebViewSharedProps extends ViewProps, IOSWebViewProps, AndroidW
   style?: StyleProp<ViewStyle>;
   children?: ReactNode;
 }
-
-export class WebView extends Component<WebViewSharedProps> {
-  public goForward: () => void;
-  public goBack: () => void;
-  public reload: () => void;
-  public stopLoading: () => void;
-  public postMessage: (msg: string) => void;
-  public injectJavaScript: (js: string) => void;
-}

src/utils.ts

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

tsconfig.base.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "declarationDir": "lib",    
+    "esModuleInterop": true,
+    "isolatedModules": false,
+    "outDir": "./lib",
+    "moduleResolution": "node",
+    "module": "esnext",
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "lib": ["es6"],
+    "sourceMap": true,
+    "removeComments": true,
+    "jsx": "react-native",
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": false,
+    "strictFunctionTypes": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "noUnusedLocals": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "resolveJsonModule": true,
+    "target": "esnext"
+  }
+}

tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "./tsconfig.base.json",
+  "include": ["src", "./typings.d.ts", "types", "test"],
+  "exclude": ["node_modules", "dist"]  
+}

yarn.lock

@@ -739,6 +739,11 @@
     into-stream "^4.0.0"
     lodash "^4.17.4"
 
+"@types/invariant@^2.2.29":
+  version "2.2.29"
+  resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.29.tgz#aa845204cd0a289f65d47e0de63a6a815e30cc66"
+  integrity sha512-lRVw09gOvgviOfeUrKc/pmTiRZ7g7oDOU6OAutyuSHpm1/o2RaBQvRhgK8QEdu+FFuw/wnWb29A/iuxv9i8OpQ==
+
 "@types/prop-types@*":
   version "15.5.6"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.6.tgz#9c03d3fed70a8d517c191b7734da2879b50ca26c"
@@ -2572,7 +2577,7 @@ fbjs-scripts@^0.8.1:
     semver "^5.1.0"
     through2 "^2.0.0"
 
-fbjs@^0.8.17, fbjs@^0.8.9:
+fbjs@^0.8.9:
   version "0.8.17"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
   dependencies:
@@ -2673,10 +2678,6 @@ find-versions@^2.0.0:
     array-uniq "^1.0.0"
     semver-regex "^1.0.0"
 
-flow-bin@^0.80.0:
-  version "0.80.0"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.80.0.tgz#04cc1ee626a6f50786f78170c92ebe1745235403"
-
 flush-write-stream@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.0.3.tgz#c5d586ef38af6097650b49bc41b55fabb19f35bd"
@@ -6374,6 +6375,11 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
+typescript@^3.1.6:
+  version "3.1.6"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.1.6.tgz#b6543a83cfc8c2befb3f4c8fba6896f5b0c9be68"
+  integrity sha512-tDMYfVtvpb96msS1lDX9MEdHrW4yOuZ4Kdc4Him9oU796XldPYF/t2+uKoX0BBa0hXXwDlqYQbXY5Rzjzc5hBA==
+
 ua-parser-js@^0.7.18:
   version "0.7.18"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed"