status-im
/
react-native-webview
mirror of https://github.com/status-im/react-native-webview.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

chore(docs): Update React Native links to reactnative.dev (#1233)

This commit is contained in:
Luciano Lima 2020-02-26 03:54:06 -03:00 committed by GitHub
parent 19896fc810
commit 86c44588f8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 71 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -65,9 +65,7 @@ import { WebView } from 'react-native-webview';
// ...
class MyWebComponent extends Component {
render() {
return (
<WebView source={{ uri: 'https://facebook.github.io/react-native/' }} />
);
return <WebView source={{ uri: 'https://reactnative.dev/' }} />;
}
}
```

2
bin/setup
View File

@ -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

28
docs/Custom-Android.md
View File

@ -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 (
<WebView {...this.props} nativeConfig={{component: RCTCustomWebView}} />
<WebView {...this.props} nativeConfig={{ component: RCTCustomWebView }} />
);
}
}
@ -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,
},
}
},
);
```

15
docs/Getting-Started.md
View File

@ -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

19
docs/Guide.md
View File

@ -48,9 +48,7 @@ import { WebView } from 'react-native-webview';
class MyWeb extends Component {
render() {
return (
<WebView source={{ uri: 'https://facebook.github.io/react-native/' }} />
);
return <WebView source={{ uri: 'https://reactnative.dev/' }} />;
}
}
```
@ -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 (
<WebView source={myHtmlFile} />
);
return <WebView source={myHtmlFile} />;
}
}
```
@ -83,7 +79,7 @@ import { WebView } from 'react-native-webview';
class MyWeb extends Component {
render() {
return (
<WebView source={{ uri: "file:///android_asset/local-site.html" }} />
<WebView source={{ uri: 'file:///android_asset/local-site.html' }} />
);
}
}
@ -104,7 +100,7 @@ class MyWeb extends Component {
return (
<WebView
ref={ref => (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.

4
docs/README.portuguese.md
View File

@ -62,9 +62,7 @@ import { WebView } from 'react-native-webview';
// ...
class MyWebComponent extends Component {
render() {
return (
<WebView source={{ uri: 'https://facebook.github.io/react-native/' }} />
);
return <WebView source={{ uri: 'https://reactnative.dev/' }} />;
}
}
```

67
docs/Reference.md
View File

@ -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() {
})();`;
<WebView
source={{ uri: 'https://facebook.github.io/react-native' }}
source={{ uri: 'https://reactnative.dev' }}
injectedJavaScript={INJECTED_JAVASCRIPT}
onMessage={this.onMessage}
/>;
@ -166,7 +167,7 @@ const INJECTED_JAVASCRIPT = `(function() {
})();`;
<WebView
source={{ uri: 'https://facebook.github.io/react-native' }}
source={{ uri: 'https://reactnative.dev' }}
injectedJavaScriptBeforeContentLoaded={INJECTED_JAVASCRIPT}
onMessage={this.onMessage}
/>;
@ -214,7 +215,7 @@ Example:
```jsx
<WebView
source={{ uri: 'https://facebook.github.io/react-native' }}
source={{ uri: 'https://reactnative.dev' }}
onError={syntheticEvent => {
const { nativeEvent } = syntheticEvent;
console.warn('WebView error: ', nativeEvent);
@ -254,7 +255,7 @@ Example:
```jsx
<WebView
source={{ uri: 'https://facebook.github.io/react-native' }}
source={{ uri: 'https://reactnative.dev' }}
onLoad={syntheticEvent => {
const { nativeEvent } = syntheticEvent;
this.url = nativeEvent.url;
@ -287,7 +288,7 @@ Example:
```jsx
<WebView
source={{ uri: 'https://facebook.github.io/react-native' }}
source={{ uri: 'https://reactnative.dev' }}
onLoadEnd={syntheticEvent => {
// update component to be aware of loading status
const { nativeEvent } = syntheticEvent;
@ -321,7 +322,7 @@ Example:
```jsx
<WebView
source={{ uri: 'https://facebook.github.io/react-native/=' }}
source={{ uri: 'https://reactnative.dev/=' }}
onLoadStart={syntheticEvent => {
// update component to be aware of loading status
const { nativeEvent } = syntheticEvent;
@ -355,7 +356,7 @@ Example:
```jsx
<WebView
source={{ uri: 'https://facebook.github.io/react-native' }}
source={{ uri: 'https://reactnative.dev' }}
onLoadProgress={({ nativeEvent }) => {
this.loadingProgress = nativeEvent.progress;
}}
@ -391,7 +392,7 @@ Example:
```jsx
<WebView
source={{ uri: 'https://facebook.github.io/react-native' }}
source={{ uri: 'https://reactnative.dev' }}
onHttpError={syntheticEvent => {
const { nativeEvent } = syntheticEvent;
console.warn(
@ -446,7 +447,7 @@ Example:
```jsx
<WebView
source={{ uri: 'https://facebook.github.io/react-native' }}
source={{ uri: 'https://reactnative.dev' }}
onNavigationStateChange={navState => {
// Keep track of going back navigation within component
this.canGoBack = navState.canGoBack;
@ -482,7 +483,7 @@ Example:
```jsx
<WebView
source={{ uri: 'https://facebook.github.io/react-native' }}
source={{ uri: 'https://reactnative.dev' }}
onContentProcessDidTerminate={syntheticEvent => {
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://
<WebView
source={{ uri: 'https://facebook.github.io/react-native' }}
source={{ uri: 'https://reactnative.dev' }}
originWhitelist={['https://*', 'git://*']}
/>
```
@ -536,7 +537,7 @@ Example:
```jsx
<WebView
source={{ uri: 'https://facebook.github.io/react-native' }}
source={{ uri: 'https://reactnative.dev' }}
renderError={errorName => <Error name={errorName} />}
/>
```
@ -557,7 +558,7 @@ Example:
```jsx
<WebView
source={{ uri: 'https://facebook.github.io/react-native' }}
source={{ uri: 'https://reactnative.dev' }}
startInLoadingState={true}
renderLoading={() => <Loading />}
/>
@ -589,10 +590,10 @@ Example:
```jsx
<WebView
source={{ uri: 'https://facebook.github.io/react-native' }}
source={{ uri: 'https://reactnative.dev' }}
onShouldStartLoadWithRequest={request => {
// 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
<WebView
source={{ uri: 'https://facebook.github.io/react-native' }}
source={{ uri: 'https://reactnative.dev' }}
style={{ marginTop: 20 }}
/>
```
@ -654,7 +655,7 @@ Example:
```jsx
<WebView
source={{ uri: 'https://facebook.github.io/react-native' }}
source={{ uri: 'https://reactnative.dev' }}
containerStyle={{ marginTop: 20 }}
/>
```
@ -750,7 +751,7 @@ Append to the existing user-agent. Setting `userAgent` will override this.
```jsx
<WebView
source={{ uri: 'https://facebook.github.io/react-native' }}
source={{ uri: 'https://reactnative.dev' }}
applicationNameForUserAgent={'DemoApp/1.1.0'}
/>
// 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](<https://developer.android.com/reference/android/webkit/WebView.html#clearFormData()>)
### `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](<https://developer.android.com/reference/android/webkit/WebView.html#clearCache(boolean)>)
### `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](<https://developer.android.com/reference/android/webkit/WebView.html#clearHistory()>)
## Other Docs

4
example/android/app/build.gradle
View File

@ -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"