diff --git a/README.md b/README.md index 3ab6128..c0d3a98 100644 --- a/README.md +++ b/README.md @@ -65,9 +65,7 @@ import { WebView } from 'react-native-webview'; // ... class MyWebComponent extends Component { render() { - return ( - - ); + return ; } } ``` diff --git a/bin/setup b/bin/setup index 7ad521f..38212df 100755 --- a/bin/setup +++ b/bin/setup @@ -18,7 +18,7 @@ fi # React Native installed? if ! [ -x "$(command -v react-native)" ]; then echo 'Error: React Native is not installed.' >&2 - echo 'Go here: https://facebook.github.io/react-native/docs/getting-started.html' >&2 + echo 'Go here: https://reactnative.dev/docs/getting-started.html' >&2 echo 'Use the "Building Projects With Native Code" option.' exit 1 fi diff --git a/docs/Custom-Android.md b/docs/Custom-Android.md index ec581d3..4ad4dda 100644 --- a/docs/Custom-Android.md +++ b/docs/Custom-Android.md @@ -1,14 +1,14 @@ While the built-in web view has a lot of features, it is not possible to handle every use-case in React Native. You can, however, extend the web view with native code without forking React Native or duplicating all the existing web view code. -Before you do this, you should be familiar with the concepts in [native UI components](https://facebook.github.io/react-native/docs/native-components-android). You should also familiarise yourself with the [native code for web views](https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java), as you will have to use this as a reference when implementing new features—although a deep understanding is not required. +Before you do this, you should be familiar with the concepts in [native UI components](https://reactnative.dev/docs/native-components-android). You should also familiarise yourself with the [native code for web views](https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java), as you will have to use this as a reference when implementing new features—although a deep understanding is not required. ## Native Code To get started, you'll need to create a subclass of `RNCWebViewManager`, `RNCWebView`, and `ReactWebViewClient`. In your view manager, you'll then need to override: -* `createReactWebViewInstance` -* `getName` -* `addEventEmitters` +- `createReactWebViewInstance` +- `getName` +- `addEventEmitters` ```java @ReactModule(name = CustomWebViewManager.REACT_CLASS) @@ -168,22 +168,22 @@ public class CustomWebViewManager extends RNCWebViewManager { To use your custom web view, you'll need to create a class for it. Your class must: -* Export all the prop types from `WebView.propTypes` -* Return a `WebView` component with the prop `nativeConfig.component` set to your native component (see below) +- Export all the prop types from `WebView.propTypes` +- Return a `WebView` component with the prop `nativeConfig.component` set to your native component (see below) To get your native component, you must use `requireNativeComponent`: the same as for regular custom components. However, you must pass in an extra third argument, `WebView.extraNativeComponentConfig`. This third argument contains prop types that are only required for native code. ```javascript -import React, {Component, PropTypes} from 'react'; -import {requireNativeComponent} from 'react-native'; -import {WebView} from 'react-native-webview'; +import React, { Component, PropTypes } from 'react'; +import { requireNativeComponent } from 'react-native'; +import { WebView } from 'react-native-webview'; export default class CustomWebView extends Component { static propTypes = WebView.propTypes; render() { return ( - + ); } } @@ -191,7 +191,7 @@ export default class CustomWebView extends Component { const RCTCustomWebView = requireNativeComponent( 'RCTCustomWebView', CustomWebView, - WebView.extraNativeComponentConfig + WebView.extraNativeComponentConfig, ); ``` @@ -213,8 +213,8 @@ export default class CustomWebView extends Component { finalUrl: 'about:blank', }; - _onNavigationCompleted = (event) => { - const {onNavigationCompleted} = this.props; + _onNavigationCompleted = event => { + const { onNavigationCompleted } = this.props; onNavigationCompleted && onNavigationCompleted(event); }; @@ -249,6 +249,6 @@ const RCTCustomWebView = requireNativeComponent( ...WebView.extraNativeComponentConfig.nativeOnly, onScrollToBottom: true, }, - } + }, ); ``` diff --git a/docs/Getting-Started.md b/docs/Getting-Started.md index 70f9ab0..cfa9ede 100644 --- a/docs/Getting-Started.md +++ b/docs/Getting-Started.md @@ -7,9 +7,11 @@ Here's how to get started quickly with the React Native WebView. ``` $ yarn add react-native-webview ``` - (or) - - For npm use + +(or) + +For npm use + ``` $ npm install --save react-native-webview ``` @@ -29,11 +31,12 @@ _NOTE: If you ever need to uninstall React Native WebView, run `react-native unl ### iOS: If using cocoapods in the `ios/` directory run + ``` $ pod install ``` -For iOS, while you can manually link the old way using [react-native own tutorial](https://facebook.github.io/react-native/docs/linking-libraries-ios), we find it easier to use cocoapods. +For iOS, while you can manually link the old way using [react-native own tutorial](https://reactnative.dev/docs/linking-libraries-ios), we find it easier to use cocoapods. If you wish to use cocoapods and haven't set it up yet, please instead refer to [that article](https://engineering.brigad.co/demystifying-react-native-modules-linking-ae6c017a6b4a). ### Android: @@ -53,9 +56,9 @@ For Android manual installation, please refer to [this article](https://engineer ### macOS: -Cocoapod and autolinking is not yet support for react-native macOS but is coming soon. In the meantime you must manually link. +Cocoapod and autolinking is not yet support for react-native macOS but is coming soon. In the meantime you must manually link. -The method is nearly identical to the [manual linking method for iOS](https://facebook.github.io/react-native/docs/linking-libraries-ios#manual-linking) except that you will include the `node_modules/react-native-webview/macos/RNCWebView.xcodeproj` project in your main project and link the `RNCWebView-macOS.a` library. +The method is nearly identical to the [manual linking method for iOS](https://reactnative.dev/docs/linking-libraries-ios#manual-linking) except that you will include the `node_modules/react-native-webview/macos/RNCWebView.xcodeproj` project in your main project and link the `RNCWebView-macOS.a` library. ## 3. Import the webview into your component diff --git a/docs/Guide.md b/docs/Guide.md index f6c633b..8ede34d 100644 --- a/docs/Guide.md +++ b/docs/Guide.md @@ -48,9 +48,7 @@ import { WebView } from 'react-native-webview'; class MyWeb extends Component { render() { - return ( - - ); + return ; } } ``` @@ -63,13 +61,11 @@ Sometimes you would have bundled an HTML file along with the app and would like import React, { Component } from 'react'; import { WebView } from 'react-native-webview'; -const myHtmlFile = require("./my-asset-folder/local-site.html"); +const myHtmlFile = require('./my-asset-folder/local-site.html'); class MyWeb extends Component { render() { - return ( - - ); + return ; } } ``` @@ -83,7 +79,7 @@ import { WebView } from 'react-native-webview'; class MyWeb extends Component { render() { return ( - + ); } } @@ -104,7 +100,7 @@ class MyWeb extends Component { return ( (this.webview = ref)} - source={{ uri: 'https://facebook.github.io/react-native/' }} + source={{ uri: 'https://reactnative.dev/' }} onNavigationStateChange={this.handleWebViewNavigationStateChange} /> ); @@ -141,7 +137,7 @@ class MyWeb extends Component { // redirect somewhere else if (url.includes('google.com')) { - const newURL = 'https://facebook.github.io/react-native/'; + const newURL = 'https://reactnative.dev/'; const redirectTo = 'window.location = "' + newURL + '"'; this.webview.injectJavaScript(redirectTo); } @@ -195,7 +191,7 @@ Add permission in AndroidManifest.xml: If the file input indicates that images or video is desired with [`accept`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept), then the WebView will attempt to provide options to the user to use their camera to take a picture or video. -Normally, apps that do not have permission to use the camera can prompt the user to use an external app so that the requesting app has no need for permission. However, Android has made a special exception for this around the camera to reduce confusion for users. If an app *can* request the camera permission because it has been declared, and the user has not granted the permission, it may not fire an intent that would use the camera (`MediaStore.ACTION_IMAGE_CAPTURE` or `MediaStore.ACTION_VIDEO_CAPTURE`). In this scenario, it is up to the developer to request camera permission before a file upload directly using the camera is necessary. +Normally, apps that do not have permission to use the camera can prompt the user to use an external app so that the requesting app has no need for permission. However, Android has made a special exception for this around the camera to reduce confusion for users. If an app _can_ request the camera permission because it has been declared, and the user has not granted the permission, it may not fire an intent that would use the camera (`MediaStore.ACTION_IMAGE_CAPTURE` or `MediaStore.ACTION_VIDEO_CAPTURE`). In this scenario, it is up to the developer to request camera permission before a file upload directly using the camera is necessary. ##### Check for File Upload support, with `static isFileUploadSupported()` @@ -304,7 +300,6 @@ _Under the hood_ > On iOS, `injectedJavaScript` runs a method on WebView called `evaluateJavaScript:completionHandler:` > On Android, `injectedJavaScript` runs a method on the Android WebView called `evaluateJavascriptWithFallback` - #### The `injectedJavaScriptBeforeContentLoaded` prop This is a script that runs **before** the web page loads for the first time. It only runs once, even if the page is reloaded or navigated away. This is useful if you want to inject anything into the window, localstorage, or document prior to the web code executing. diff --git a/docs/README.portuguese.md b/docs/README.portuguese.md index 92f9047..8d8f838 100644 --- a/docs/README.portuguese.md +++ b/docs/README.portuguese.md @@ -62,9 +62,7 @@ import { WebView } from 'react-native-webview'; // ... class MyWebComponent extends Component { render() { - return ( - - ); + return ; } } ``` diff --git a/docs/Reference.md b/docs/Reference.md index 5852eb7..093dc5e 100644 --- a/docs/Reference.md +++ b/docs/Reference.md @@ -75,6 +75,7 @@ This document lays out the current public properties and methods for the React N - [`clearCache`](Reference.md#clearCache) - [`clearHistory`](Reference.md#clearHistory) - [`requestFocus`](Reference.md#requestFocus) + --- # Reference @@ -137,7 +138,7 @@ const INJECTED_JAVASCRIPT = `(function() { })();`; ; @@ -166,7 +167,7 @@ const INJECTED_JAVASCRIPT = `(function() { })();`; ; @@ -214,7 +215,7 @@ Example: ```jsx { const { nativeEvent } = syntheticEvent; console.warn('WebView error: ', nativeEvent); @@ -254,7 +255,7 @@ Example: ```jsx { const { nativeEvent } = syntheticEvent; this.url = nativeEvent.url; @@ -287,7 +288,7 @@ Example: ```jsx { // update component to be aware of loading status const { nativeEvent } = syntheticEvent; @@ -321,7 +322,7 @@ Example: ```jsx { // update component to be aware of loading status const { nativeEvent } = syntheticEvent; @@ -355,7 +356,7 @@ Example: ```jsx { this.loadingProgress = nativeEvent.progress; }} @@ -391,7 +392,7 @@ Example: ```jsx { const { nativeEvent } = syntheticEvent; console.warn( @@ -446,7 +447,7 @@ Example: ```jsx { // Keep track of going back navigation within component this.canGoBack = navState.canGoBack; @@ -482,7 +483,7 @@ Example: ```jsx { const { nativeEvent } = syntheticEvent; console.warn('Content process terminated, reloading', nativeEvent); @@ -517,7 +518,7 @@ Example: ```jsx //only allow URIs that begin with https:// or git:// ``` @@ -536,7 +537,7 @@ Example: ```jsx } /> ``` @@ -557,7 +558,7 @@ Example: ```jsx } /> @@ -589,10 +590,10 @@ Example: ```jsx { // Only allow navigating within this website - return request.url.startsWith('https://facebook.github.io/react-native'); + return request.url.startsWith('https://reactnative.dev'); }} /> ``` @@ -635,7 +636,7 @@ Example: ```jsx ``` @@ -654,7 +655,7 @@ Example: ```jsx ``` @@ -750,7 +751,7 @@ Append to the existing user-agent. Setting `userAgent` will override this. ```jsx // Resulting User-Agent will look like: @@ -984,9 +985,9 @@ If true, this will hide the keyboard accessory view (< > and Done). If true, this will be able horizontal swipe gestures. The default value is `false`. -| Type | Required | Platform | -| ------- | -------- | ----------------- | -| boolean | No | iOS and macOS | +| Type | Required | Platform | +| ------- | -------- | ------------- | +| boolean | No | iOS and macOS | --- @@ -1061,9 +1062,9 @@ If the value of this property is true, the scroll view stops on multiples of the A Boolean value that determines whether pressing on a link displays a preview of the destination for the link. In iOS 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. -| Type | Required | Platform | -| ------- | -------- | ----------------- | -| boolean | No | iOS and macOS | +| Type | Required | Platform | +| ------- | -------- | ------------- | +| boolean | No | iOS and macOS | --- @@ -1071,9 +1072,9 @@ A Boolean value that determines whether pressing on a link displays a preview of Set `true` if shared cookies from `[NSHTTPCookieStorage sharedHTTPCookieStorage]` should used for every load request in the WebView. The default value is `false`. For more on cookies, read the [Guide](Guide.md#Managing-Cookies) -| Type | Required | Platform | -| ------- | -------- | ----------------- | -| boolean | No | iOS and macOS | +| Type | Required | Platform | +| ------- | -------- | ------------- | +| boolean | No | iOS and macOS | --- @@ -1150,30 +1151,34 @@ requestFocus(); Request the webView to ask for focus. (People working on TV apps might want having a look at this!) ### `clearFormData()` + (android only) ```javascript clearFormData(); ``` -Removes the autocomplete popup from the currently focused form field, if present. [developer.android.com reference](https://developer.android.com/reference/android/webkit/WebView.html#clearFormData()) +Removes the autocomplete popup from the currently focused form field, if present. [developer.android.com reference]() ### `clearCache(bool)` + (android only) + ```javascript clearCache(true); ``` -Clears the resource cache. Note that the cache is per-application, so this will clear the cache for all WebViews used. [developer.android.com reference](https://developer.android.com/reference/android/webkit/WebView.html#clearCache(boolean)) - +Clears the resource cache. Note that the cache is per-application, so this will clear the cache for all WebViews used. [developer.android.com reference]() ### `clearHistory()` + (android only) + ```javascript clearHistory(); ``` -Tells this WebView to clear its internal back/forward list. [developer.android.com reference](https://developer.android.com/reference/android/webkit/WebView.html#clearHistory()) +Tells this WebView to clear its internal back/forward list. [developer.android.com reference]() ## Other Docs diff --git a/example/android/app/build.gradle b/example/android/app/build.gradle index 6eb1758..6745386 100755 --- a/example/android/app/build.gradle +++ b/example/android/app/build.gradle @@ -18,7 +18,7 @@ import com.android.build.OutputFile * // the entry file for bundle generation * entryFile: "index.android.js", * - * // https://facebook.github.io/react-native/docs/performance#enable-the-ram-format + * // https://reactnative.dev/docs/performance#enable-the-ram-format * bundleCommand: "ram-bundle", * * // whether to bundle JS and assets in debug mode @@ -158,7 +158,7 @@ android { } release { // Caution! In production, you need to generate your own keystore file. - // see https://facebook.github.io/react-native/docs/signed-apk-android. + // see https://reactnative.dev/docs/signed-apk-android. signingConfig signingConfigs.debug minifyEnabled enableProguardInReleaseBuilds proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"