Browse Source

feat(new prop): containerStyle (#912)

* feat(new prop): containerStyle

* chore(docs): Add documentation for `containerStyle`
Marco Marinangeli 5 years ago
parent
commit
902d3d1e7f
4 changed files with 39 additions and 4 deletions
  1. 26
    2
      docs/Reference.md
  2. 3
    1
      src/WebView.android.tsx
  3. 3
    1
      src/WebView.ios.tsx
  4. 7
    0
      src/WebViewTypes.ts

+ 26
- 2
docs/Reference.md View File

25
 - [`onShouldStartLoadWithRequest`](Reference.md#onshouldstartloadwithrequest)
25
 - [`onShouldStartLoadWithRequest`](Reference.md#onshouldstartloadwithrequest)
26
 - [`startInLoadingState`](Reference.md#startinloadingstate)
26
 - [`startInLoadingState`](Reference.md#startinloadingstate)
27
 - [`style`](Reference.md#style)
27
 - [`style`](Reference.md#style)
28
+- [`containerStyle`](Reference.md#containerStyle)
28
 - [`decelerationRate`](Reference.md#decelerationrate)
29
 - [`decelerationRate`](Reference.md#decelerationrate)
29
 - [`domStorageEnabled`](Reference.md#domstorageenabled)
30
 - [`domStorageEnabled`](Reference.md#domstorageenabled)
30
 - [`javaScriptEnabled`](Reference.md#javascriptenabled)
31
 - [`javaScriptEnabled`](Reference.md#javascriptenabled)
343
 ### `onHttpError`
344
 ### `onHttpError`
344
 
345
 
345
 Function that is invoked when the `WebView` receives an http error.
346
 Function that is invoked when the `WebView` receives an http error.
347
+
346
 > **_Note_**
348
 > **_Note_**
347
 > Android API minimum level 23.
349
 > Android API minimum level 23.
348
 
350
 
357
   source={{ uri: 'https://facebook.github.io/react-native' }}
359
   source={{ uri: 'https://facebook.github.io/react-native' }}
358
   onHttpError={syntheticEvent => {
360
   onHttpError={syntheticEvent => {
359
     const { nativeEvent } = syntheticEvent;
361
     const { nativeEvent } = syntheticEvent;
360
-    console.warn('WebView received error status code: ', nativeEvent.statusCode);
362
+    console.warn(
363
+      'WebView received error status code: ',
364
+      nativeEvent.statusCode,
365
+    );
361
   }}
366
   }}
362
 />
367
 />
363
 ```
368
 ```
446
   onContentProcessDidTerminate={syntheticEvent => {
451
   onContentProcessDidTerminate={syntheticEvent => {
447
     const { nativeEvent } = syntheticEvent;
452
     const { nativeEvent } = syntheticEvent;
448
     console.warn('Content process terminated, reloading', nativeEvent);
453
     console.warn('Content process terminated, reloading', nativeEvent);
449
-    this.refs.webview.reload()
454
+    this.refs.webview.reload();
450
   }}
455
   }}
451
 />
456
 />
452
 ```
457
 ```
602
 
607
 
603
 ---
608
 ---
604
 
609
 
610
+### `containerStyle`
611
+
612
+A style object that allow you to customize the `WebView` container style. Please note that there are default styles (example: you need to add `flex: 0` to the style if you want to use `height` property).
613
+
614
+| Type  | Required |
615
+| ----- | -------- |
616
+| style | No       |
617
+
618
+Example:
619
+
620
+```jsx
621
+<WebView
622
+  source={{ uri: 'https://facebook.github.io/react-native' }}
623
+  containerStyle={{ marginTop: 20 }}
624
+/>
625
+```
626
+
627
+---
628
+
605
 ### `decelerationRate`
629
 ### `decelerationRate`
606
 
630
 
607
 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:
631
 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:

+ 3
- 1
src/WebView.android.tsx View File

252
       renderLoading,
252
       renderLoading,
253
       source,
253
       source,
254
       style,
254
       style,
255
+      containerStyle,
255
       nativeConfig = {},
256
       nativeConfig = {},
256
       ...otherProps
257
       ...otherProps
257
     } = this.props;
258
     } = this.props;
275
     }
276
     }
276
 
277
 
277
     const webViewStyles = [styles.container, styles.webView, style];
278
     const webViewStyles = [styles.container, styles.webView, style];
279
+    const webViewContainerStyle = [styles.container, containerStyle];
278
 
280
 
279
     if (source && 'method' in source) {
281
     if (source && 'method' in source) {
280
       if (source.method === 'POST' && source.headers) {
282
       if (source.method === 'POST' && source.headers) {
317
     );
319
     );
318
 
320
 
319
     return (
321
     return (
320
-      <View style={styles.container}>
322
+      <View style={webViewContainerStyle}>
321
         {webView}
323
         {webView}
322
         {otherView}
324
         {otherView}
323
       </View>
325
       </View>

+ 3
- 1
src/WebView.ios.tsx View File

291
       renderError,
291
       renderError,
292
       renderLoading,
292
       renderLoading,
293
       style,
293
       style,
294
+      containerStyle,
294
       ...otherProps
295
       ...otherProps
295
     } = this.props;
296
     } = this.props;
296
 
297
 
313
     }
314
     }
314
 
315
 
315
     const webViewStyles = [styles.container, styles.webView, style];
316
     const webViewStyles = [styles.container, styles.webView, style];
317
+    const webViewContainerStyle = [styles.container, containerStyle];
316
 
318
 
317
     const onShouldStartLoadWithRequest = createOnShouldStartLoadWithRequest(
319
     const onShouldStartLoadWithRequest = createOnShouldStartLoadWithRequest(
318
       this.onShouldStartLoadWithRequestCallback,
320
       this.onShouldStartLoadWithRequestCallback,
351
     );
353
     );
352
 
354
 
353
     return (
355
     return (
354
-      <View style={styles.container}>
356
+      <View style={webViewContainerStyle}>
355
         {webView}
357
         {webView}
356
         {otherView}
358
         {otherView}
357
       </View>
359
       </View>

+ 7
- 0
src/WebViewTypes.ts View File

4
 import {
4
 import {
5
   NativeSyntheticEvent,
5
   NativeSyntheticEvent,
6
   ViewProps,
6
   ViewProps,
7
+  StyleProp,
8
+  ViewStyle,
7
   NativeMethodsMixin,
9
   NativeMethodsMixin,
8
   Constructor,
10
   Constructor,
9
   UIManagerStatic,
11
   UIManagerStatic,
576
    */
578
    */
577
   javaScriptEnabled?: boolean;
579
   javaScriptEnabled?: boolean;
578
 
580
 
581
+  /**
582
+   * Stylesheet object to set the style of the container view.
583
+   */
584
+  containerStyle?: StyleProp<ViewStyle>;
585
+
579
   /**
586
   /**
580
    * Function that returns a view to show if there's an error.
587
    * Function that returns a view to show if there's an error.
581
    */
588
    */