npm - @exodus/react-native-webview - Versions diffs - 11.26.1-exodus.12 → 11.26.1-exodus.13 - Mend

@exodus/react-native-webview 11.26.1-exodus.12 → 11.26.1-exodus.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (87) hide show

package/.all-contributorsrc +185 -0
package/.circleci/config.yml +66 -0
package/.eslintignore +2 -0
package/.eslintrc.js +94 -0
package/.flowconfig +88 -0
package/.flowconfig.android +88 -0
package/.gitattributes +12 -0
package/.github/CODEOWNERS +1 -0
package/.github/ISSUE_TEMPLATE/bug-report.md +42 -0
package/.github/ISSUE_TEMPLATE/feature_request.md +30 -0
package/.github/workflows/android-ci.yml +35 -0
package/.github/workflows/detox.yml +20 -0
package/.github/workflows/ios-ci.yml +31 -0
package/.github/workflows/scripts/install-vs-features.ps1 +108 -0
package/.github/workflows/stale.yml +17 -0
package/.gitignore +62 -0
package/.prettierrc.js +10 -0
package/.releaserc +15 -0
package/.vscode/settings.json +9 -0
package/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java +5 -6
package/apple/RNCWebView.h +1 -0
package/apple/RNCWebView.m +17 -10
package/apple/RNCWebViewManager.m +1 -0
package/babel.config.js +11 -0
package/bin/setup +26 -0
package/docs/Contributing.md +102 -0
package/docs/Custom-Android.md +222 -0
package/docs/Custom-iOS.md +236 -0
package/docs/Debugging.md +101 -0
package/docs/Getting-Started.md +142 -0
package/docs/Guide.md +613 -0
package/docs/Reference.md +1639 -0
package/example/.gitignore +14 -0
package/example/.watchmanconfig +1 -0
package/example/App.tsx +262 -0
package/example/android/build.gradle +15 -0
package/example/android/gradle/wrapper/gradle-wrapper.jar +0 -0
package/example/android/gradle/wrapper/gradle-wrapper.properties +5 -0
package/example/android/gradle.properties +34 -0
package/example/android/gradlew +234 -0
package/example/android/gradlew.bat +89 -0
package/example/android/settings.gradle +12 -0
package/example/app.json +20 -0
package/example/assets/test.html +9 -0
package/example/babel.config.js +3 -0
package/example/examples/Alerts.tsx +72 -0
package/example/examples/ApplePay.tsx +23 -0
package/example/examples/Background.tsx +54 -0
package/example/examples/Downloads.tsx +57 -0
package/example/examples/Injection.tsx +161 -0
package/example/examples/LocalPageLoad.tsx +16 -0
package/example/examples/Messaging.tsx +63 -0
package/example/examples/NativeWebpage.tsx +22 -0
package/example/examples/Scrolling.tsx +68 -0
package/example/examples/Uploads.tsx +69 -0
package/example/index.js +9 -0
package/example/ios/Podfile +8 -0
package/example/ios/Podfile.lock +445 -0
package/jest-setups/jest.setup.js +8 -0
package/jest.config.js +184 -0
package/lib/WebView.android.d.ts.map +1 -0
package/lib/WebView.android.js +2 -3
package/lib/WebView.d.ts.map +1 -0
package/lib/WebView.ios.d.ts.map +1 -0
package/lib/WebView.ios.js +2 -3
package/lib/WebView.styles.d.ts.map +1 -0
package/lib/WebViewNativeComponent.android.d.ts.map +1 -0
package/lib/WebViewNativeComponent.ios.d.ts.map +1 -0
package/lib/WebViewShared.d.ts.map +1 -0
package/lib/WebViewTypes.d.ts +5 -0
package/lib/WebViewTypes.d.ts.map +1 -0
package/lib/index.d.ts.map +1 -0
package/metro.config.js +57 -0
package/package.json +1 -1
package/src/WebView.android.tsx +246 -0
package/src/WebView.ios.tsx +221 -0
package/src/WebView.styles.ts +44 -0
package/src/WebView.tsx +18 -0
package/src/WebViewNativeComponent.android.ts +8 -0
package/src/WebViewNativeComponent.ios.ts +8 -0
package/src/WebViewShared.tsx +257 -0
package/src/WebViewTypes.ts +920 -0
package/src/__tests__/WebViewShared-test.js +208 -0
package/src/__tests__/__snapshots__/WebViewShared-test.js.snap +8 -0
package/src/index.ts +4 -0
package/tsconfig.json +24 -0
package/yarn.lock +13397 -0

package/example/assets/test.html ADDED Viewed

@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+    <head>
+        <title>Test</title>
+    </head>
+    <body>
+        <h2>Local page test</h2>
+    </body>
+</html>

package/example/babel.config.js ADDED Viewed

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+};

package/example/examples/Alerts.tsx ADDED Viewed

@@ -0,0 +1,72 @@
+import React, {Component} from 'react';
+import {Text, View} from 'react-native';
+import WebView from 'react-native-webview';
+const HTML = `
+<!DOCTYPE html>\n
+<html>
+  <head>
+    <title>Alerts</title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=320, user-scalable=no">
+    <style type="text/css">
+      body {
+        margin: 0;
+        padding: 0;
+        font: 62.5% arial, sans-serif;
+        background: #ccc;
+      }
+    </style>
+  </head>
+  <body>
+    <button onclick="showAlert()">Show alert</button>
+    <button onclick="showConfirm()">Show confirm</button>
+    <button onclick="showPrompt()">Show prompt</button>
+    <p id="demo"></p>
+    <script>
+      function showAlert() {
+        alert("Hello! I am an alert box!");
+        document.getElementById("demo").innerHTML = "Alert dismissed!";
+      }
+      function showConfirm() {
+        var response;
+        if (confirm("Press a button!")) {
+          response = "You pressed OK on confirm!";
+        } else {
+          response = "You pressed Cancel on confirm!";
+        }
+        document.getElementById("demo").innerHTML = response;
+      }
+      function showPrompt() {
+        var message;
+        const name = prompt("Please enter your name", "Name");
+        if (name !== null) {
+          message = "Hello " + name;
+        } else {
+          message = "You pressed Cancel on prompt!";
+        }
+        document.getElementById("demo").innerHTML = message;
+      }
+    </script>
+  </body>
+</html>
+`;
+type Props = {};
+type State = {};
+export default class Alerts extends Component<Props, State> {
+  state = {};
+  render() {
+    return (
+      <View style={{ height: 120 }}>
+        <WebView
+          source={{html: HTML}}
+          automaticallyAdjustContentInsets={false}
+        />
+      </View>
+    );
+  }
+}

package/example/examples/ApplePay.tsx ADDED Viewed

@@ -0,0 +1,23 @@
+import React, {Component} from 'react';
+import {View} from 'react-native';
+import WebView from 'react-native-webview';
+type Props = {};
+type State = {};
+export default class Alerts extends Component<Props, State> {
+    state = {};
+    render() {
+        return (
+            <View style={{ flex: 1 }}>
+                <WebView
+                    enableApplePay={true}
+                    source={{uri: "https://applepaydemo.apple.com/"}}
+                    automaticallyAdjustContentInsets={false}
+                />
+            </View>
+        );
+    }
+}

package/example/examples/Background.tsx ADDED Viewed

@@ -0,0 +1,54 @@
+import React, {Component} from 'react';
+import {Text, View} from 'react-native';
+import WebView from 'react-native-webview';
+const HTML = `
+<!DOCTYPE html>\n
+<html>
+  <head>
+    <title>Hello World</title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=320, user-scalable=no">
+    <style type="text/css">
+      body {
+        margin: 0;
+        padding: 0;
+        font: 62.5% arial, sans-serif;
+        background: transparent;
+      }
+    </style>
+  </head>
+  <body>
+    <p>HTML content in transparent body.</p>
+  </body>
+</html>
+`;
+type Props = {};
+type State = {
+  backgroundColor: string,
+};
+export default class Background extends Component<Props, State> {
+  state = {
+    backgroundColor: '#FF00FF00'
+  };
+  render() {
+    return (
+      <View>
+        <View style={{backgroundColor:'red'}}>
+          <View style={{ height: 120 }}>
+            <WebView
+              source={{html: HTML}}
+              automaticallyAdjustContentInsets={false}
+              style={{backgroundColor:'#00000000'}}
+            />
+          </View>
+        </View>
+        <Text>WebView is transparent contained in a View with a red backgroundColor</Text>
+      </View>
+    );
+  }
+}

package/example/examples/Downloads.tsx ADDED Viewed

@@ -0,0 +1,57 @@
+import React, {Component} from 'react';
+import {Alert, Platform, View} from 'react-native';
+import WebView, {FileDownload} from 'react-native-webview';
+const HTML = `
+<!DOCTYPE html>\n
+<html>
+  <head>
+    <title>Downloads</title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=320, user-scalable=no">
+    <style type="text/css">
+      body {
+        margin: 0;
+        padding: 0;
+        font: 62.5% arial, sans-serif;
+        background: #ccc;
+      }
+    </style>
+  </head>
+  <body>
+    <a href="https://www.7-zip.org/a/7za920.zip">Example zip file download</a>
+    <br>
+    <a href="http://test.greenbytes.de/tech/tc2231/attwithisofn2231iso.asis">Download file with non-ascii filename: "foo-ä.html"</a>
+  </body>
+</html>
+`;
+type Props = {};
+type State = {};
+export default class Downloads extends Component<Props, State> {
+  state = {};
+  onFileDownload = ({ nativeEvent }: { nativeEvent: FileDownload } ) => {
+    Alert.alert("File download detected", nativeEvent.downloadUrl);
+  };
+  render() {
+    const platformProps = Platform.select({
+      ios: {
+        onFileDownload: this.onFileDownload,
+      },
+    });
+    return (
+      <View style={{ height: 120 }}>
+        <WebView
+          source={{html: HTML}}
+          automaticallyAdjustContentInsets={false}
+          {...platformProps}
+        />
+      </View>
+    );
+  }
+}

package/example/examples/Injection.tsx ADDED Viewed

@@ -0,0 +1,161 @@
+import React, {Component} from 'react';
+import {Text, View, ScrollView} from 'react-native';
+import WebView from 'react-native-webview';
+const HTML = `
+<!DOCTYPE html>
+<html>
+  <head>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1">
+      <title>iframe test</title>
+  </head>
+  <body>
+    <p style="">beforeContentLoaded on the top frame <span id="before_failed" style="display: inline-block;">failed</span><span id="before_succeeded" style="display: none;">succeeded</span>!</p>
+    <p style="">afterContentLoaded on the top frame <span id="after_failed" style="display: inline-block;">failed</span><span id="after_succeeded" style="display: none;">succeeded</span>!</p>
+    <iframe src="https://birchlabs.co.uk/linguabrowse/infopages/obsol/iframe.html?v=1" name="iframe_0" style="width: 100%; height: 25px;"></iframe>
+    <iframe src="https://birchlabs.co.uk/linguabrowse/infopages/obsol/iframe2.html?v=1" name="iframe_1" style="width: 100%; height: 25px;"></iframe>
+    <iframe src="https://www.ebay.co.uk" name="iframe_2" style="width: 100%; height: 25px;"></iframe>
+  </body>
+</html>
+`;
+type Props = {};
+type State = {
+  backgroundColor: string,
+};
+export default class Injection extends Component<Props, State> {
+  state = {
+    backgroundColor: '#FF00FF00'
+  };
+  render() {
+    return (
+      <ScrollView>
+        <View style={{ }}>
+          <View style={{ height: 400 }}>
+            <WebView
+              /**
+               * This HTML is a copy of the hosted multi-frame JS injection test.
+               * I have found that Android doesn't support beforeContentLoaded for a hosted HTML webpage, yet does for a static source.
+               * The cause of this is unresolved.
+               */
+              // source={{ html: HTML }}
+              source={{ uri: "https://birchlabs.co.uk/linguabrowse/infopages/obsol/rnw_iframe_test.html" }}
+              automaticallyAdjustContentInsets={false}
+              style={{backgroundColor:'#00000000'}}
+              /* Must be populated in order for `messagingEnabled` to be `true` to activate the
+               * JS injection user scripts, consistent with current behaviour. This is undesirable,
+               * so needs addressing in a follow-up PR. */
+              onMessage={() => {}}
+              injectedJavaScriptBeforeContentLoadedForMainFrameOnly={false}
+              injectedJavaScriptForMainFrameOnly={false}
+              /* We set this property in each frame */
+              injectedJavaScriptBeforeContentLoaded={`
+              console.log("executing injectedJavaScriptBeforeContentLoaded... " + (new Date()).toString());
+              if(typeof window.top.injectedIframesBeforeContentLoaded === "undefined"){
+                window.top.injectedIframesBeforeContentLoaded = [];
+              }
+              window.self.colourToUse = "orange";
+              if(window.self === window.top){
+                console.log("Was window.top. window.frames.length is:", window.frames.length);
+                window.self.numberOfFramesAtBeforeContentLoaded = window.frames.length;
+                function declareSuccessOfBeforeContentLoaded(head){
+                  var style = window.self.document.createElement('style');
+                  style.type = 'text/css';
+                  style.innerHTML = "#before_failed { display: none !important; }#before_succeeded { display: inline-block !important; }";
+                  head.appendChild(style);
+                }
+                const head = (window.self.document.head || window.self.document.getElementsByTagName('head')[0]);
+                if(head){
+                  declareSuccessOfBeforeContentLoaded(head);
+                } else {
+                  window.self.document.addEventListener("DOMContentLoaded", function (event) {
+                    const head = (window.self.document.head || window.self.document.getElementsByTagName('head')[0]);
+                    declareSuccessOfBeforeContentLoaded(head);
+                  });
+                }
+              } else {
+                window.top.injectedIframesBeforeContentLoaded.push(window.self.name);
+                console.log("wasn't window.top.");
+                console.log("wasn't window.top. Still going...");
+              }
+              `}
+              /* We read the colourToUse property in each frame to recolour each frame */
+              injectedJavaScript={`
+              console.log("executing injectedJavaScript... " + (new Date()).toString());
+              if(typeof window.top.injectedIframesAfterContentLoaded === "undefined"){
+                window.top.injectedIframesAfterContentLoaded = [];
+              }
+              if(window.self.colourToUse){
+                window.self.document.body.style.backgroundColor = window.self.colourToUse;
+              } else {
+                window.self.document.body.style.backgroundColor = "cyan";
+              }
+              if(window.self === window.top){
+                function declareSuccessOfAfterContentLoaded(head){
+                  var style = window.self.document.createElement('style');
+                  style.type = 'text/css';
+                  style.innerHTML = "#after_failed { display: none !important; }#after_succeeded { display: inline-block !important; }";
+                  head.appendChild(style);
+                }
+                declareSuccessOfAfterContentLoaded(window.self.document.head || window.self.document.getElementsByTagName('head')[0]);
+                // var numberOfFramesAtBeforeContentLoadedEle = document.createElement('p');
+                // numberOfFramesAtBeforeContentLoadedEle.textContent = "Number of iframes upon the main frame's beforeContentLoaded: " +
+                // window.self.numberOfFramesAtBeforeContentLoaded;
+                // var numberOfFramesAtAfterContentLoadedEle = document.createElement('p');
+                // numberOfFramesAtAfterContentLoadedEle.textContent = "Number of iframes upon the main frame's afterContentLoaded: " + window.frames.length;
+                // numberOfFramesAtAfterContentLoadedEle.id = "numberOfFramesAtAfterContentLoadedEle";
+                var namedFramesAtBeforeContentLoadedEle = document.createElement('p');
+                namedFramesAtBeforeContentLoadedEle.textContent = "Names of iframes that called beforeContentLoaded: " + JSON.stringify(window.top.injectedIframesBeforeContentLoaded || []);
+                namedFramesAtBeforeContentLoadedEle.id = "namedFramesAtBeforeContentLoadedEle";
+                var namedFramesAtAfterContentLoadedEle = document.createElement('p');
+                namedFramesAtAfterContentLoadedEle.textContent = "Names of iframes that called afterContentLoaded: " + JSON.stringify(window.top.injectedIframesAfterContentLoaded);
+                namedFramesAtAfterContentLoadedEle.id = "namedFramesAtAfterContentLoadedEle";
+                // document.body.appendChild(numberOfFramesAtBeforeContentLoadedEle);
+                // document.body.appendChild(numberOfFramesAtAfterContentLoadedEle);
+                document.body.appendChild(namedFramesAtBeforeContentLoadedEle);
+                document.body.appendChild(namedFramesAtAfterContentLoadedEle);
+              } else {
+                window.top.injectedIframesAfterContentLoaded.push(window.self.name);
+                window.top.document.getElementById('namedFramesAtAfterContentLoadedEle').textContent = "Names of iframes that called afterContentLoaded: " + JSON.stringify(window.top.injectedIframesAfterContentLoaded);
+              }
+              `}
+            />
+          </View>
+        </View>
+        <Text>This test presents three iframes: iframe_0 (yellow); iframe_1 (pink); and iframe_2 (transparent, because its 'X-Frame-Options' is set to 'SAMEORIGIN').</Text>
+        <Text>Before injection, the main frame's background is the browser's default value (transparent or white) and each frame has its natural colour.</Text>
+        {/*<Text>1a) At injection time "beforeContentLoaded", a variable will be set in each frame to set 'orange' as the "colour to be used".</Text>*/}
+        {/*<Text>1b) Also upon "beforeContentLoaded", a style element to change the text "beforeContentLoaded failed" -> "beforeContentLoaded succeeded" will be applied as soon as the head has loaded.</Text>*/}
+        {/*<Text>2a) At injection time "afterContentLoaded", that variable will be read – if present, the colour orange will be injected into all frames. Otherwise, cyan.</Text>*/}
+        {/*<Text>2b) Also upon "afterContentLoaded", a style element to change the text "afterContentLoaded failed" -> "afterContentLoaded succeeded" will be applied as soon as the head has loaded.</Text>*/}
+        <Text>✅ If the main frame becomes orange, then top-frame injection both beforeContentLoaded and afterContentLoaded is supported.</Text>
+        <Text>✅ If iframe_0, and iframe_1 become orange, then multi-frame injection beforeContentLoaded and afterContentLoaded is supported.</Text>
+        <Text>✅ If the two texts say "beforeContentLoaded on the top frame succeeded!" and "afterContentLoaded on the top frame succeeded!", then both injection times are supported at least on the main frame.</Text>
+        <Text>❌ If either of the two iframes become coloured cyan, then for that given frame, JS injection succeeded after the content loaded, but didn't occur before the content loaded.</Text>
+        <Text>❌ If "Names of iframes that called beforeContentLoaded: " is [], then see above.</Text>
+        <Text>❌ If "Names of iframes that called afterContentLoaded: " is [], then afterContentLoaded is not supported in iframes.</Text>
+        <Text>❌ If the main frame becomes coloured cyan, then JS injection succeeded after the content loaded, but didn't occur before the content loaded.</Text>
+        <Text>❌ If the text "beforeContentLoaded on the top frame failed" remains unchanged, then JS injection has failed on the main frame before the content loaded.</Text>
+        <Text>❌ If the text "afterContentLoaded on the top frame failed" remains unchanged, then JS injection has failed on the main frame after the content loaded.</Text>
+        <Text>❌ If the iframes remain their original colours (yellow and pink), then multi-frame injection is not supported at all.</Text>
+      </ScrollView>
+    );
+  }
+}

package/example/examples/LocalPageLoad.tsx ADDED Viewed

@@ -0,0 +1,16 @@
+import React, {Component} from 'react';
+import {View, Text, Alert, TextInput, Button} from 'react-native';
+import WebView from 'react-native-webview';
+const localHtmlFile = require('../assets/test.html');
+export default class LocalPageLoad extends Component<Props, State> {
+    render() {
+      return (
+        <View>
+            <View style={{ width: '100%', height: '100%' }}>
+                <WebView source={localHtmlFile}/>
+          </View>
+        </View>
+      );
+    }
+  }

package/example/examples/Messaging.tsx ADDED Viewed

@@ -0,0 +1,63 @@
+import React, {Component} from 'react';
+import {View, Alert} from 'react-native';
+import WebView from 'react-native-webview';
+const HTML = `<!DOCTYPE html>\n
+<html>
+  <head>
+    <title>Messaging</title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=320, user-scalable=no">
+    <style type="text/css">
+      body {
+        margin: 0;
+        padding: 0;
+        font: 62.5% arial, sans-serif;
+        background: #ccc;
+      }
+    </style>
+  </head>
+  <body>
+    <button onclick="sendPostMessage()">Send post message from JS to WebView</button>
+    <p id="demo"></p>
+    <script>
+      function sendPostMessage() {
+        window.ReactNativeWebView.postMessage('Message from JS');
+      }
+      document.addEventListener('message',function(event){
+        console.log("Message received from RN: ",event.data)
+      },false);
+    </script>
+  </body>
+</html>`;
+type Props = {};
+type State = {};
+export default class Messaging extends Component<Props, State> {
+  state = {};
+  constructor(props) {
+    super(props);
+    this.webView = React.createRef();
+  }
+  render() {
+    return (
+      <View style={{height: 120}}>
+        <WebView
+          ref={this.webView}
+          source={{html: HTML}}
+          onLoadEnd={()=>{this.webView.current.postMessage('Hello from RN');}}
+          automaticallyAdjustContentInsets={false}
+          onMessage={(e: {nativeEvent: {data?: string}}) => {
+            Alert.alert('Message received from JS: ', e.nativeEvent.data);
+          }}
+        />
+      </View>
+    );
+  }
+}

package/example/examples/NativeWebpage.tsx ADDED Viewed

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import { View } from 'react-native';
+import WebView from 'react-native-webview';
+type Props = {};
+type State = {};
+export default class NativeWebpage extends Component<Props, State> {
+  state = {};
+  render() {
+    return (
+      <View style={{ height: 400 }}>
+        <WebView
+          source={{ uri: 'https://infinite.red' }}
+          style={{ width: '100%', height: '100%' }}
+        />
+      </View>
+    );
+  }
+}

package/example/examples/Scrolling.tsx ADDED Viewed

@@ -0,0 +1,68 @@
+import React, {Component} from 'react';
+import {Button, Text, View} from 'react-native';
+import WebView from 'react-native-webview';
+const HTML = `
+<!DOCTYPE html>\n
+<html>
+  <head>
+    <title>Hello World</title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=320, user-scalable=no">
+    <style type="text/css">
+      body {
+        margin: 0;
+        padding: 0;
+        font: 62.5% arial, sans-serif;
+        background: #ccc;
+      }
+    </style>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet, virtute utroque voluptaria et duo, probo aeque partiendo pri at. Mea ut stet aliquip deterruisset. Inani erroribus principes ei mel, no dicit recteque delicatissimi usu. Ne has dolore nominavi, feugait hendrerit interesset vis ea, amet regione ne pri. Te cum amet etiam.</p>
+    <p>Ut adipiscing neglegentur mediocritatem sea, suas abhorreant ius cu, ne nostrud feugiat per. Nam paulo facete iudicabit an, an brute mundi suavitate has, ex utamur numquam duo. Sea platonem argumentum instructior in, quo no prima inani perfecto. Ex illum postea copiosae has, ei mea sonet ocurreret.</p>
+    <p>Has convenire erroribus cu, quo homero facilisis inciderint ea. Vix choro gloriatur definitionem an, te exerci debitis voluptaria pri, mea admodum antiopam neglegentur te. His ea iisque splendide, nam id malorum pertinacia. Iusto tempor in eos, vis debet erant an. An nostrum rationibus sit, et sed dicta delenit suscipiantur. Est dolore vituperatoribus in, ubique explicari est cu. Legere tractatos ut usu, probo atqui vituperata in usu, mazim nemore praesent pro no.</p>
+    <p>Ei pri facilisi accusamus. Ut partem quaestio sit, an usu audiam quaerendum, ei qui hinc soleat. Fabulas phaedrum erroribus ut est. Intellegebat delicatissimi vis cu. His ea vidit libris facilis. Usu ne scripta legimus intellegam. Hendrerit urbanitas accommodare mei in.</p>
+    <p>Brute appetere efficiendi has ne. Ei ornatus labores vis. Vel harum fierent no, ad erat partiendo vis, harum democritum duo at. Has no labitur vulputate. Has cu autem aperiam hendrerit, sed eu justo verear menandri.</p>
+  </body>
+</html>
+`;
+type Props = {};
+type State = {
+  scrollEnabled: boolean,
+  lastScrollEvent: string
+};
+export default class Scrolling extends Component<Props, State> {
+  state = {
+    scrollEnabled: true,
+    lastScrollEvent: ''
+  };
+  render() {
+    return (
+      <View>
+        <View style={{ height: 120 }}>
+          <WebView
+            source={{html: HTML}}
+            automaticallyAdjustContentInsets={false}
+            onScroll={this._onScroll}
+            scrollEnabled={this.state.scrollEnabled}
+          />
+        </View>
+        <Button
+          title={this.state.scrollEnabled ? 'Scroll enabled' : 'Scroll disabled'}
+          onPress={() => this.setState({scrollEnabled: !this.state.scrollEnabled})}
+        />
+        <Text>Last scroll event:</Text>
+        <Text>{this.state.lastScrollEvent}</Text>
+      </View>
+    );
+  }
+  _onScroll = event => {
+    this.setState({lastScrollEvent: JSON.stringify(event.nativeEvent)});
+  }
+}

package/example/examples/Uploads.tsx ADDED Viewed

@@ -0,0 +1,69 @@
+import React, {Component} from 'react';
+import {Button, Linking, Text, View} from 'react-native';
+import WebView from 'react-native-webview';
+const HTML = `
+<!DOCTYPE html>\n
+<html>
+  <head>
+    <title>Uploads</title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=320, user-scalable=no">
+    <style type="text/css">
+      body {
+        margin: 0;
+        padding: 0;
+        font: 62.5% arial, sans-serif;
+        background: #ccc;
+      }
+    </style>
+  </head>
+  <body>
+    <p>
+      <label for="images-only">Images only file upload</label>
+      <input name="images-only" type="file" accept="image/*">
+    </p>
+    <p>
+      <label for="video-only">Video only file upload</label>
+      <input name="video-only" type="file" accept="video/*">
+    </p>
+    <p>
+      <label for="any-file">Any file upload</label>
+      <input name="any-file" type="file">
+    </p>
+  </body>
+</html>
+`;
+type Props = {};
+type State = {};
+export default class Uploads extends Component<Props, State> {
+  state = {};
+  render() {
+    return (
+      <View>
+        <View style={{ height: 120 }}>
+          <WebView
+            source={{html: HTML}}
+            automaticallyAdjustContentInsets={false}
+          />
+        </View>
+        <Text>
+            Android limitation: If the file input should show camera options for the user,
+            and the app has the ability to request the camera permission, then the user must
+            grant permission first in order to see the options. Since this example app does
+            have the permission declared, you must allow it in settings to be able to see
+            camera options. If your app does not have the camera permission declared, then
+            there is no restriction to showing the camera options.
+        </Text>
+        <Button
+          title="Open settings"
+          onPress={() => Linking.openSettings()}
+        />
+      </View>
+    );
+  }
+}

package/example/index.js ADDED Viewed

@@ -0,0 +1,9 @@
+/**
+ * @format
+ */
+import {AppRegistry} from 'react-native';
+import App from './App';
+import {name as appName} from './app.json';
+AppRegistry.registerComponent(appName, () => App);

package/example/ios/Podfile ADDED Viewed

@@ -0,0 +1,8 @@
+require_relative '../../node_modules/react-native-test-app/test_app'
+workspace 'WebviewExample.xcworkspace'
+# Comment out the line below to enable Flipper
+use_flipper! false
+use_test_app! :hermes_enabled => false