feat(android): fix overflow issues and match iOS default render error and loading behaviour
This commit is contained in:
parent
8deacdbbe8
commit
f6c821e9ea
|
@ -1,7 +1,6 @@
|
|||
import React from 'react';
|
||||
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Image,
|
||||
requireNativeComponent,
|
||||
UIManager as NotTypedUIManager,
|
||||
|
@ -17,6 +16,8 @@ import {
|
|||
defaultOriginWhitelist,
|
||||
createOnShouldStartLoadWithRequest,
|
||||
getViewManagerConfig,
|
||||
defaultRenderError,
|
||||
defaultRenderLoading,
|
||||
} from './WebViewShared';
|
||||
import {
|
||||
WebViewErrorEvent,
|
||||
|
@ -38,12 +39,6 @@ const RNCWebView = requireNativeComponent(
|
|||
) as typeof NativeWebViewAndroid;
|
||||
const { resolveAssetSource } = Image;
|
||||
|
||||
const defaultRenderLoading = () => (
|
||||
<View style={styles.loadingView}>
|
||||
<ActivityIndicator style={styles.loadingProgressBar} />
|
||||
</View>
|
||||
);
|
||||
|
||||
/**
|
||||
* Renders a native WebView.
|
||||
*/
|
||||
|
@ -228,6 +223,7 @@ class WebView extends React.Component<AndroidWebViewProps, State> {
|
|||
nativeConfig = {},
|
||||
...otherProps
|
||||
} = this.props;
|
||||
|
||||
let otherView = null;
|
||||
|
||||
if (this.state.viewState === 'LOADING') {
|
||||
|
@ -235,16 +231,18 @@ class WebView extends React.Component<AndroidWebViewProps, State> {
|
|||
} else if (this.state.viewState === 'ERROR') {
|
||||
const errorEvent = this.state.lastErrorEvent;
|
||||
invariant(errorEvent != null, 'lastErrorEvent expected to be non-null');
|
||||
otherView
|
||||
= renderError
|
||||
&& renderError(errorEvent.domain, errorEvent.code, errorEvent.description);
|
||||
otherView = (renderError || defaultRenderError)(
|
||||
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, style];
|
||||
const webViewStyles = [styles.container, styles.webView, style];
|
||||
if (
|
||||
this.state.viewState === 'LOADING'
|
||||
|| this.state.viewState === 'ERROR'
|
||||
|
|
|
@ -1,7 +1,5 @@
|
|||
import React from 'react';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Text,
|
||||
UIManager as NotTypedUIManager,
|
||||
View,
|
||||
requireNativeComponent,
|
||||
|
@ -16,6 +14,8 @@ import {
|
|||
defaultOriginWhitelist,
|
||||
createOnShouldStartLoadWithRequest,
|
||||
getViewManagerConfig,
|
||||
defaultRenderError,
|
||||
defaultRenderLoading,
|
||||
} from './WebViewShared';
|
||||
import {
|
||||
WebViewErrorEvent,
|
||||
|
@ -60,24 +60,6 @@ const RNCWKWebView: typeof NativeWebViewIOS = requireNativeComponent(
|
|||
'RNCWKWebView',
|
||||
);
|
||||
|
||||
const defaultRenderLoading = () => (
|
||||
<View style={styles.loadingView}>
|
||||
<ActivityIndicator />
|
||||
</View>
|
||||
);
|
||||
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>
|
||||
<Text style={styles.errorText}>{`Error Code: ${errorCode}`}</Text>
|
||||
<Text style={styles.errorText}>{`Description: ${errorDesc}`}</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
class WebView extends React.Component<IOSWebViewProps, State> {
|
||||
static defaultProps = {
|
||||
useWebKit: true,
|
||||
|
|
|
@ -11,26 +11,28 @@ interface Styles {
|
|||
loadingProgressBar: ViewStyle;
|
||||
}
|
||||
|
||||
const BGWASH = 'rgba(255,255,255,0.8)';
|
||||
|
||||
const styles = StyleSheet.create<Styles>({
|
||||
container: {
|
||||
flex: 1,
|
||||
overflow: 'hidden',
|
||||
backgroundColor: 'white',
|
||||
},
|
||||
errorContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: BGWASH,
|
||||
backgroundColor: 'white',
|
||||
},
|
||||
hidden: {
|
||||
height: 0,
|
||||
flex: 0, // disable 'flex:1' when hiding a View
|
||||
display: 'none',
|
||||
},
|
||||
loadingView: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'white',
|
||||
},
|
||||
loadingProgressBar: {
|
||||
height: 20,
|
||||
|
|
|
@ -1,10 +1,18 @@
|
|||
import escapeStringRegexp from 'escape-string-regexp';
|
||||
import { Linking, UIManager as NotTypedUIManager } from 'react-native';
|
||||
import React from 'react';
|
||||
import {
|
||||
Linking,
|
||||
UIManager as NotTypedUIManager,
|
||||
View,
|
||||
ActivityIndicator,
|
||||
Text,
|
||||
} from 'react-native';
|
||||
import {
|
||||
WebViewNavigationEvent,
|
||||
OnShouldStartLoadWithRequest,
|
||||
CustomUIManager,
|
||||
} from './WebViewTypes';
|
||||
import styles from './WebView.styles';
|
||||
|
||||
const UIManager = NotTypedUIManager as CustomUIManager;
|
||||
|
||||
|
@ -66,8 +74,28 @@ const getViewManagerConfig = (
|
|||
return UIManager.getViewManagerConfig(viewManagerName);
|
||||
};
|
||||
|
||||
const defaultRenderLoading = () => (
|
||||
<View style={styles.loadingView}>
|
||||
<ActivityIndicator />
|
||||
</View>
|
||||
);
|
||||
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>
|
||||
<Text style={styles.errorText}>{`Error Code: ${errorCode}`}</Text>
|
||||
<Text style={styles.errorText}>{`Description: ${errorDesc}`}</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
export {
|
||||
defaultOriginWhitelist,
|
||||
createOnShouldStartLoadWithRequest,
|
||||
getViewManagerConfig,
|
||||
defaultRenderLoading,
|
||||
defaultRenderError,
|
||||
};
|
Loading…
Reference in New Issue