Repository: callstack/react-native-paper
Pull request #1143 (2019-06-21 07:31:08)

feat: add contentStyle prop to banner
<!-- Please provide enough information so that others can review your pull request. -->
<!-- Keep pull requests small and focused on a single change. -->

### Motivation

Add `contentStyle` prop to banner.

### Test plan

n/a


callstack-bot: Hey @jaulz, thank you for your pull request 🤗. The documentation from this branch can be viewed [here](https://11041-71323749-gh.circle-artifacts.com/0/docs/index.html). Please remember to update Typescript types if you changed API.
satya164: Couldn't you pass width in the style prop? If it doesn't work, we should make it work. cc @Trancever 
jaulz: @satya164 the goal is to implement banners like mentioned [here](https://material.io/design/components/banners.html#placement) that have a specific `maxWidth` in the inner container. I don't see any possibility via `style` prop only or do you have an idea? 
![image](https://user-images.githubusercontent.com/5358638/59908097-e55b6000-940c-11e9-803f-bd73ecd51202.png)

satya164: Thanks for clarifying. It'll be better to have this info when sending a PR :)

Maybe we should do this by default? It seems reasonable.
jaulz: Sorry for that 😊 We could default it and instead add a `maxWidth` property. What do you think?
satya164: I'll leave it upto @Trancever 
wojteg1337: @jaulz I'm up to `style` prop passed to the component instead `maxWidth`.
Additionally, you will have to solve conflicts

@Trancever make decision 🥉 

Trancever: @jaulz Can we have:
-  maxWidth specified by default (is there any information in MD Guidelines about value?)
- style prop that can override it

jaulz: @Trancever I would suggest to use 960 since that's the minimum width for a tablet in landscape mode from the [breakpoint system](https://material.io/design/layout/responsive-layout-grid.html#breakpoints). There is no value specified and I assume it usually depends on the content which is below. Would you like to have the `maxWidth` as part of the `style` prop or as part of a new `contentStyle` prop?
Trancever: @jaulz Go ahead with `contentStyle` and 960 :)

Patch:
diff --git a/example/src/ExampleList.tsx b/example/src/ExampleList.tsx
index c97589be9..5d161e956 100644
--- a/example/src/ExampleList.tsx
+++ b/example/src/ExampleList.tsx
@@ -1,5 +1,3 @@
-/* @flow */
-
 import * as React from 'react';
 import { FlatList } from 'react-native';
 import { List, Divider, withTheme, Theme } from 'react-native-paper';
diff --git a/example/src/Examples/CheckboxExample.tsx b/example/src/Examples/CheckboxExample.tsx
index afe677e5f..a12aa5222 100644
--- a/example/src/Examples/CheckboxExample.tsx
+++ b/example/src/Examples/CheckboxExample.tsx
@@ -1,5 +1,3 @@
-/* @flow */
-
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 import {
diff --git a/example/src/Examples/RadioButtonExample.tsx b/example/src/Examples/RadioButtonExample.tsx
index acd8c03ee..db00f5b23 100644
--- a/example/src/Examples/RadioButtonExample.tsx
+++ b/example/src/Examples/RadioButtonExample.tsx
@@ -1,5 +1,3 @@
-/* @flow */
-
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 import {
diff --git a/example/src/Examples/ToggleButtonExample.tsx b/example/src/Examples/ToggleButtonExample.tsx
index bee858021..3507f17f2 100644
--- a/example/src/Examples/ToggleButtonExample.tsx
+++ b/example/src/Examples/ToggleButtonExample.tsx
@@ -1,5 +1,3 @@
-/* @flow */
-
 import * as React from 'react';
 import { View, StyleSheet, ImageBackground } from 'react-native';
 import { withTheme, ToggleButton, List, Theme } from 'react-native-paper';
diff --git a/example/webpack.config.js b/example/webpack.config.js
index d63d50e7f..171533efe 100644
--- a/example/webpack.config.js
+++ b/example/webpack.config.js
@@ -9,7 +9,7 @@ module.exports = {
   },
   devtool: 'source-map',
   resolve: {
-    extensions: ['.tsx', 'ts', '.js'],
+    extensions: ['.tsx', '.ts', '.js'],
   },
   module: {
     rules: [
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index ee0b67c1d..99c6394cc 100644
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -8,6 +8,7 @@ import { Theme, $RemoveChildren } from '../types';
 import shadow from '../styles/shadow';
 
 const ELEVATION = 1;
+const DEFAULT_MAX_WIDTH = 960;
 
 type Props = $RemoveChildren<typeof Surface> & {
   /**
@@ -35,6 +36,11 @@ type Props = $RemoveChildren<typeof Surface> & {
     label: string;
     onPress: () => void;
   }>;
+  /**
+   * Style of banner's inner content.
+   * Use this prop to apply custom width for wide layouts.
+   */
+  contentStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<ViewStyle>;
   /**
    * @optional
@@ -159,6 +165,7 @@ class Banner extends React.Component<Props, State> {
       image,
       children,
       actions,
+      contentStyle,
       style,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       theme,
@@ -185,7 +192,7 @@ class Banner extends React.Component<Props, State> {
         {...rest}
         style={[styles.container, shadow(ELEVATION) as ViewStyle, style]}
       >
-        <View style={styles.wrapper}>
+        <View style={[styles.wrapper, contentStyle]}>
           <Animated.View style={{ height }} />
           <Animated.View
             onLayout={this._handleLayout}
@@ -235,6 +242,9 @@ const styles = StyleSheet.create({
   },
   wrapper: {
     overflow: 'hidden',
+    alignSelf: 'center',
+    width: '100%',
+    maxWidth: DEFAULT_MAX_WIDTH,
   },
   absolute: {
     position: 'absolute',
diff --git a/src/components/Switch.tsx b/src/components/Switch.tsx
index c746c2af8..9739567dc 100644
--- a/src/components/Switch.tsx
+++ b/src/components/Switch.tsx
@@ -1,5 +1,3 @@
-/* @flow */
-
 import * as React from 'react';
 import { grey400, grey800, grey50, white, black } from '../styles/colors';
 import {
diff --git a/src/components/TextInput/helpers.tsx b/src/components/TextInput/helpers.tsx
index 534139f3c..2bb876663 100644
--- a/src/components/TextInput/helpers.tsx
+++ b/src/components/TextInput/helpers.tsx
@@ -1,5 +1,3 @@
-// @flow
-
 type PaddingProps = {
   height: number | null;
   labelHalfHeight: number;
diff --git a/src/components/Typography/Caption.tsx b/src/components/Typography/Caption.tsx
index 1c3cbd367..843b85605 100644
--- a/src/components/Typography/Caption.tsx
+++ b/src/components/Typography/Caption.tsx
@@ -1,5 +1,3 @@
-/* @flow */
-
 import * as React from 'react';
 import { Text, TextStyle, StyleSheet, StyleProp } from 'react-native';
 import StyledText from './StyledText';
diff --git a/src/components/Typography/Headline.tsx b/src/components/Typography/Headline.tsx
index c02fe94eb..5cc51e710 100644
--- a/src/components/Typography/Headline.tsx
+++ b/src/components/Typography/Headline.tsx
@@ -1,5 +1,3 @@
-/* @flow */
-
 import * as React from 'react';
 import { Text, TextStyle, StyleSheet, StyleProp } from 'react-native';
 
diff --git a/src/components/Typography/StyledText.tsx b/src/components/Typography/StyledText.tsx
index 98d775895..434d36823 100644
--- a/src/components/Typography/StyledText.tsx
+++ b/src/components/Typography/StyledText.tsx
@@ -1,5 +1,3 @@
-/* @flow */
-
 import color from 'color';
 import * as React from 'react';
 import { I18nManager, StyleProp, TextStyle } from 'react-native';
diff --git a/src/components/Typography/Title.tsx b/src/components/Typography/Title.tsx
index d886d9c2b..a49a1727f 100644
--- a/src/components/Typography/Title.tsx
+++ b/src/components/Typography/Title.tsx
@@ -1,5 +1,3 @@
-/* @flow */
-
 import * as React from 'react';
 import { Text, StyleSheet } from 'react-native';
 import StyledText from './StyledText';
diff --git a/src/constants.ts b/src/constants.ts
index 28a38381a..29db1f17e 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,5 +1,3 @@
-/* @flow */
-
 import { Platform } from 'react-native';
 
 // @ts-ignore
diff --git a/src/types.tsx b/src/types.tsx
index e8de00b35..9a1e638a4 100644
--- a/src/types.tsx
+++ b/src/types.tsx
@@ -1,5 +1,3 @@
-/* @flow */
-
 import * as React from 'react';
 
 export type Font = {


Test patch:
diff --git a/src/components/__tests__/__snapshots__/Banner.test.js.snap b/src/components/__tests__/__snapshots__/Banner.test.js.snap
index a6bc36490..6be3f901b 100644
--- a/src/components/__tests__/__snapshots__/Banner.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Banner.test.js.snap
@@ -18,9 +18,15 @@ exports[`renders hidden banner, without action buttons and without image 1`] = `
 >
   <View
     style={
-      Object {
-        "overflow": "hidden",
-      }
+      Array [
+        Object {
+          "alignSelf": "center",
+          "maxWidth": 960,
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        undefined,
+      ]
     }
   >
     <View
@@ -109,9 +115,15 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
 >
   <View
     style={
-      Object {
-        "overflow": "hidden",
-      }
+      Array [
+        Object {
+          "alignSelf": "center",
+          "maxWidth": 960,
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        undefined,
+      ]
     }
   >
     <View
@@ -296,9 +308,15 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
 >
   <View
     style={
-      Object {
-        "overflow": "hidden",
-      }
+      Array [
+        Object {
+          "alignSelf": "center",
+          "maxWidth": 960,
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        undefined,
+      ]
     }
   >
     <View
@@ -548,9 +566,15 @@ exports[`renders visible banner, without action buttons and with image 1`] = `
 >
   <View
     style={
-      Object {
-        "overflow": "hidden",
-      }
+      Array [
+        Object {
+          "alignSelf": "center",
+          "maxWidth": 960,
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        undefined,
+      ]
     }
   >
     <View
@@ -648,9 +672,15 @@ exports[`renders visible banner, without action buttons and without image 1`] =
 >
   <View
     style={
-      Object {
-        "overflow": "hidden",
-      }
+      Array [
+        Object {
+          "alignSelf": "center",
+          "maxWidth": 960,
+          "overflow": "hidden",
+          "width": "100%",
+        },
+        undefined,
+      ]
     }
   >
     <View