wip
This commit is contained in:
parent
0d3b1df2e3
commit
3f02dda910
|
@ -96,9 +96,9 @@ _Note that using static HTML requires the WebView property [originWhiteList](Ref
|
|||
|
||||
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`.
|
||||
|
||||
| Type | Required |
|
||||
| ---- | -------- |
|
||||
| bool | No |
|
||||
| Type | Required | Platform |
|
||||
| ---- | -------- | -------- |
|
||||
| bool | No | iOS |
|
||||
|
||||
---
|
||||
|
||||
|
@ -154,28 +154,29 @@ Example:
|
|||
|
||||
```jsx
|
||||
<WebView
|
||||
source={{ uri: "https://facebook.github.io/react-native" }}
|
||||
onError={(syntheticEvent) => {
|
||||
const { nativeEvent } = syntheticEvent
|
||||
console.warn('WebView error: ', nativeEvent)
|
||||
}}
|
||||
/>
|
||||
source={{ uri: 'https://facebook.github.io/react-native' }}
|
||||
onError={syntheticEvent => {
|
||||
const { nativeEvent } = syntheticEvent;
|
||||
console.warn('WebView error: ', nativeEvent);
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
Function passed to `onError` is called with a SyntheticEvent wrapping a nativeEvent with these properties:
|
||||
|
||||
```
|
||||
canGoBack
|
||||
canGoForward
|
||||
code
|
||||
description
|
||||
didFailProvisionalNavigation
|
||||
domain
|
||||
loading
|
||||
target
|
||||
title
|
||||
url
|
||||
```
|
||||
canGoBack
|
||||
canGoForward
|
||||
code
|
||||
description
|
||||
didFailProvisionalNavigation
|
||||
domain
|
||||
loading
|
||||
target
|
||||
title
|
||||
url
|
||||
```
|
||||
|
||||
> **_Note_**
|
||||
> Domain is only used on iOS
|
||||
|
||||
|
@ -193,8 +194,8 @@ Example:
|
|||
|
||||
```jsx
|
||||
<WebView
|
||||
source={{uri: 'https://facebook.github.io/react-native'}}
|
||||
onLoad={(syntheticEvent) => {
|
||||
source={{ uri: 'https://facebook.github.io/react-native' }}
|
||||
onLoad={syntheticEvent => {
|
||||
const { nativeEvent } = syntheticEvent;
|
||||
this.url = nativeEvent.url;
|
||||
}}
|
||||
|
@ -203,13 +204,13 @@ Example:
|
|||
|
||||
Function passed to `onLoad` is called with a SyntheticEvent wrapping a nativeEvent with these properties:
|
||||
|
||||
```
|
||||
canGoBack
|
||||
canGoForward
|
||||
loading
|
||||
target
|
||||
title
|
||||
url
|
||||
```
|
||||
canGoBack
|
||||
canGoForward
|
||||
loading
|
||||
target
|
||||
title
|
||||
url
|
||||
```
|
||||
|
||||
---
|
||||
|
@ -222,13 +223,12 @@ Function that is invoked when the `WebView` load succeeds or fails.
|
|||
| -------- | -------- |
|
||||
| function | No |
|
||||
|
||||
|
||||
Example:
|
||||
|
||||
```jsx
|
||||
<WebView
|
||||
source={{uri: 'https://facebook.github.io/react-native'}}
|
||||
onLoadEnd={(syntheticEvent) => {
|
||||
source={{ uri: 'https://facebook.github.io/react-native' }}
|
||||
onLoadEnd={syntheticEvent => {
|
||||
// update component to be aware of loading status
|
||||
const { nativeEvent } = syntheticEvent;
|
||||
this.isLoading = nativeEvent.loading;
|
||||
|
@ -238,13 +238,13 @@ Example:
|
|||
|
||||
Function passed to `onLoadEnd` is called with a SyntheticEvent wrapping a nativeEvent with these properties:
|
||||
|
||||
```
|
||||
canGoBack
|
||||
canGoForward
|
||||
loading
|
||||
target
|
||||
title
|
||||
url
|
||||
```
|
||||
canGoBack
|
||||
canGoForward
|
||||
loading
|
||||
target
|
||||
title
|
||||
url
|
||||
```
|
||||
|
||||
---
|
||||
|
@ -257,13 +257,12 @@ Function that is invoked when the `WebView` starts loading.
|
|||
| -------- | -------- |
|
||||
| function | No |
|
||||
|
||||
|
||||
Example:
|
||||
|
||||
```jsx
|
||||
<WebView
|
||||
source={{uri: 'https://facebook.github.io/react-native/='}}
|
||||
onLoadStart={(syntheticEvent) => {
|
||||
source={{ uri: 'https://facebook.github.io/react-native/=' }}
|
||||
onLoadStart={syntheticEvent => {
|
||||
// update component to be aware of loading status
|
||||
const { nativeEvent } = syntheticEvent;
|
||||
this.isLoading = nativeEvent.loading;
|
||||
|
@ -273,13 +272,13 @@ Example:
|
|||
|
||||
Function passed to `onLoadStart` is called with a SyntheticEvent wrapping a nativeEvent with these properties:
|
||||
|
||||
```
|
||||
canGoBack
|
||||
canGoForward
|
||||
loading
|
||||
target
|
||||
title
|
||||
url
|
||||
```
|
||||
canGoBack
|
||||
canGoForward
|
||||
loading
|
||||
target
|
||||
title
|
||||
url
|
||||
```
|
||||
|
||||
---
|
||||
|
@ -301,23 +300,23 @@ Example:
|
|||
|
||||
```jsx
|
||||
<WebView
|
||||
source={{ uri: "https://facebook.github.io/react-native" }}
|
||||
onLoadProgress={({ nativeEvent }) => {
|
||||
this.loadingProgress = nativeEvent.progress
|
||||
}}
|
||||
/>
|
||||
source={{ uri: 'https://facebook.github.io/react-native' }}
|
||||
onLoadProgress={({ nativeEvent }) => {
|
||||
this.loadingProgress = nativeEvent.progress;
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
Function passed to `onLoadProgress` is called with a SyntheticEvent wrapping a nativeEvent with these properties:
|
||||
|
||||
```
|
||||
canGoBack
|
||||
canGoForward
|
||||
loading
|
||||
progress
|
||||
target
|
||||
title
|
||||
url
|
||||
```
|
||||
canGoBack
|
||||
canGoForward
|
||||
loading
|
||||
progress
|
||||
target
|
||||
title
|
||||
url
|
||||
```
|
||||
|
||||
---
|
||||
|
@ -348,23 +347,24 @@ Example:
|
|||
|
||||
```jsx
|
||||
<WebView
|
||||
source={{ uri: "https://facebook.github.io/react-native" }}
|
||||
onNavigationStateChange={(navState) => {
|
||||
source={{ uri: 'https://facebook.github.io/react-native' }}
|
||||
onNavigationStateChange={navState => {
|
||||
// Keep track of going back navigation within component
|
||||
this.canGoBack = navState.canGoBack;
|
||||
}} />
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
The `navState` object includes these properties:
|
||||
|
||||
```
|
||||
canGoBack
|
||||
canGoForward
|
||||
loading
|
||||
navigationType
|
||||
target
|
||||
title
|
||||
url
|
||||
```
|
||||
canGoBack
|
||||
canGoForward
|
||||
loading
|
||||
navigationType
|
||||
target
|
||||
title
|
||||
url
|
||||
```
|
||||
|
||||
---
|
||||
|
@ -382,9 +382,9 @@ Example:
|
|||
```jsx
|
||||
//only allow URIs that begin with https:// or git://
|
||||
<WebView
|
||||
source={{ uri: "https://facebook.github.io/react-native" }}
|
||||
originWhitelist={['https://*', 'git://*']}
|
||||
/>
|
||||
source={{ uri: 'https://facebook.github.io/react-native' }}
|
||||
originWhitelist={['https://*', 'git://*']}
|
||||
/>
|
||||
```
|
||||
|
||||
---
|
||||
|
@ -397,17 +397,16 @@ Function that returns a view to show if there's an error.
|
|||
| -------- | -------- |
|
||||
| function | No |
|
||||
|
||||
|
||||
Example:
|
||||
|
||||
```jsx
|
||||
<WebView
|
||||
source={{ uri: "https://facebook.github.io/react-native" }}
|
||||
renderError={(errorName) => <Error name={errorName} /> }
|
||||
/>
|
||||
source={{ uri: 'https://facebook.github.io/react-native' }}
|
||||
renderError={errorName => <Error name={errorName} />}
|
||||
/>
|
||||
```
|
||||
|
||||
The function passed to `renderError` will be called with the name of the error
|
||||
The function passed to `renderError` will be called with the name of the error
|
||||
|
||||
---
|
||||
|
||||
|
@ -419,15 +418,14 @@ Function that returns a loading indicator. The startInLoadingState prop must be
|
|||
| -------- | -------- |
|
||||
| function | No |
|
||||
|
||||
|
||||
Example:
|
||||
|
||||
```jsx
|
||||
<WebView
|
||||
source={{ uri: "https://facebook.github.io/react-native" }}
|
||||
startInLoadingState={true}
|
||||
renderLoading={() => <Loading /> }
|
||||
/>
|
||||
source={{ uri: 'https://facebook.github.io/react-native' }}
|
||||
startInLoadingState={true}
|
||||
renderLoading={() => <Loading />}
|
||||
/>
|
||||
```
|
||||
|
||||
---
|
||||
|
@ -446,7 +444,7 @@ On iOS, when [`useWebKit=true`](Reference.md#usewebkit), this prop will not work
|
|||
|
||||
### `onShouldStartLoadWithRequest`
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
On Android, is not called on the first load.
|
||||
|
||||
|
@ -458,10 +456,10 @@ Example:
|
|||
|
||||
```jsx
|
||||
<WebView
|
||||
source={{ uri: "https://facebook.github.io/react-native" }}
|
||||
onShouldStartLoadWithRequest={(request) => {
|
||||
source={{ uri: 'https://facebook.github.io/react-native' }}
|
||||
onShouldStartLoadWithRequest={request => {
|
||||
// Only allow navigating within this website
|
||||
return request.url.startsWith("https://facebook.github.io/react-native")
|
||||
return request.url.startsWith('https://facebook.github.io/react-native');
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
@ -483,10 +481,10 @@ Example:
|
|||
|
||||
```jsx
|
||||
<WebView
|
||||
source={{ uri: "https://facebook.github.io/react-native" }}
|
||||
onShouldStartLoadWithRequest={(request) => {
|
||||
source={{ uri: 'https://facebook.github.io/react-native' }}
|
||||
onShouldStartLoadWithRequest={request => {
|
||||
// Only allow navigating within this website
|
||||
return request.url.startsWith("https://facebook.github.io/react-native")
|
||||
return request.url.startsWith('https://facebook.github.io/react-native');
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
@ -528,9 +526,9 @@ Example:
|
|||
|
||||
```jsx
|
||||
<WebView
|
||||
source={{ uri: "https://facebook.github.io/react-native" }}
|
||||
style={{marginTop: 20}}
|
||||
/>
|
||||
source={{ uri: 'https://facebook.github.io/react-native' }}
|
||||
style={{ marginTop: 20 }}
|
||||
/>
|
||||
```
|
||||
|
||||
---
|
||||
|
|
11
package.json
11
package.json
|
@ -25,21 +25,24 @@
|
|||
"react-native": ">=0.57 <0.59"
|
||||
},
|
||||
"dependencies": {
|
||||
"escape-string-regexp": "^1.0.5",
|
||||
"fbjs": "^0.8.17"
|
||||
"escape-string-regexp": "1.0.5",
|
||||
"invariant": "2.2.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.2.2",
|
||||
"@semantic-release/git": "7.0.5",
|
||||
"@types/escape-string-regexp": "^1.0.0",
|
||||
"@types/invariant": "^2.2.29",
|
||||
"@types/react": "^16.6.3",
|
||||
"@types/react-native": "^0.57.8",
|
||||
"@types/react-native": "0.57.40",
|
||||
"babel-jest": "^24.0.0",
|
||||
"flow-bin": "^0.80.0",
|
||||
"jest": "^24.0.0",
|
||||
"metro-react-native-babel-preset": "^0.51.1",
|
||||
"react": "16.6.3",
|
||||
"react-native": "^0.57.8",
|
||||
"semantic-release": "15.10.3"
|
||||
"semantic-release": "15.10.3",
|
||||
"typescript": "^3.3.3333"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
|
@ -1,49 +1,40 @@
|
|||
/**
|
||||
* 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 ReactNative, {
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Image,
|
||||
requireNativeComponent,
|
||||
StyleSheet,
|
||||
UIManager,
|
||||
UIManager as NotTypedUIManager,
|
||||
View,
|
||||
NativeModules,
|
||||
WebViewUriSource,
|
||||
ImageSourcePropType,
|
||||
findNodeHandle,
|
||||
} from 'react-native';
|
||||
|
||||
import invariant from 'fbjs/lib/invariant';
|
||||
import keyMirror from 'fbjs/lib/keyMirror';
|
||||
import invariant from 'invariant';
|
||||
|
||||
import {
|
||||
defaultOriginWhitelist,
|
||||
createOnShouldStartLoadWithRequest,
|
||||
getViewManagerConfig,
|
||||
} from './WebViewShared';
|
||||
import type {
|
||||
WebViewError,
|
||||
import {
|
||||
WebViewErrorEvent,
|
||||
WebViewMessageEvent,
|
||||
WebViewNavigationEvent,
|
||||
WebViewProgressEvent,
|
||||
WebViewSharedProps,
|
||||
WebViewSource,
|
||||
AndroidWebViewProps,
|
||||
NativeWebViewAndroid,
|
||||
State,
|
||||
CustomUIManager,
|
||||
} from './WebViewTypes';
|
||||
|
||||
const resolveAssetSource = Image.resolveAssetSource;
|
||||
import styles from './WebView.styles';
|
||||
|
||||
const WebViewState = keyMirror({
|
||||
IDLE: null,
|
||||
LOADING: null,
|
||||
ERROR: null,
|
||||
});
|
||||
const UIManager = NotTypedUIManager as CustomUIManager;
|
||||
|
||||
const resolveAssetSource = Image.resolveAssetSource;
|
||||
|
||||
const defaultRenderLoading = () => (
|
||||
<View style={styles.loadingView}>
|
||||
|
@ -51,15 +42,10 @@ const defaultRenderLoading = () => (
|
|||
</View>
|
||||
);
|
||||
|
||||
type State = {|
|
||||
viewState: WebViewState,
|
||||
lastErrorEvent: ?WebViewError,
|
||||
|};
|
||||
|
||||
/**
|
||||
* Renders a native WebView.
|
||||
*/
|
||||
class WebView extends React.Component<WebViewSharedProps, State> {
|
||||
class WebView extends React.Component<AndroidWebViewProps, State> {
|
||||
static defaultProps = {
|
||||
overScrollMode: 'always',
|
||||
javaScriptEnabled: true,
|
||||
|
@ -77,113 +63,88 @@ class WebView extends React.Component<WebViewSharedProps, State> {
|
|||
return NativeModules.RNCWebView.isFileUploadSupported();
|
||||
};
|
||||
|
||||
state = {
|
||||
viewState: this.props.startInLoadingState
|
||||
? WebViewState.LOADING
|
||||
: WebViewState.IDLE,
|
||||
state: State = {
|
||||
viewState: this.props.startInLoadingState ? 'LOADING' : 'IDLE',
|
||||
lastErrorEvent: null,
|
||||
};
|
||||
|
||||
webViewRef = React.createRef();
|
||||
webViewRef = React.createRef<NativeWebViewAndroid>();
|
||||
|
||||
render() {
|
||||
const {
|
||||
onMessage,
|
||||
onShouldStartLoadWithRequest: onShouldStartLoadWithRequestProp,
|
||||
originWhitelist,
|
||||
renderError,
|
||||
renderLoading,
|
||||
source,
|
||||
style,
|
||||
nativeConfig = {},
|
||||
...otherProps
|
||||
} = this.props;
|
||||
let otherView = null;
|
||||
|
||||
if (this.state.viewState === WebViewState.LOADING) {
|
||||
otherView = (this.props.renderLoading || defaultRenderLoading)();
|
||||
} else if (this.state.viewState === WebViewState.ERROR) {
|
||||
if (this.state.viewState === 'LOADING') {
|
||||
otherView = (renderLoading || defaultRenderLoading)();
|
||||
} else if (this.state.viewState === 'ERROR') {
|
||||
const errorEvent = this.state.lastErrorEvent;
|
||||
invariant(errorEvent != null, 'lastErrorEvent expected to be non-null');
|
||||
otherView =
|
||||
this.props.renderError &&
|
||||
this.props.renderError(
|
||||
errorEvent.domain,
|
||||
errorEvent.code,
|
||||
errorEvent.description,
|
||||
);
|
||||
} else if (this.state.viewState !== WebViewState.IDLE) {
|
||||
renderError &&
|
||||
renderError(errorEvent.domain, errorEvent.code, errorEvent.description);
|
||||
} else if (this.state.viewState !== 'IDLE') {
|
||||
console.error(
|
||||
'RNCWebView invalid state encountered: ' + this.state.viewState,
|
||||
);
|
||||
}
|
||||
|
||||
const webViewStyles = [styles.container, this.props.style];
|
||||
const webViewStyles = [styles.container, style];
|
||||
if (
|
||||
this.state.viewState === WebViewState.LOADING ||
|
||||
this.state.viewState === WebViewState.ERROR
|
||||
this.state.viewState === 'LOADING' ||
|
||||
this.state.viewState === 'ERROR'
|
||||
) {
|
||||
// if we're in either LOADING or ERROR states, don't show the webView
|
||||
webViewStyles.push(styles.hidden);
|
||||
}
|
||||
|
||||
let source: WebViewSource = this.props.source || {};
|
||||
if (!this.props.source && this.props.html) {
|
||||
source = { html: this.props.html };
|
||||
} else if (!this.props.source && this.props.url) {
|
||||
source = { uri: this.props.url };
|
||||
}
|
||||
|
||||
if (source.method === 'POST' && source.headers) {
|
||||
if (
|
||||
(source as WebViewUriSource).method === 'POST' &&
|
||||
(source as WebViewUriSource).headers
|
||||
) {
|
||||
console.warn(
|
||||
'WebView: `source.headers` is not supported when using POST.',
|
||||
);
|
||||
} else if (source.method === 'GET' && source.body) {
|
||||
} else if (
|
||||
(source as WebViewUriSource).method === 'GET' &&
|
||||
(source as WebViewUriSource).body
|
||||
) {
|
||||
console.warn('WebView: `source.body` is not supported when using GET.');
|
||||
}
|
||||
|
||||
const nativeConfig = this.props.nativeConfig || {};
|
||||
|
||||
let NativeWebView = nativeConfig.component || RNCWebView;
|
||||
let NativeWebView =
|
||||
(nativeConfig.component as typeof NativeWebViewAndroid) || RNCWebView;
|
||||
|
||||
const onShouldStartLoadWithRequest = createOnShouldStartLoadWithRequest(
|
||||
this.onShouldStartLoadWithRequestCallback,
|
||||
this.props.originWhitelist,
|
||||
this.props.onShouldStartLoadWithRequest,
|
||||
originWhitelist,
|
||||
onShouldStartLoadWithRequestProp,
|
||||
);
|
||||
|
||||
const webView = (
|
||||
<NativeWebView
|
||||
ref={this.webViewRef}
|
||||
{...otherProps}
|
||||
key="webViewKey"
|
||||
style={webViewStyles}
|
||||
source={resolveAssetSource(source)}
|
||||
scalesPageToFit={this.props.scalesPageToFit}
|
||||
allowFileAccess={this.props.allowFileAccess}
|
||||
injectedJavaScript={this.props.injectedJavaScript}
|
||||
userAgent={this.props.userAgent}
|
||||
javaScriptEnabled={this.props.javaScriptEnabled}
|
||||
androidHardwareAccelerationDisabled={
|
||||
this.props.androidHardwareAccelerationDisabled
|
||||
}
|
||||
thirdPartyCookiesEnabled={this.props.thirdPartyCookiesEnabled}
|
||||
domStorageEnabled={this.props.domStorageEnabled}
|
||||
cacheEnabled={this.props.cacheEnabled}
|
||||
onMessage={this.onMessage}
|
||||
messagingEnabled={typeof this.props.onMessage === 'function'}
|
||||
overScrollMode={this.props.overScrollMode}
|
||||
contentInset={this.props.contentInset}
|
||||
automaticallyAdjustContentInsets={
|
||||
this.props.automaticallyAdjustContentInsets
|
||||
}
|
||||
onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
|
||||
onContentSizeChange={this.props.onContentSizeChange}
|
||||
onLoadingStart={this.onLoadingStart}
|
||||
onLoadingFinish={this.onLoadingFinish}
|
||||
messagingEnabled={typeof onMessage === 'function'}
|
||||
onLoadingError={this.onLoadingError}
|
||||
onLoadingFinish={this.onLoadingFinish}
|
||||
onLoadingProgress={this.onLoadingProgress}
|
||||
testID={this.props.testID}
|
||||
geolocationEnabled={this.props.geolocationEnabled}
|
||||
mediaPlaybackRequiresUserAction={
|
||||
this.props.mediaPlaybackRequiresUserAction
|
||||
}
|
||||
allowUniversalAccessFromFileURLs={
|
||||
this.props.allowUniversalAccessFromFileURLs
|
||||
}
|
||||
mixedContentMode={this.props.mixedContentMode}
|
||||
saveFormDataDisabled={this.props.saveFormDataDisabled}
|
||||
urlPrefixesForDefaultIntent={this.props.urlPrefixesForDefaultIntent}
|
||||
showsHorizontalScrollIndicator={this.props.showsHorizontalScrollIndicator}
|
||||
showsVerticalScrollIndicator={this.props.showsVerticalScrollIndicator}
|
||||
onLoadingStart={this.onLoadingStart}
|
||||
onMessage={this.onMessage}
|
||||
onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
|
||||
ref={this.webViewRef}
|
||||
// TODO: find a better way to type this.
|
||||
source={resolveAssetSource(source as ImageSourcePropType)}
|
||||
style={webViewStyles}
|
||||
{...nativeConfig.props}
|
||||
/>
|
||||
);
|
||||
|
@ -196,14 +157,7 @@ class WebView extends React.Component<WebViewSharedProps, State> {
|
|||
);
|
||||
}
|
||||
|
||||
getViewManagerConfig = (viewManagerName: string) => {
|
||||
if (!UIManager.getViewManagerConfig) {
|
||||
return UIManager[viewManagerName];
|
||||
}
|
||||
return UIManager.getViewManagerConfig(viewManagerName);
|
||||
};
|
||||
|
||||
getCommands = () => this.getViewManagerConfig('RNCWebView').Commands;
|
||||
getCommands = () => getViewManagerConfig('RNCWebView').Commands;
|
||||
|
||||
goForward = () => {
|
||||
UIManager.dispatchViewManagerCommand(
|
||||
|
@ -223,7 +177,7 @@ class WebView extends React.Component<WebViewSharedProps, State> {
|
|||
|
||||
reload = () => {
|
||||
this.setState({
|
||||
viewState: WebViewState.LOADING,
|
||||
viewState: 'LOADING',
|
||||
});
|
||||
UIManager.dispatchViewManagerCommand(
|
||||
this.getWebViewHandle(),
|
||||
|
@ -272,8 +226,13 @@ class WebView extends React.Component<WebViewSharedProps, State> {
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns the native `WebView` node.
|
||||
*/
|
||||
getWebViewHandle = () => {
|
||||
return ReactNative.findNodeHandle(this.webViewRef.current);
|
||||
const nodeHandle = findNodeHandle(this.webViewRef.current);
|
||||
invariant(nodeHandle != null, 'nodeHandle expected to be non-null');
|
||||
return nodeHandle as number;
|
||||
};
|
||||
|
||||
onLoadingStart = (event: WebViewNavigationEvent) => {
|
||||
|
@ -291,7 +250,7 @@ class WebView extends React.Component<WebViewSharedProps, State> {
|
|||
|
||||
this.setState({
|
||||
lastErrorEvent: event.nativeEvent,
|
||||
viewState: WebViewState.ERROR,
|
||||
viewState: 'ERROR',
|
||||
});
|
||||
};
|
||||
|
||||
|
@ -300,7 +259,7 @@ class WebView extends React.Component<WebViewSharedProps, State> {
|
|||
onLoad && onLoad(event);
|
||||
onLoadEnd && onLoadEnd(event);
|
||||
this.setState({
|
||||
viewState: WebViewState.IDLE,
|
||||
viewState: 'IDLE',
|
||||
});
|
||||
this.updateNavigationState(event);
|
||||
};
|
||||
|
@ -329,24 +288,8 @@ class WebView extends React.Component<WebViewSharedProps, State> {
|
|||
};
|
||||
}
|
||||
|
||||
const RNCWebView = requireNativeComponent('RNCWebView');
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
hidden: {
|
||||
height: 0,
|
||||
flex: 0, // disable 'flex:1' when hiding a View
|
||||
},
|
||||
loadingView: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
loadingProgressBar: {
|
||||
height: 20,
|
||||
},
|
||||
});
|
||||
const RNCWebView = requireNativeComponent(
|
||||
'RNCWebView',
|
||||
) as typeof NativeWebViewAndroid;
|
||||
|
||||
module.exports = WebView;
|
|
@ -4,99 +4,71 @@
|
|||
* 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 {
|
||||
ActivityIndicator,
|
||||
Linking,
|
||||
StyleSheet,
|
||||
Text,
|
||||
UIManager,
|
||||
UIManager as NotTypedUIManager,
|
||||
View,
|
||||
requireNativeComponent,
|
||||
NativeModules,
|
||||
Image,
|
||||
findNodeHandle,
|
||||
ImageSourcePropType,
|
||||
} from 'react-native';
|
||||
|
||||
import invariant from 'fbjs/lib/invariant';
|
||||
import keyMirror from 'fbjs/lib/keyMirror';
|
||||
import invariant from 'invariant';
|
||||
|
||||
import {
|
||||
defaultOriginWhitelist,
|
||||
createOnShouldStartLoadWithRequest,
|
||||
getViewManagerConfig,
|
||||
} from './WebViewShared';
|
||||
import type {
|
||||
WebViewEvent,
|
||||
WebViewError,
|
||||
import {
|
||||
WebViewErrorEvent,
|
||||
WebViewMessageEvent,
|
||||
WebViewNavigationEvent,
|
||||
WebViewSharedProps,
|
||||
WebViewSource,
|
||||
WebViewProgressEvent,
|
||||
IOSWebViewProps,
|
||||
DecelerationRateConstant,
|
||||
NativeWebViewIOS,
|
||||
ViewManager,
|
||||
State,
|
||||
CustomUIManager,
|
||||
} from './WebViewTypes';
|
||||
|
||||
import styles from './WebView.styles';
|
||||
|
||||
const UIManager = NotTypedUIManager as CustomUIManager;
|
||||
|
||||
const resolveAssetSource = Image.resolveAssetSource;
|
||||
let didWarnAboutUIWebViewUsage = false;
|
||||
// Imported from https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollView/processDecelerationRate.js
|
||||
function processDecelerationRate(decelerationRate) {
|
||||
const processDecelerationRate = (
|
||||
decelerationRate: DecelerationRateConstant | number | undefined,
|
||||
) => {
|
||||
if (decelerationRate === 'normal') {
|
||||
decelerationRate = 0.998;
|
||||
} else if (decelerationRate === 'fast') {
|
||||
decelerationRate = 0.99;
|
||||
}
|
||||
return decelerationRate;
|
||||
}
|
||||
};
|
||||
|
||||
const RNCUIWebViewManager = NativeModules.RNCUIWebViewManager;
|
||||
const RNCWKWebViewManager = NativeModules.RNCWKWebViewManager;
|
||||
|
||||
const BGWASH = 'rgba(255,255,255,0.8)';
|
||||
|
||||
const WebViewState = keyMirror({
|
||||
IDLE: null,
|
||||
LOADING: null,
|
||||
ERROR: null,
|
||||
});
|
||||
|
||||
const NavigationType = keyMirror({
|
||||
click: true,
|
||||
formsubmit: true,
|
||||
backforward: true,
|
||||
reload: true,
|
||||
formresubmit: true,
|
||||
other: true,
|
||||
});
|
||||
|
||||
const JSNavigationScheme = 'react-js-navigation';
|
||||
|
||||
type State = {|
|
||||
viewState: WebViewState,
|
||||
lastErrorEvent: ?WebViewError,
|
||||
|};
|
||||
|
||||
const DataDetectorTypes = [
|
||||
'phoneNumber',
|
||||
'link',
|
||||
'address',
|
||||
'calendarEvent',
|
||||
'trackingNumber',
|
||||
'flightNumber',
|
||||
'lookupSuggestion',
|
||||
'none',
|
||||
'all',
|
||||
];
|
||||
const RNCUIWebViewManager = NativeModules.RNCUIWebViewManager as ViewManager;
|
||||
const RNCWKWebViewManager = NativeModules.RNCWKWebViewManager as ViewManager;
|
||||
|
||||
const defaultRenderLoading = () => (
|
||||
<View style={styles.loadingView}>
|
||||
<ActivityIndicator />
|
||||
</View>
|
||||
);
|
||||
const defaultRenderError = (errorDomain, errorCode, errorDesc) => (
|
||||
const defaultRenderError = (
|
||||
errorDomain: string | undefined,
|
||||
errorCode: number,
|
||||
errorDesc: string,
|
||||
) => (
|
||||
<View style={styles.errorContainer}>
|
||||
<Text style={styles.errorTextTitle}>Error loading page</Text>
|
||||
<Text style={styles.errorText}>{'Domain: ' + errorDomain}</Text>
|
||||
|
@ -105,32 +77,7 @@ const defaultRenderError = (errorDomain, errorCode, errorDesc) => (
|
|||
</View>
|
||||
);
|
||||
|
||||
/**
|
||||
* `WebView` renders web content in a native view.
|
||||
*
|
||||
*```
|
||||
* import React, { Component } from 'react';
|
||||
* import { WebView } from 'react-native';
|
||||
*
|
||||
* class MyWeb extends Component {
|
||||
* render() {
|
||||
* return (
|
||||
* <WebView
|
||||
* source={{uri: 'https://github.com/facebook/react-native'}}
|
||||
* style={{marginTop: 20}}
|
||||
* />
|
||||
* );
|
||||
* }
|
||||
* }
|
||||
*```
|
||||
*
|
||||
* You can use this component to navigate back and forth in the web view's
|
||||
* history and configure various properties for the web content.
|
||||
*/
|
||||
class WebView extends React.Component<WebViewSharedProps, State> {
|
||||
static JSNavigationScheme = JSNavigationScheme;
|
||||
static NavigationType = NavigationType;
|
||||
|
||||
class WebView extends React.Component<IOSWebViewProps, State> {
|
||||
static defaultProps = {
|
||||
useWebKit: true,
|
||||
cacheEnabled: true,
|
||||
|
@ -143,14 +90,12 @@ class WebView extends React.Component<WebViewSharedProps, State> {
|
|||
return true;
|
||||
};
|
||||
|
||||
state = {
|
||||
viewState: this.props.startInLoadingState
|
||||
? WebViewState.LOADING
|
||||
: WebViewState.IDLE,
|
||||
state: State = {
|
||||
viewState: this.props.startInLoadingState ? 'LOADING' : 'IDLE',
|
||||
lastErrorEvent: null,
|
||||
};
|
||||
|
||||
webViewRef = React.createRef();
|
||||
webViewRef = React.createRef<NativeWebViewIOS>();
|
||||
|
||||
UNSAFE_componentWillMount() {
|
||||
if (!this.props.useWebKit && !didWarnAboutUIWebViewUsage) {
|
||||
|
@ -185,108 +130,80 @@ class WebView extends React.Component<WebViewSharedProps, State> {
|
|||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
decelerationRate: decelerationRateProp,
|
||||
nativeConfig = {},
|
||||
onMessage,
|
||||
onShouldStartLoadWithRequest: onShouldStartLoadWithRequestProp,
|
||||
originWhitelist,
|
||||
renderError,
|
||||
renderLoading,
|
||||
scalesPageToFit = this.props.useWebKit ? undefined : true,
|
||||
style,
|
||||
useWebKit,
|
||||
...otherProps
|
||||
} = this.props;
|
||||
|
||||
let otherView = null;
|
||||
|
||||
let scalesPageToFit;
|
||||
|
||||
if (this.props.useWebKit) {
|
||||
({ scalesPageToFit } = this.props);
|
||||
} else {
|
||||
({ scalesPageToFit = true } = this.props);
|
||||
}
|
||||
|
||||
if (this.state.viewState === WebViewState.LOADING) {
|
||||
otherView = (this.props.renderLoading || defaultRenderLoading)();
|
||||
} else if (this.state.viewState === WebViewState.ERROR) {
|
||||
if (this.state.viewState === 'LOADING') {
|
||||
otherView = (renderLoading || defaultRenderLoading)();
|
||||
} else if (this.state.viewState === 'ERROR') {
|
||||
const errorEvent = this.state.lastErrorEvent;
|
||||
invariant(errorEvent != null, 'lastErrorEvent expected to be non-null');
|
||||
otherView = (this.props.renderError || defaultRenderError)(
|
||||
otherView = (renderError || defaultRenderError)(
|
||||
errorEvent.domain,
|
||||
errorEvent.code,
|
||||
errorEvent.description,
|
||||
);
|
||||
} else if (this.state.viewState !== WebViewState.IDLE) {
|
||||
} else if (this.state.viewState !== 'IDLE') {
|
||||
console.error(
|
||||
'RNCWebView invalid state encountered: ' + this.state.viewState,
|
||||
);
|
||||
}
|
||||
|
||||
const webViewStyles = [styles.container, styles.webView, this.props.style];
|
||||
const webViewStyles = [styles.container, styles.webView, style];
|
||||
if (
|
||||
this.state.viewState === WebViewState.LOADING ||
|
||||
this.state.viewState === WebViewState.ERROR
|
||||
this.state.viewState === 'LOADING' ||
|
||||
this.state.viewState === 'ERROR'
|
||||
) {
|
||||
// if we're in either LOADING or ERROR states, don't show the webView
|
||||
webViewStyles.push(styles.hidden);
|
||||
}
|
||||
|
||||
const nativeConfig = this.props.nativeConfig || {};
|
||||
|
||||
const onShouldStartLoadWithRequest = createOnShouldStartLoadWithRequest(
|
||||
this.onShouldStartLoadWithRequestCallback,
|
||||
this.props.originWhitelist,
|
||||
this.props.onShouldStartLoadWithRequest,
|
||||
originWhitelist,
|
||||
onShouldStartLoadWithRequestProp,
|
||||
);
|
||||
|
||||
const decelerationRate = processDecelerationRate(
|
||||
this.props.decelerationRate,
|
||||
);
|
||||
const decelerationRate = processDecelerationRate(decelerationRateProp);
|
||||
|
||||
let source: WebViewSource = this.props.source || {};
|
||||
if (!this.props.source && this.props.html) {
|
||||
source = { html: this.props.html };
|
||||
} else if (!this.props.source && this.props.url) {
|
||||
source = { uri: this.props.url };
|
||||
}
|
||||
let NativeWebView = nativeConfig.component as typeof NativeWebViewIOS;
|
||||
|
||||
let NativeWebView = nativeConfig.component;
|
||||
|
||||
if (this.props.useWebKit) {
|
||||
NativeWebView = NativeWebView || RNCWKWebView;
|
||||
if (useWebKit) {
|
||||
NativeWebView = NativeWebViewIOS || RNCWKWebView;
|
||||
} else {
|
||||
NativeWebView = NativeWebView || RNCUIWebView;
|
||||
NativeWebView = NativeWebViewIOS || RNCUIWebView;
|
||||
}
|
||||
|
||||
const webView = (
|
||||
<NativeWebView
|
||||
ref={this.webViewRef}
|
||||
key="webViewKey"
|
||||
style={webViewStyles}
|
||||
source={resolveAssetSource(source)}
|
||||
injectedJavaScript={this.props.injectedJavaScript}
|
||||
bounces={this.props.bounces}
|
||||
scrollEnabled={this.props.scrollEnabled}
|
||||
pagingEnabled={this.props.pagingEnabled}
|
||||
cacheEnabled={this.props.cacheEnabled}
|
||||
{...otherProps}
|
||||
decelerationRate={decelerationRate}
|
||||
contentInset={this.props.contentInset}
|
||||
automaticallyAdjustContentInsets={
|
||||
this.props.automaticallyAdjustContentInsets
|
||||
}
|
||||
hideKeyboardAccessoryView={this.props.hideKeyboardAccessoryView}
|
||||
allowsBackForwardNavigationGestures={
|
||||
this.props.allowsBackForwardNavigationGestures
|
||||
}
|
||||
incognito={this.props.incognito}
|
||||
userAgent={this.props.userAgent}
|
||||
onLoadingStart={this._onLoadingStart}
|
||||
onLoadingFinish={this._onLoadingFinish}
|
||||
key="webViewKey"
|
||||
messagingEnabled={typeof onMessage === 'function'}
|
||||
onLoadingError={this._onLoadingError}
|
||||
onLoadingFinish={this._onLoadingFinish}
|
||||
onLoadingProgress={this._onLoadingProgress}
|
||||
onLoadingStart={this._onLoadingStart}
|
||||
onMessage={this._onMessage}
|
||||
messagingEnabled={typeof this.props.onMessage === 'function'}
|
||||
onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
|
||||
ref={this.webViewRef}
|
||||
scalesPageToFit={scalesPageToFit}
|
||||
allowsInlineMediaPlayback={this.props.allowsInlineMediaPlayback}
|
||||
mediaPlaybackRequiresUserAction={
|
||||
this.props.mediaPlaybackRequiresUserAction
|
||||
}
|
||||
dataDetectorTypes={this.props.dataDetectorTypes}
|
||||
useSharedProcessPool={this.props.useSharedProcessPool}
|
||||
allowsLinkPreview={this.props.allowsLinkPreview}
|
||||
showsHorizontalScrollIndicator={this.props.showsHorizontalScrollIndicator}
|
||||
showsVerticalScrollIndicator={this.props.showsVerticalScrollIndicator}
|
||||
directionalLockEnabled={this.props.directionalLockEnabled}
|
||||
// TODO: find a better way to type this.
|
||||
source={resolveAssetSource(this.props.source as ImageSourcePropType)}
|
||||
style={webViewStyles}
|
||||
{...nativeConfig.props}
|
||||
/>
|
||||
);
|
||||
|
@ -299,17 +216,10 @@ class WebView extends React.Component<WebViewSharedProps, State> {
|
|||
);
|
||||
}
|
||||
|
||||
_getViewManagerConfig = (viewManagerName: string) => {
|
||||
if (!UIManager.getViewManagerConfig) {
|
||||
return UIManager[viewManagerName];
|
||||
}
|
||||
return UIManager.getViewManagerConfig(viewManagerName);
|
||||
};
|
||||
|
||||
_getCommands = () =>
|
||||
!this.props.useWebKit
|
||||
? this._getViewManagerConfig('RNCUIWebView').Commands
|
||||
: this._getViewManagerConfig('RNCWKWebView').Commands;
|
||||
? getViewManagerConfig('RNCUIWebView').Commands
|
||||
: getViewManagerConfig('RNCWKWebView').Commands;
|
||||
|
||||
/**
|
||||
* Go forward one page in the web view's history.
|
||||
|
@ -337,7 +247,7 @@ class WebView extends React.Component<WebViewSharedProps, State> {
|
|||
* Reloads the current page.
|
||||
*/
|
||||
reload = () => {
|
||||
this.setState({ viewState: WebViewState.LOADING });
|
||||
this.setState({ viewState: 'LOADING' });
|
||||
UIManager.dispatchViewManagerCommand(
|
||||
this.getWebViewHandle(),
|
||||
this._getCommands().reload,
|
||||
|
@ -402,7 +312,9 @@ class WebView extends React.Component<WebViewSharedProps, State> {
|
|||
* Returns the native `WebView` node.
|
||||
*/
|
||||
getWebViewHandle = () => {
|
||||
return findNodeHandle(this.webViewRef.current);
|
||||
const nodeHandle = findNodeHandle(this.webViewRef.current);
|
||||
invariant(nodeHandle != null, 'nodeHandle expected to be non-null');
|
||||
return nodeHandle as number;
|
||||
};
|
||||
|
||||
_onLoadingStart = (event: WebViewNavigationEvent) => {
|
||||
|
@ -420,7 +332,7 @@ class WebView extends React.Component<WebViewSharedProps, State> {
|
|||
|
||||
this.setState({
|
||||
lastErrorEvent: event.nativeEvent,
|
||||
viewState: WebViewState.ERROR,
|
||||
viewState: 'ERROR',
|
||||
});
|
||||
};
|
||||
|
||||
|
@ -429,7 +341,7 @@ class WebView extends React.Component<WebViewSharedProps, State> {
|
|||
onLoad && onLoad(event);
|
||||
onLoadEnd && onLoadEnd(event);
|
||||
this.setState({
|
||||
viewState: WebViewState.IDLE,
|
||||
viewState: 'IDLE',
|
||||
});
|
||||
this._updateNavigationState(event);
|
||||
};
|
||||
|
@ -460,7 +372,7 @@ class WebView extends React.Component<WebViewSharedProps, State> {
|
|||
viewManager.startLoadWithResult(!!shouldStart, lockIdentifier);
|
||||
};
|
||||
|
||||
componentDidUpdate(prevProps: WebViewSharedProps) {
|
||||
componentDidUpdate(prevProps: IOSWebViewProps) {
|
||||
if (!(prevProps.useWebKit && this.props.useWebKit)) {
|
||||
return;
|
||||
}
|
||||
|
@ -477,7 +389,10 @@ class WebView extends React.Component<WebViewSharedProps, State> {
|
|||
}
|
||||
}
|
||||
|
||||
_showRedboxOnPropChanges(prevProps, propName: string) {
|
||||
_showRedboxOnPropChanges(
|
||||
prevProps: IOSWebViewProps,
|
||||
propName: keyof IOSWebViewProps,
|
||||
) {
|
||||
if (this.props[propName] !== prevProps[propName]) {
|
||||
console.error(
|
||||
`Changes to property ${propName} do nothing after the initial render.`,
|
||||
|
@ -486,43 +401,11 @@ class WebView extends React.Component<WebViewSharedProps, State> {
|
|||
}
|
||||
}
|
||||
|
||||
const RNCUIWebView = requireNativeComponent('RNCUIWebView');
|
||||
const RNCWKWebView = requireNativeComponent('RNCWKWebView');
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
errorContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: BGWASH,
|
||||
},
|
||||
errorText: {
|
||||
fontSize: 14,
|
||||
textAlign: 'center',
|
||||
marginBottom: 2,
|
||||
},
|
||||
errorTextTitle: {
|
||||
fontSize: 15,
|
||||
fontWeight: '500',
|
||||
marginBottom: 10,
|
||||
},
|
||||
hidden: {
|
||||
height: 0,
|
||||
flex: 0, // disable 'flex:1' when hiding a View
|
||||
},
|
||||
loadingView: {
|
||||
backgroundColor: BGWASH,
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: 100,
|
||||
},
|
||||
webView: {
|
||||
backgroundColor: '#ffffff',
|
||||
},
|
||||
});
|
||||
const RNCUIWebView: typeof NativeWebViewIOS = requireNativeComponent(
|
||||
'RNCUIWebView',
|
||||
);
|
||||
const RNCWKWebView: typeof NativeWebViewIOS = requireNativeComponent(
|
||||
'RNCWKWebView',
|
||||
);
|
||||
|
||||
module.exports = WebView;
|
|
@ -0,0 +1,53 @@
|
|||
import { StyleSheet, ViewStyle, TextStyle } from 'react-native';
|
||||
|
||||
interface Styles {
|
||||
container: ViewStyle;
|
||||
errorContainer: ViewStyle;
|
||||
errorText: TextStyle;
|
||||
errorTextTitle: TextStyle;
|
||||
hidden: ViewStyle;
|
||||
loadingView: ViewStyle;
|
||||
webView: ViewStyle;
|
||||
loadingProgressBar: ViewStyle;
|
||||
}
|
||||
|
||||
const BGWASH = 'rgba(255,255,255,0.8)';
|
||||
|
||||
const styles = StyleSheet.create<Styles>({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
errorContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: BGWASH,
|
||||
},
|
||||
hidden: {
|
||||
height: 0,
|
||||
flex: 0, // disable 'flex:1' when hiding a View
|
||||
},
|
||||
loadingView: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
loadingProgressBar: {
|
||||
height: 20,
|
||||
},
|
||||
errorText: {
|
||||
fontSize: 14,
|
||||
textAlign: 'center',
|
||||
marginBottom: 2,
|
||||
},
|
||||
errorTextTitle: {
|
||||
fontSize: 15,
|
||||
fontWeight: '500',
|
||||
marginBottom: 10,
|
||||
},
|
||||
webView: {
|
||||
backgroundColor: '#ffffff',
|
||||
},
|
||||
});
|
||||
|
||||
export default styles;
|
|
@ -9,13 +9,15 @@
|
|||
*/
|
||||
|
||||
import escapeStringRegexp from 'escape-string-regexp';
|
||||
import { Linking } from 'react-native';
|
||||
import type {
|
||||
import { Linking, UIManager as NotTypedUIManager } from 'react-native';
|
||||
import {
|
||||
WebViewNavigationEvent,
|
||||
WebViewNavigation,
|
||||
OnShouldStartLoadWithRequest,
|
||||
CustomUIManager,
|
||||
} from './WebViewTypes';
|
||||
|
||||
const UIManager = NotTypedUIManager as CustomUIManager;
|
||||
|
||||
const defaultOriginWhitelist = ['http://*', 'https://*'];
|
||||
|
||||
const extractOrigin = (url: string): string => {
|
||||
|
@ -24,16 +26,14 @@ const extractOrigin = (url: string): string => {
|
|||
};
|
||||
|
||||
const originWhitelistToRegex = (originWhitelist: string): string =>
|
||||
`^${escapeStringRegexp(originWhitelist).replace(/\\\*/g, '.*')}`;
|
||||
`^${escapeStringRegexp(originWhitelist).replace(/\\\*/g, '.*')}`;
|
||||
|
||||
const passesWhitelist = (compiledWhitelist: Array<string>, url: string) => {
|
||||
const passesWhitelist = (compiledWhitelist: string[], url: string) => {
|
||||
const origin = extractOrigin(url);
|
||||
return compiledWhitelist.some(x => new RegExp(x).test(origin));
|
||||
};
|
||||
|
||||
const compileWhitelist = (
|
||||
originWhitelist: ?$ReadOnlyArray<string>,
|
||||
): Array<string> =>
|
||||
const compileWhitelist = (originWhitelist: string[]): string[] =>
|
||||
['about:blank', ...(originWhitelist || [])].map(originWhitelistToRegex);
|
||||
|
||||
const createOnShouldStartLoadWithRequest = (
|
||||
|
@ -42,8 +42,8 @@ const createOnShouldStartLoadWithRequest = (
|
|||
url: string,
|
||||
lockIdentifier: number,
|
||||
) => void,
|
||||
originWhitelist: ?$ReadOnlyArray<string>,
|
||||
onShouldStartLoadWithRequest: ?OnShouldStartLoadWithRequest,
|
||||
originWhitelist: string[],
|
||||
onShouldStartLoadWithRequest?: OnShouldStartLoadWithRequest,
|
||||
) => {
|
||||
return ({ nativeEvent }: WebViewNavigationEvent) => {
|
||||
let shouldStart = true;
|
||||
|
@ -51,7 +51,7 @@ const createOnShouldStartLoadWithRequest = (
|
|||
|
||||
if (!passesWhitelist(compileWhitelist(originWhitelist), url)) {
|
||||
Linking.openURL(url);
|
||||
shouldStart = false
|
||||
shouldStart = false;
|
||||
}
|
||||
|
||||
if (onShouldStartLoadWithRequest) {
|
||||
|
@ -62,4 +62,17 @@ const createOnShouldStartLoadWithRequest = (
|
|||
};
|
||||
};
|
||||
|
||||
export { defaultOriginWhitelist, createOnShouldStartLoadWithRequest };
|
||||
const getViewManagerConfig = (
|
||||
viewManagerName: 'RNCUIWebView' | 'RNCWKWebView' | 'RNCWebView',
|
||||
) => {
|
||||
if (!UIManager.getViewManagerConfig) {
|
||||
return UIManager[viewManagerName];
|
||||
}
|
||||
return UIManager.getViewManagerConfig(viewManagerName);
|
||||
};
|
||||
|
||||
export {
|
||||
defaultOriginWhitelist,
|
||||
createOnShouldStartLoadWithRequest,
|
||||
getViewManagerConfig,
|
||||
};
|
|
@ -0,0 +1,628 @@
|
|||
/**
|
||||
* 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.
|
||||
*
|
||||
*/
|
||||
|
||||
import { ReactNode, ReactElement, Component } from 'react';
|
||||
import {
|
||||
NativeSyntheticEvent,
|
||||
ViewStyle,
|
||||
ViewProps,
|
||||
StyleProp,
|
||||
NativeMethodsMixin,
|
||||
Constructor,
|
||||
UIManagerStatic,
|
||||
} from 'react-native';
|
||||
|
||||
interface WebViewCommands {
|
||||
goForward: Function;
|
||||
goBack: Function;
|
||||
reload: Function;
|
||||
stopLoading: Function;
|
||||
postMessage: Function;
|
||||
injectJavaScript: Function;
|
||||
loadUrl: Function;
|
||||
}
|
||||
|
||||
export interface CustomUIManager extends UIManagerStatic {
|
||||
getViewManagerConfig?: (
|
||||
name: string,
|
||||
) => {
|
||||
Commands: WebViewCommands;
|
||||
};
|
||||
dispatchViewManagerCommand: (
|
||||
viewHandle: number,
|
||||
command: any,
|
||||
params: any,
|
||||
) => void;
|
||||
RNCUIWebView: {
|
||||
Commands: WebViewCommands;
|
||||
};
|
||||
RNCWKWebView: {
|
||||
Commands: WebViewCommands;
|
||||
};
|
||||
RNCWebView: {
|
||||
Commands: WebViewCommands;
|
||||
};
|
||||
}
|
||||
|
||||
type WebViewState = 'IDLE' | 'LOADING' | 'ERROR';
|
||||
|
||||
interface BaseState {
|
||||
viewState: WebViewState;
|
||||
}
|
||||
|
||||
interface NormalState extends BaseState {
|
||||
viewState: 'IDLE' | 'LOADING';
|
||||
lastErrorEvent: WebViewError | null;
|
||||
}
|
||||
|
||||
interface ErrorState extends BaseState {
|
||||
viewState: 'ERROR';
|
||||
lastErrorEvent: WebViewError;
|
||||
}
|
||||
|
||||
export type State = NormalState | ErrorState;
|
||||
|
||||
declare class NativeWebViewIOSComponent extends Component<
|
||||
IOSNativeWebViewProps
|
||||
> {}
|
||||
declare const NativeWebViewIOSBase: Constructor<NativeMethodsMixin> &
|
||||
typeof NativeWebViewIOSComponent;
|
||||
export class NativeWebViewIOS extends NativeWebViewIOSBase {}
|
||||
|
||||
declare class NativeWebViewAndroidComponent extends Component<
|
||||
AndroidNativeWebViewProps
|
||||
> {}
|
||||
declare const NativeWebViewAndroidBase: Constructor<NativeMethodsMixin> &
|
||||
typeof NativeWebViewAndroidComponent;
|
||||
export class NativeWebViewAndroid extends NativeWebViewAndroidBase {}
|
||||
|
||||
export interface ContentInsetProp {
|
||||
top?: number;
|
||||
left?: number;
|
||||
bottom?: number;
|
||||
right?: number;
|
||||
}
|
||||
|
||||
export interface WebViewNativeEvent {
|
||||
url: string;
|
||||
loading: boolean;
|
||||
title: string;
|
||||
canGoBack: boolean;
|
||||
canGoForward: boolean;
|
||||
lockIdentifier: number;
|
||||
}
|
||||
|
||||
export interface WebViewProgressEvent extends WebViewNativeEvent {
|
||||
progress: number;
|
||||
}
|
||||
|
||||
export interface WebViewNavigation extends WebViewNativeEvent {
|
||||
navigationType:
|
||||
| 'click'
|
||||
| 'formsubmit'
|
||||
| 'backforward'
|
||||
| 'reload'
|
||||
| 'formresubmit'
|
||||
| 'other';
|
||||
}
|
||||
|
||||
export type DecelerationRateConstant = 'normal' | 'fast';
|
||||
|
||||
export interface WebViewMessage extends WebViewNativeEvent {
|
||||
data: string;
|
||||
}
|
||||
|
||||
export interface WebViewError extends WebViewNativeEvent {
|
||||
/**
|
||||
* `domain` is only used on iOS
|
||||
*/
|
||||
domain?: string;
|
||||
code: number;
|
||||
description: string;
|
||||
}
|
||||
|
||||
export type WebViewEvent = NativeSyntheticEvent<WebViewNativeEvent>;
|
||||
|
||||
export type WebViewNavigationEvent = NativeSyntheticEvent<WebViewNavigation>;
|
||||
|
||||
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';
|
||||
|
||||
export interface WebViewSourceUri {
|
||||
/**
|
||||
* The URI to load in the `WebView`. Can be a local or remote file.
|
||||
*/
|
||||
uri: string;
|
||||
|
||||
/**
|
||||
* The HTTP Method to use. Defaults to GET if not specified.
|
||||
* NOTE: On Android, only GET and POST are supported.
|
||||
*/
|
||||
method?: string;
|
||||
|
||||
/**
|
||||
* Additional HTTP headers to send with the request.
|
||||
* NOTE: On Android, this can only be used with GET requests.
|
||||
*/
|
||||
headers?: 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 interface WebViewSourceHtml {
|
||||
/**
|
||||
* A static HTML page to display in the WebView.
|
||||
*/
|
||||
html: string;
|
||||
/**
|
||||
* The base URL to be used for any relative links in the HTML.
|
||||
*/
|
||||
baseUrl: string;
|
||||
}
|
||||
|
||||
export type WebViewSource = WebViewSourceUri | WebViewSourceHtml;
|
||||
|
||||
export interface ViewManager {
|
||||
startLoadWithResult: Function;
|
||||
}
|
||||
|
||||
export type WebViewNativeConfig = {
|
||||
/**
|
||||
* The native component used to render the WebView.
|
||||
*/
|
||||
component?: typeof NativeWebViewIOS | typeof NativeWebViewAndroid;
|
||||
/**
|
||||
* 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?: ViewManager;
|
||||
};
|
||||
|
||||
export type OnShouldStartLoadWithRequest = (
|
||||
event: WebViewNavigation,
|
||||
) => boolean;
|
||||
|
||||
export interface CommonNativeWebViewProps extends ViewProps {
|
||||
cacheEnabled?: boolean;
|
||||
injectedJavaScript?: string;
|
||||
mediaPlaybackRequiresUserAction?: boolean;
|
||||
messagingEnabled: boolean;
|
||||
onLoadingError: (event: WebViewErrorEvent) => void;
|
||||
onLoadingFinish: (event: WebViewNavigationEvent) => void;
|
||||
onLoadingProgress: (event: WebViewProgressEvent) => void;
|
||||
onLoadingStart: (event: WebViewNavigationEvent) => void;
|
||||
onMessage: (event: WebViewMessageEvent) => void;
|
||||
onShouldStartLoadWithRequest: (event: WebViewNavigationEvent) => void;
|
||||
scalesPageToFit?: boolean;
|
||||
showsHorizontalScrollIndicator?: boolean;
|
||||
showsVerticalScrollIndicator?: boolean;
|
||||
// TODO: find a better way to type this.
|
||||
source: any;
|
||||
userAgent?: string;
|
||||
}
|
||||
|
||||
export interface AndroidNativeWebViewProps extends CommonNativeWebViewProps {
|
||||
allowFileAccess?: boolean;
|
||||
allowUniversalAccessFromFileURLs?: boolean;
|
||||
androidHardwareAccelerationDisabled?: boolean;
|
||||
domStorageEnabled?: boolean;
|
||||
geolocationEnabled?: boolean;
|
||||
javaScriptEnabled?: boolean;
|
||||
mixedContentMode?: 'never' | 'always' | 'compatibility';
|
||||
onContentSizeChange?: (event: WebViewEvent) => void;
|
||||
overScrollMode?: OverScrollModeType;
|
||||
saveFormDataDisabled?: boolean;
|
||||
thirdPartyCookiesEnabled?: boolean;
|
||||
urlPrefixesForDefaultIntent?: string[];
|
||||
}
|
||||
|
||||
export interface IOSNativeWebViewProps extends CommonNativeWebViewProps {
|
||||
allowsBackForwardNavigationGestures?: boolean;
|
||||
allowsInlineMediaPlayback?: boolean;
|
||||
allowsLinkPreview?: boolean;
|
||||
automaticallyAdjustContentInsets?: boolean;
|
||||
bounces?: boolean;
|
||||
contentInset?: ContentInsetProp;
|
||||
dataDetectorTypes?: DataDetectorTypes | DataDetectorTypes[];
|
||||
decelerationRate?: number;
|
||||
directionalLockEnabled?: boolean;
|
||||
hideKeyboardAccessoryView?: boolean;
|
||||
incognito?: boolean;
|
||||
pagingEnabled?: boolean;
|
||||
scrollEnabled?: boolean;
|
||||
useSharedProcessPool?: boolean;
|
||||
}
|
||||
|
||||
export interface IOSWebViewProps extends WebViewSharedProps {
|
||||
/**
|
||||
* If true, use WKWebView instead of UIWebView.
|
||||
* @platform ios
|
||||
*/
|
||||
useWebKit?: boolean;
|
||||
|
||||
/**
|
||||
* Does not store any data within the lifetime of the WebView.
|
||||
*/
|
||||
incognito?: 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?: DecelerationRateConstant | 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;
|
||||
|
||||
/**
|
||||
* 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`.
|
||||
* @platform ios
|
||||
*/
|
||||
automaticallyAdjustContentInsets?: 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?: ContentInsetProp;
|
||||
|
||||
/**
|
||||
* Determines the types of data converted to clickable URLs in the web view's content.
|
||||
* By default only phone numbers are detected.
|
||||
*
|
||||
* You can provide one type or an array of many types.
|
||||
*
|
||||
* Possible values for `dataDetectorTypes` are:
|
||||
*
|
||||
* - `'phoneNumber'`
|
||||
* - `'link'`
|
||||
* - `'address'`
|
||||
* - `'calendarEvent'`
|
||||
* - `'none'`
|
||||
* - `'all'`
|
||||
*
|
||||
* With the new WebKit implementation, we have three new values:
|
||||
* - `'trackingNumber'`,
|
||||
* - `'flightNumber'`,
|
||||
* - `'lookupSuggestion'`,
|
||||
*
|
||||
* @platform ios
|
||||
*/
|
||||
dataDetectorTypes?: DataDetectorTypes | DataDetectorTypes[];
|
||||
|
||||
/**
|
||||
* 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;
|
||||
/**
|
||||
* A Boolean value indicating whether WebKit WebView should be created using a shared
|
||||
* process pool, enabling WebViews to share cookies and localStorage between each other.
|
||||
* Default is true but can be set to false for backwards compatibility.
|
||||
* @platform ios
|
||||
*/
|
||||
useSharedProcessPool?: boolean;
|
||||
/**
|
||||
* The custom user agent string.
|
||||
*/
|
||||
userAgent?: string;
|
||||
|
||||
/**
|
||||
* A Boolean value that determines whether pressing on a link
|
||||
* displays a preview of the destination for the link.
|
||||
*
|
||||
* This property is available on devices that support 3D Touch.
|
||||
* In iOS 10 and later, the default value is `true`; before that, the default value is `false`.
|
||||
* @platform ios
|
||||
*/
|
||||
allowsLinkPreview?: boolean;
|
||||
|
||||
/**
|
||||
* A Boolean value that determines whether scrolling is disabled in a particular direction.
|
||||
* The default value is `true`.
|
||||
* @platform ios
|
||||
*/
|
||||
directionalLockEnabled?: boolean;
|
||||
}
|
||||
|
||||
export interface AndroidWebViewProps extends WebViewSharedProps {
|
||||
onNavigationStateChange?: (event: WebViewNavigation) => void;
|
||||
onContentSizeChange?: (event: WebViewEvent) => void;
|
||||
|
||||
/**
|
||||
* 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?: 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 disable Hardware Acceleration in the `WebView`. Used on Android only
|
||||
* as Hardware Acceleration is a feature only for Android. The default value is `false`.
|
||||
* @platform android
|
||||
*/
|
||||
androidHardwareAccelerationDisabled?: boolean;
|
||||
|
||||
/**
|
||||
* Boolean value to enable third party cookies in the `WebView`. Used on
|
||||
* Android Lollipop and above only as third party cookies are enabled by
|
||||
* default on Android Kitkat and below and on iOS. The default value is `true`.
|
||||
* @platform android
|
||||
*/
|
||||
thirdPartyCookiesEnabled?: boolean;
|
||||
|
||||
/**
|
||||
* Boolean value to control whether DOM Storage is enabled. Used only in
|
||||
* Android.
|
||||
* @platform android
|
||||
*/
|
||||
domStorageEnabled?: boolean;
|
||||
|
||||
/**
|
||||
* Sets the user-agent for the `WebView`.
|
||||
* @platform android
|
||||
*/
|
||||
userAgent?: string;
|
||||
|
||||
/**
|
||||
* Specifies the mixed content mode. i.e WebView will allow a secure origin to load content from any other origin.
|
||||
*
|
||||
* Possible values for `mixedContentMode` are:
|
||||
*
|
||||
* - `'never'` (default) - WebView will not allow a secure origin to load content from an insecure origin.
|
||||
* - `'always'` - WebView will allow a secure origin to load content from any other origin, even if that origin is insecure.
|
||||
* - `'compatibility'` - WebView will attempt to be compatible with the approach of a modern web browser with regard to mixed content.
|
||||
* @platform android
|
||||
*/
|
||||
mixedContentMode?: 'never' | 'always' | 'compatibility';
|
||||
}
|
||||
|
||||
export interface WebViewSharedProps extends ViewProps {
|
||||
/**
|
||||
* Loads static html or a uri (with optional headers) in the WebView.
|
||||
*/
|
||||
source?: WebViewSource;
|
||||
|
||||
/**
|
||||
* Function that returns a view to show if there's an error.
|
||||
*/
|
||||
renderError: (
|
||||
errorDomain: string | undefined,
|
||||
errorCode: number,
|
||||
errorDesc: string,
|
||||
) => ReactElement<any>; // view to show if there's an error
|
||||
|
||||
/**
|
||||
* Function that returns a loading indicator.
|
||||
*/
|
||||
renderLoading: () => ReactElement<any>;
|
||||
|
||||
/**
|
||||
* Function that is invoked when the `WebView` has finished loading.
|
||||
*/
|
||||
onLoad: (event: WebViewNavigationEvent) => void;
|
||||
|
||||
/**
|
||||
* Function that is invoked when the `WebView` load succeeds or fails.
|
||||
*/
|
||||
onLoadEnd: (event: WebViewNavigationEvent | WebViewErrorEvent) => void;
|
||||
|
||||
/**
|
||||
* Function that is invoked when the `WebView` starts loading.
|
||||
*/
|
||||
onLoadStart: (event: WebViewNavigationEvent) => void;
|
||||
|
||||
/**
|
||||
* Function that is invoked when the `WebView` load fails.
|
||||
*/
|
||||
onError: (event: WebViewErrorEvent) => void;
|
||||
|
||||
/**
|
||||
* Function that is invoked when the `WebView` loading starts or ends.
|
||||
*/
|
||||
onNavigationStateChange?: (event: WebViewNavigation) => void;
|
||||
|
||||
/**
|
||||
* Function that is invoked when the webview calls `window.ReactNativeWebView.postMessage`.
|
||||
* Setting this property will inject this global into your webview.
|
||||
*
|
||||
* `window.ReactNativeWebView.postMessage` accepts one argument, `data`, which will be
|
||||
* available on the event object, `event.nativeEvent.data`. `data` must be a string.
|
||||
*/
|
||||
onMessage?: (event: WebViewMessageEvent) => void;
|
||||
|
||||
/**
|
||||
* Function that is invoked when the `WebView` is loading.
|
||||
*/
|
||||
onLoadProgress?: (event: WebViewProgressEvent) => void;
|
||||
|
||||
/**
|
||||
* 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 value that determines whether a horizontal scroll indicator is
|
||||
* shown in the `WebView`. The default value is `true`.
|
||||
*/
|
||||
showsHorizontalScrollIndicator?: boolean;
|
||||
|
||||
/**
|
||||
* Boolean value that determines whether a vertical scroll indicator is
|
||||
* shown in the `WebView`. The default value is `true`.
|
||||
*/
|
||||
showsVerticalScrollIndicator?: boolean;
|
||||
|
||||
/**
|
||||
* Boolean that controls whether the web content is scaled to fit
|
||||
* the view and enables the user to change the scale. The default value
|
||||
* is `true`.
|
||||
*
|
||||
* On iOS, when `useWebKit=true`, this prop will not work.
|
||||
*/
|
||||
scalesPageToFit?: boolean;
|
||||
|
||||
/**
|
||||
* Boolean that determines whether HTML5 audio and video requires the user
|
||||
* to tap them before they start playing. The default value is `true`.
|
||||
*/
|
||||
mediaPlaybackRequiresUserAction?: boolean;
|
||||
|
||||
/**
|
||||
* List of origin strings to allow being navigated to. The strings allow
|
||||
* wildcards and get matched against *just* the origin (not the full URL).
|
||||
* If the user taps to navigate to a new page but the new page is not in
|
||||
* this whitelist, we will open the URL in Safari.
|
||||
* The default whitelisted origins are "http://*" and "https://*".
|
||||
*/
|
||||
originWhitelist: string[];
|
||||
|
||||
/**
|
||||
* 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. The `navigationType` is always `other` on android.
|
||||
*/
|
||||
onShouldStartLoadWithRequest?: OnShouldStartLoadWithRequest;
|
||||
|
||||
/**
|
||||
* 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;
|
||||
|
||||
/**
|
||||
* Should caching be enabled. Default is true.
|
||||
*/
|
||||
cacheEnabled?: boolean;
|
||||
|
||||
style?: StyleProp<ViewStyle>;
|
||||
children: ReactNode;
|
||||
}
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./src/",
|
||||
"jsx": "react-native",
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"lib": ["es2017"],
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noImplicitReturns": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"pretty": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true
|
||||
}
|
||||
}
|
29
yarn.lock
29
yarn.lock
|
@ -786,6 +786,11 @@
|
|||
into-stream "^4.0.0"
|
||||
lodash "^4.17.4"
|
||||
|
||||
"@types/escape-string-regexp@^1.0.0":
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/escape-string-regexp/-/escape-string-regexp-1.0.0.tgz#052d16d87db583b72daceae4eaabddb66954424c"
|
||||
integrity sha512-KAruqgk9/340M4MYYasdBET+lyYN8KMXUuRKWO72f4SbmIMMFp9nnJiXUkJS0HC2SFe4x0R/fLozXIzqoUfSjA==
|
||||
|
||||
"@types/events@*":
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
|
||||
|
@ -800,6 +805,11 @@
|
|||
"@types/minimatch" "*"
|
||||
"@types/node" "*"
|
||||
|
||||
"@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/minimatch@*":
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
|
||||
|
@ -815,10 +825,10 @@
|
|||
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.0.tgz#4c48fed958d6dcf9487195a0ef6456d5f6e0163a"
|
||||
integrity sha512-eItQyV43bj4rR3JPV0Skpl1SncRCdziTEK9/v8VwXmV6d/qOUO8/EuWeHBbCZcsfSHfzI5UyMJLCSXtxxznyZg==
|
||||
|
||||
"@types/react-native@^0.57.8":
|
||||
version "0.57.38"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.57.38.tgz#2ff6ed1a7cc207afbfd87bf496513d96931d1446"
|
||||
integrity sha512-bmY2ad/vQgP0HMT7Q7EQzirDBt5ibp+kBHclTnY7/i5MrdqE1oY+3b9NkDg3ohXlumr7p5stAG6I55nhfeUV6Q==
|
||||
"@types/react-native@0.57.40":
|
||||
version "0.57.40"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.57.40.tgz#a227acb6b2c7372cb678202df4cfe716ace9ce94"
|
||||
integrity sha512-nCcF9gNYp/VeV5QBtHbn/VnXZG+T8EsMxZFx8qqZfBe1gxJUsldXgOXYd1kcrrYzUX0LqG/KipDBX++fB2qQ0g==
|
||||
dependencies:
|
||||
"@types/prop-types" "*"
|
||||
"@types/react" "*"
|
||||
|
@ -2468,7 +2478,7 @@ escape-html@~1.0.3:
|
|||
resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
|
||||
integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
|
||||
|
||||
escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
|
||||
escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
|
||||
version "1.0.5"
|
||||
resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
|
||||
integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
|
||||
|
@ -2741,7 +2751,7 @@ fbjs-scripts@^1.0.0:
|
|||
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"
|
||||
integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
|
||||
|
@ -3511,7 +3521,7 @@ into-stream@^4.0.0:
|
|||
from2 "^2.1.1"
|
||||
p-is-promise "^2.0.0"
|
||||
|
||||
invariant@^2.2.4:
|
||||
invariant@2.2.4, invariant@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
|
||||
integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
|
||||
|
@ -7999,6 +8009,11 @@ typedarray@^0.0.6:
|
|||
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
|
||||
integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
|
||||
|
||||
typescript@^3.3.3333:
|
||||
version "3.3.3333"
|
||||
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.3.3333.tgz#171b2c5af66c59e9431199117a3bcadc66fdcfd6"
|
||||
integrity sha512-JjSKsAfuHBE/fB2oZ8NxtRTk5iGcg6hkYXMnZ3Wc+b2RSqejEqTaem11mHASMnFilHrax3sLK0GDzcJrekZYLw==
|
||||
|
||||
ua-parser-js@^0.7.18:
|
||||
version "0.7.19"
|
||||
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.19.tgz#94151be4c0a7fb1d001af7022fdaca4642659e4b"
|
||||
|
|
Loading…
Reference in New Issue