Skip to content

Commit 319a86e

Browse files
TitozzzTitozzz
authored
feat(android): fix overflow issues and match iOS default renders (react-native-webview#472)
fixes react-native-webview#466 react-native-webview#194 * feat(android): fix overflow issues and match iOS default render error and loading behaviour * Use babel preset typescript through react-native instead of ts-jest * Update yarn.lock * Update README.md
1 parent cec9019 commit 319a86e

10 files changed

+73
-138
lines changed

‎.eslintignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
lib/
1+
lib/
2+
babel.config.js

‎README.md

+7-8
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
# React Native WebView - a Modern, Cross-Platform WebView for React Native
2-
[![star this repo](http://githubbadges.com/star.svg?user=react-native-community&repo=react-native-webview&style=flat)](https://github.com/react-native-community/react-native-webview) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![All Contributors](https://img.shields.io/badge/all_contributors-13-orange.svg?style=flat-square)](#contributors) [![Known Vulnerabilities](https://snyk.io/test/github/react-native-community/react-native-webview/badge.svg?style=flat-square)](https://snyk.io/test/github/react-native-community/react-native-webview)
2+
3+
[![star this repo](http://githubbadges.com/star.svg?user=react-native-community&repo=react-native-webview&style=flat)](https://github.com/react-native-community/react-native-webview) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![All Contributors](https://img.shields.io/badge/all_contributors-13-orange.svg?style=flat-square)](#contributors) [![Known Vulnerabilities](https://snyk.io/test/github/react-native-community/react-native-webview/badge.svg?style=flat-square)](https://snyk.io/test/github/react-native-community/react-native-webview)
34

45
**React Native WebView** is a modern, well-supported, and cross-platform WebView for React Native. It is intended to be a replacement for the built-in WebView (which will be [removed from core](https://github.com/react-native-community/discussions-and-proposals/pull/3)).
56

67
## Core Maintainers - Sponsoring companies
8+
79
_This project is maintained for free by these people using both their free time and their company work time._
810

911
- [Thibault Malbranche](https://github.com/Titozzz) ([Twitter @titozzz](https://twitter.com/titozzz)) from [Brigad](https://brigad.co/about)
@@ -43,17 +45,15 @@ This project follows [semantic versioning](https://semver.org/). We do not hesit
4345
Import the `WebView` component from `react-native-webview` and use it like so:
4446

4547
```jsx
46-
import React, { Component } from "react";
47-
import { StyleSheet, Text, View } from "react-native";
48-
import { WebView } from "react-native-webview";
48+
import React, { Component } from 'react';
49+
import { StyleSheet, Text, View } from 'react-native';
50+
import { WebView } from 'react-native-webview';
4951

5052
// ...
5153
class MyWebComponent extends Component {
5254
render() {
5355
return (
54-
<WebView
55-
source={{ uri: "https://facebook.github.io/react-native/" }}
56-
/>
56+
<WebView source={{ uri: 'https://facebook.github.io/react-native/' }} />
5757
);
5858
}
5959
}
@@ -64,7 +64,6 @@ For more, read the [API Reference](./docs/Reference.md) and [Guide](./docs/Guide
6464
## Common issues
6565

6666
- If you're getting `Invariant Violation: Native component for "RNCWKWebView does not exist"` it likely means you forgot to run `react-native link` or there was some error with the linking process
67-
- There's a [problem](https://stackoverflow.com/questions/52872045/rendering-webview-on-android-device-overlaps-previous-siblings-from-same-parent) on some Android devices where the webview could overlap previous siblings from same parent. To fix this, wrap the WebView in a View with style `overflow: hidden`.
6867

6968
## Contributing
7069

‎babel.config.js

+10-12
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
module.exports = function (api) {
2-
api && api.cache(false);
3-
return {
4-
env: {
5-
test: {
6-
presets: [
7-
"module:metro-react-native-babel-preset"
8-
],
9-
}
10-
}
11-
};
12-
}
1+
module.exports = function(api) {
2+
api && api.cache(false);
3+
return {
4+
env: {
5+
test: {
6+
presets: ['module:metro-react-native-babel-preset'],
7+
},
8+
},
9+
};
10+
};

‎jest.config.js

-6
Original file line numberDiff line numberDiff line change
@@ -164,12 +164,6 @@ module.exports = {
164164
// timers: "real",
165165

166166
// A map from regular expressions to paths to transformers
167-
transform: {
168-
'^.+\\.ts(x)?$': 'ts-jest',
169-
'^.+\\.js$': 'babel-jest',
170-
'^.+\\.(bmp|gif|jpg|jpeg|mp4|png|psd|svg|webp)$':
171-
'<rootDir>/node_modules/react-native/jest/assetFileTransformer.js',
172-
},
173167

174168
// An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
175169
// transformIgnorePatterns: [

‎package.json

-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@
5050
"react": "16.8.3",
5151
"react-native": "0.59.1",
5252
"semantic-release": "15.10.3",
53-
"ts-jest": "24.0.0",
5453
"typescript": "3.3.3333"
5554
},
5655
"repository": {

‎src/WebView.android.tsx

+9-11
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22

33
import {
4-
ActivityIndicator,
54
Image,
65
requireNativeComponent,
76
UIManager as NotTypedUIManager,
@@ -17,6 +16,8 @@ import {
1716
defaultOriginWhitelist,
1817
createOnShouldStartLoadWithRequest,
1918
getViewManagerConfig,
19+
defaultRenderError,
20+
defaultRenderLoading,
2021
} from './WebViewShared';
2122
import {
2223
WebViewErrorEvent,
@@ -38,12 +39,6 @@ const RNCWebView = requireNativeComponent(
3839
) as typeof NativeWebViewAndroid;
3940
const { resolveAssetSource } = Image;
4041

41-
const defaultRenderLoading = () => (
42-
<View style={styles.loadingView}>
43-
<ActivityIndicator style={styles.loadingProgressBar} />
44-
</View>
45-
);
46-
4742
/**
4843
* Renders a native WebView.
4944
*/
@@ -228,23 +223,26 @@ class WebView extends React.Component<AndroidWebViewProps, State> {
228223
nativeConfig = {},
229224
...otherProps
230225
} = this.props;
226+
231227
let otherView = null;
232228

233229
if (this.state.viewState === 'LOADING') {
234230
otherView = (renderLoading || defaultRenderLoading)();
235231
} else if (this.state.viewState === 'ERROR') {
236232
const errorEvent = this.state.lastErrorEvent;
237233
invariant(errorEvent != null, 'lastErrorEvent expected to be non-null');
238-
otherView
239-
= renderError
240-
&& renderError(errorEvent.domain, errorEvent.code, errorEvent.description);
234+
otherView = (renderError || defaultRenderError)(
235+
errorEvent.domain,
236+
errorEvent.code,
237+
errorEvent.description,
238+
);
241239
} else if (this.state.viewState !== 'IDLE') {
242240
console.error(
243241
`RNCWebView invalid state encountered: ${this.state.viewState}`,
244242
);
245243
}
246244

247-
const webViewStyles = [styles.container, style];
245+
const webViewStyles = [styles.container, styles.webView, style];
248246
if (
249247
this.state.viewState === 'LOADING'
250248
|| this.state.viewState === 'ERROR'

‎src/WebView.ios.tsx

+2-20
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import React from 'react';
22
import {
3-
ActivityIndicator,
4-
Text,
53
UIManager as NotTypedUIManager,
64
View,
75
requireNativeComponent,
@@ -16,6 +14,8 @@ import {
1614
defaultOriginWhitelist,
1715
createOnShouldStartLoadWithRequest,
1816
getViewManagerConfig,
17+
defaultRenderError,
18+
defaultRenderLoading,
1919
} from './WebViewShared';
2020
import {
2121
WebViewErrorEvent,
@@ -60,24 +60,6 @@ const RNCWKWebView: typeof NativeWebViewIOS = requireNativeComponent(
6060
'RNCWKWebView',
6161
);
6262

63-
const defaultRenderLoading = () => (
64-
<View style={styles.loadingView}>
65-
<ActivityIndicator />
66-
</View>
67-
);
68-
const defaultRenderError = (
69-
errorDomain: string | undefined,
70-
errorCode: number,
71-
errorDesc: string,
72-
) => (
73-
<View style={styles.errorContainer}>
74-
<Text style={styles.errorTextTitle}>Error loading page</Text>
75-
<Text style={styles.errorText}>{`Domain: ${errorDomain}`}</Text>
76-
<Text style={styles.errorText}>{`Error Code: ${errorCode}`}</Text>
77-
<Text style={styles.errorText}>{`Description: ${errorDesc}`}</Text>
78-
</View>
79-
);
80-
8163
class WebView extends React.Component<IOSWebViewProps, State> {
8264
static defaultProps = {
8365
useWebKit: true,

‎src/WebView.styles.ts

+5-3
Original file line numberDiff line numberDiff line change
@@ -11,26 +11,28 @@ interface Styles {
1111
loadingProgressBar: ViewStyle;
1212
}
1313

14-
const BGWASH = 'rgba(255,255,255,0.8)';
15-
1614
const styles = StyleSheet.create<Styles>({
1715
container: {
1816
flex: 1,
17+
overflow: 'hidden',
18+
backgroundColor: 'white',
1919
},
2020
errorContainer: {
2121
flex: 1,
2222
justifyContent: 'center',
2323
alignItems: 'center',
24-
backgroundColor: BGWASH,
24+
backgroundColor: 'white',
2525
},
2626
hidden: {
2727
height: 0,
2828
flex: 0, // disable 'flex:1' when hiding a View
29+
display: 'none',
2930
},
3031
loadingView: {
3132
flex: 1,
3233
justifyContent: 'center',
3334
alignItems: 'center',
35+
backgroundColor: 'white',
3436
},
3537
loadingProgressBar: {
3638
height: 20,

‎src/WebViewShared.ts renamed to ‎src/WebViewShared.tsx

+29-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,18 @@
11
import escapeStringRegexp from 'escape-string-regexp';
2-
import { Linking, UIManager as NotTypedUIManager } from 'react-native';
2+
import React from 'react';
3+
import {
4+
Linking,
5+
UIManager as NotTypedUIManager,
6+
View,
7+
ActivityIndicator,
8+
Text,
9+
} from 'react-native';
310
import {
411
WebViewNavigationEvent,
512
OnShouldStartLoadWithRequest,
613
CustomUIManager,
714
} from './WebViewTypes';
15+
import styles from './WebView.styles';
816

917
const UIManager = NotTypedUIManager as CustomUIManager;
1018

@@ -66,8 +74,28 @@ const getViewManagerConfig = (
6674
return UIManager.getViewManagerConfig(viewManagerName);
6775
};
6876

77+
const defaultRenderLoading = () => (
78+
<View style={styles.loadingView}>
79+
<ActivityIndicator />
80+
</View>
81+
);
82+
const defaultRenderError = (
83+
errorDomain: string | undefined,
84+
errorCode: number,
85+
errorDesc: string,
86+
) => (
87+
<View style={styles.errorContainer}>
88+
<Text style={styles.errorTextTitle}>Error loading page</Text>
89+
<Text style={styles.errorText}>{`Domain: ${errorDomain}`}</Text>
90+
<Text style={styles.errorText}>{`Error Code: ${errorCode}`}</Text>
91+
<Text style={styles.errorText}>{`Description: ${errorDesc}`}</Text>
92+
</View>
93+
);
94+
6995
export {
7096
defaultOriginWhitelist,
7197
createOnShouldStartLoadWithRequest,
7298
getViewManagerConfig,
99+
defaultRenderLoading,
100+
defaultRenderError,
73101
};

0 commit comments

Comments
 (0)