Repository: callstack/react-native-paper
Pull request #944 (2019-03-21 15:38:59)

List item ellipsize position
### Motivation

Ability to change the ellipsize position in the Title/Description of list items

### Test plan
add the following to your list item properties and see that you can change the ellipses position in the following text elements. 
```
titleEllipsizeMode='middle'
descriptionEllipsizeMode='middle'
```
![image](https://user-images.githubusercontent.com/6373759/54764171-43d23180-4bc5-11e9-96e5-b37019039c7a.png)



callstack-bot: Hey @Darkmyr, thank you for your pull request 🤗. The documentation from this branch can be viewed [here](https://9176-71323749-gh.circle-artifacts.com/0/docs/index.html). Please remember to update Typescript types if you changed API.

Patch:
diff --git a/src/components/Banner.js b/src/components/Banner.js
index f507db137..a977816e5 100644
--- a/src/components/Banner.js
+++ b/src/components/Banner.js
@@ -7,6 +7,9 @@ import Text from './Typography/Text';
 import Button from './Button';
 import { withTheme } from '../core/theming';
 import type { Theme, $RemoveChildren } from '../types';
+import shadow from '../styles/shadow';
+
+const ELEVATION = 1;
 
 type Props = $RemoveChildren<typeof Surface> & {|
   /**
@@ -179,44 +182,46 @@ class Banner extends React.Component<Props, State> {
     );
 
     return (
-      <Surface {...rest} style={[styles.container, style]}>
-        <Animated.View style={{ height }} />
-        <Animated.View
-          onLayout={this._handleLayout}
-          style={[
-            layout.measured || !visible
-              ? // If we have measured banner's height or it's invisible,
-                // Position it absolutely, the layout will be taken care of the spacer
-                [styles.absolute, { transform: [{ translateY }] }]
-              : // Otherwise position it normally
-                null,
-            !layout.measured && !visible
-              ? // If we haven't measured banner's height yet and it's invisible,
-                // hide it with opacity: 0 so user doesn't see it
-                { opacity: 0 }
-              : null,
-          ]}
-        >
-          <View style={styles.content}>
-            {image ? (
-              <View style={styles.image}>{image({ size: 40 })}</View>
-            ) : null}
-            <Text style={styles.message}>{children}</Text>
-          </View>
-          <View style={styles.actions}>
-            {actions.map(({ label, ...others }, i) => (
-              <Button
-                key={/* eslint-disable-line react/no-array-index-key */ i}
-                compact
-                mode="text"
-                style={styles.button}
-                {...others}
-              >
-                {label}
-              </Button>
-            ))}
-          </View>
-        </Animated.View>
+      <Surface {...rest} style={[styles.container, shadow(ELEVATION), style]}>
+        <View style={styles.wrapper}>
+          <Animated.View style={{ height }} />
+          <Animated.View
+            onLayout={this._handleLayout}
+            style={[
+              layout.measured || !visible
+                ? // If we have measured banner's height or it's invisible,
+                  // Position it absolutely, the layout will be taken care of the spacer
+                  [styles.absolute, { transform: [{ translateY }] }]
+                : // Otherwise position it normally
+                  null,
+              !layout.measured && !visible
+                ? // If we haven't measured banner's height yet and it's invisible,
+                  // hide it with opacity: 0 so user doesn't see it
+                  { opacity: 0 }
+                : null,
+            ]}
+          >
+            <View style={styles.content}>
+              {image ? (
+                <View style={styles.image}>{image({ size: 40 })}</View>
+              ) : null}
+              <Text style={styles.message}>{children}</Text>
+            </View>
+            <View style={styles.actions}>
+              {actions.map(({ label, ...others }, i) => (
+                <Button
+                  key={/* eslint-disable-line react/no-array-index-key */ i}
+                  compact
+                  mode="text"
+                  style={styles.button}
+                  {...others}
+                >
+                  {label}
+                </Button>
+              ))}
+            </View>
+          </Animated.View>
+        </View>
       </Surface>
     );
   }
@@ -224,7 +229,10 @@ class Banner extends React.Component<Props, State> {
 
 const styles = StyleSheet.create({
   container: {
-    elevation: 1,
+    elevation: ELEVATION,
+  },
+  wrapper: {
+    overflow: 'hidden',
   },
   absolute: {
     position: 'absolute',
diff --git a/src/components/List/ListItem.js b/src/components/List/ListItem.js
index 2bd5173a5..51572a612 100644
--- a/src/components/List/ListItem.js
+++ b/src/components/List/ListItem.js
@@ -49,6 +49,14 @@ type Props = $RemoveChildren<typeof TouchableRipple> & {|
    * Style that is passed to Description element.
    */
   descriptionStyle?: TextStyleProp,
+  /**
+   * Ellipsize Mode for the Title
+   */
+  titleEllipsizeMode?: 'head' | 'middle' | 'tail' | 'clip',
+  /**
+   * Ellipsize Mode for the Description
+   */
+  descriptionEllipsizeMode?: 'head' | 'middle' | 'tail' | 'clip',
 |};
 
 /**
@@ -90,6 +98,8 @@ class ListItem extends React.Component<Props> {
       style,
       titleStyle,
       descriptionStyle,
+      titleEllipsizeMode,
+      descriptionEllipsizeMode,
       ...rest
     } = this.props;
     const titleColor = color(theme.colors.text)
@@ -111,6 +121,7 @@ class ListItem extends React.Component<Props> {
           {left ? left({ color: descriptionColor }) : null}
           <View style={[styles.item, styles.content]} pointerEvents="none">
             <Text
+              ellipsizeMode={titleEllipsizeMode}
               numberOfLines={1}
               style={[styles.title, { color: titleColor }, titleStyle]}
             >
@@ -118,6 +129,7 @@ class ListItem extends React.Component<Props> {
             </Text>
             {description ? (
               <Text
+                ellipsizeMode={descriptionEllipsizeMode}
                 numberOfLines={2}
                 style={[
                   styles.description,
diff --git a/typings/components/List.d.ts b/typings/components/List.d.ts
index b232c7921..6d2b0f4ba 100644
--- a/typings/components/List.d.ts
+++ b/typings/components/List.d.ts
@@ -37,6 +37,8 @@ export interface ItemProps extends TouchableRipplePropsWithoutChildren {
   right?: (props: { color: string }) => React.ReactNode;
   titleStyle?: StyleProp<TextStyle>;
   descriptionStyle?: StyleProp<TextStyle>;
+  titleEllipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
+  descriptionEllipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
 }
 
 export declare class Item extends React.Component<ItemProps> {}


Test patch:
diff --git a/src/components/__tests__/__snapshots__/Banner.test.js.snap b/src/components/__tests__/__snapshots__/Banner.test.js.snap
index d5e7372ac..f1255747d 100644
--- a/src/components/__tests__/__snapshots__/Banner.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Banner.test.js.snap
@@ -19,65 +19,73 @@ exports[`renders hidden banner, without action buttons and without image 1`] = `
   <View
     style={
       Object {
-        "height": 0,
-      }
-    }
-  />
-  <View
-    onLayout={[Function]}
-    style={
-      Object {
-        "opacity": 0,
-        "position": "absolute",
-        "top": 0,
-        "transform": Array [
-          Object {
-            "translateY": -0,
-          },
-        ],
-        "width": "100%",
+        "overflow": "hidden",
       }
     }
   >
     <View
       style={
         Object {
-          "flexDirection": "row",
-          "justifyContent": "flex-start",
-          "marginBottom": 0,
-          "marginHorizontal": 8,
-          "marginTop": 16,
+          "height": 0,
         }
       }
-    >
-      <Text
-        style={
-          Array [
-            Object {
-              "color": "#000000",
-              "fontFamily": "Helvetica Neue",
-              "textAlign": "left",
-              "writingDirection": "ltr",
-            },
-            Object {
-              "flex": 1,
-              "margin": 8,
-            },
-          ]
-        }
-      >
-        Two line text string with two actions. One to two lines is preferable on mobile.
-      </Text>
-    </View>
+    />
     <View
+      onLayout={[Function]}
       style={
         Object {
-          "flexDirection": "row",
-          "justifyContent": "flex-end",
-          "margin": 4,
+          "opacity": 0,
+          "position": "absolute",
+          "top": 0,
+          "transform": Array [
+            Object {
+              "translateY": -0,
+            },
+          ],
+          "width": "100%",
         }
       }
-    />
+    >
+      <View
+        style={
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "flex-start",
+            "marginBottom": 0,
+            "marginHorizontal": 8,
+            "marginTop": 16,
+          }
+        }
+      >
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#000000",
+                "fontFamily": "Helvetica Neue",
+                "textAlign": "left",
+                "writingDirection": "ltr",
+              },
+              Object {
+                "flex": 1,
+                "margin": 8,
+              },
+            ]
+          }
+        >
+          Two line text string with two actions. One to two lines is preferable on mobile.
+        </Text>
+      </View>
+      <View
+        style={
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "flex-end",
+            "margin": 4,
+          }
+        }
+      />
+    </View>
   </View>
 </View>
 `;
@@ -101,161 +109,169 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
   <View
     style={
       Object {
-        "height": 0,
+        "overflow": "hidden",
       }
     }
-  />
-  <View
-    onLayout={[Function]}
-    style={Object {}}
   >
     <View
       style={
         Object {
-          "flexDirection": "row",
-          "justifyContent": "flex-start",
-          "marginBottom": 0,
-          "marginHorizontal": 8,
-          "marginTop": 16,
+          "height": 0,
         }
       }
+    />
+    <View
+      onLayout={[Function]}
+      style={Object {}}
     >
       <View
         style={
           Object {
-            "margin": 8,
+            "flexDirection": "row",
+            "justifyContent": "flex-start",
+            "marginBottom": 0,
+            "marginHorizontal": 8,
+            "marginTop": 16,
           }
         }
       >
-        <Image
-          source={
+        <View
+          style={
             Object {
-              "uri": "https://callstack.com/images/team/Satya.png",
+              "margin": 8,
             }
           }
-          style={
-            Object {
-              "height": 40,
-              "width": 40,
+        >
+          <Image
+            source={
+              Object {
+                "uri": "https://callstack.com/images/team/Satya.png",
+              }
+            }
+            style={
+              Object {
+                "height": 40,
+                "width": 40,
+              }
             }
+          />
+        </View>
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#000000",
+                "fontFamily": "Helvetica Neue",
+                "textAlign": "left",
+                "writingDirection": "ltr",
+              },
+              Object {
+                "flex": 1,
+                "margin": 8,
+              },
+            ]
           }
-        />
+        >
+          Two line text string with two actions. One to two lines is preferable on mobile.
+        </Text>
       </View>
-      <Text
-        style={
-          Array [
-            Object {
-              "color": "#000000",
-              "fontFamily": "Helvetica Neue",
-              "textAlign": "left",
-              "writingDirection": "ltr",
-            },
-            Object {
-              "flex": 1,
-              "margin": 8,
-            },
-          ]
-        }
-      >
-        Two line text string with two actions. One to two lines is preferable on mobile.
-      </Text>
-    </View>
-    <View
-      style={
-        Object {
-          "flexDirection": "row",
-          "justifyContent": "flex-end",
-          "margin": 4,
-        }
-      }
-    >
       <View
         style={
           Object {
-            "backgroundColor": "transparent",
-            "borderColor": "transparent",
-            "borderRadius": 4,
-            "borderStyle": "solid",
-            "borderWidth": 0,
-            "elevation": 0,
+            "flexDirection": "row",
+            "justifyContent": "flex-end",
             "margin": 4,
-            "minWidth": "auto",
-            "shadowColor": "#000000",
-            "shadowOffset": Object {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0.24,
-            "shadowRadius": 0,
           }
         }
       >
         <View
-          accessibilityRole="button"
-          accessible={true}
-          isTVSelectable={true}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
           style={
-            Array [
-              Object {
-                "overflow": "hidden",
-              },
-              Object {
-                "borderRadius": 4,
+            Object {
+              "backgroundColor": "transparent",
+              "borderColor": "transparent",
+              "borderRadius": 4,
+              "borderStyle": "solid",
+              "borderWidth": 0,
+              "elevation": 0,
+              "margin": 4,
+              "minWidth": "auto",
+              "shadowColor": "#000000",
+              "shadowOffset": Object {
+                "height": 0,
+                "width": 0,
               },
-            ]
+              "shadowOpacity": 0.24,
+              "shadowRadius": 0,
+            }
           }
         >
           <View
+            accessibilityRole="button"
+            accessible={true}
+            isTVSelectable={true}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               Array [
                 Object {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
+                  "overflow": "hidden",
+                },
+                Object {
+                  "borderRadius": 4,
                 },
-                undefined,
               ]
             }
           >
-            <Text
-              numberOfLines={1}
+            <View
               style={
                 Array [
                   Object {
-                    "color": "#000000",
-                    "fontFamily": "Helvetica Neue",
-                    "textAlign": "left",
-                    "writingDirection": "ltr",
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "justifyContent": "center",
                   },
-                  Array [
-                    Object {
-                      "letterSpacing": 1,
-                      "marginHorizontal": 16,
-                      "marginVertical": 9,
-                      "textAlign": "center",
-                    },
-                    Object {
-                      "marginHorizontal": 8,
-                    },
-                    Object {
-                      "color": "#6200ee",
-                      "fontFamily": "HelveticaNeue-Medium",
-                    },
-                    Object {
-                      "fontFamily": "HelveticaNeue-Medium",
-                    },
-                  ],
+                  undefined,
                 ]
               }
             >
-              FIRST
-            </Text>
+              <Text
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000000",
+                      "fontFamily": "Helvetica Neue",
+                      "textAlign": "left",
+                      "writingDirection": "ltr",
+                    },
+                    Array [
+                      Object {
+                        "letterSpacing": 1,
+                        "marginHorizontal": 16,
+                        "marginVertical": 9,
+                        "textAlign": "center",
+                      },
+                      Object {
+                        "marginHorizontal": 8,
+                      },
+                      Object {
+                        "color": "#6200ee",
+                        "fontFamily": "HelveticaNeue-Medium",
+                      },
+                      Object {
+                        "fontFamily": "HelveticaNeue-Medium",
+                      },
+                    ],
+                  ]
+                }
+              >
+                FIRST
+              </Text>
+            </View>
           </View>
         </View>
       </View>
@@ -283,230 +299,238 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
   <View
     style={
       Object {
-        "height": 0,
+        "overflow": "hidden",
       }
     }
-  />
-  <View
-    onLayout={[Function]}
-    style={Object {}}
   >
     <View
       style={
         Object {
-          "flexDirection": "row",
-          "justifyContent": "flex-start",
-          "marginBottom": 0,
-          "marginHorizontal": 8,
-          "marginTop": 16,
+          "height": 0,
         }
       }
-    >
-      <Text
-        style={
-          Array [
-            Object {
-              "color": "#000000",
-              "fontFamily": "Helvetica Neue",
-              "textAlign": "left",
-              "writingDirection": "ltr",
-            },
-            Object {
-              "flex": 1,
-              "margin": 8,
-            },
-          ]
-        }
-      >
-        Two line text string with two actions. One to two lines is preferable on mobile.
-      </Text>
-    </View>
+    />
     <View
-      style={
-        Object {
-          "flexDirection": "row",
-          "justifyContent": "flex-end",
-          "margin": 4,
-        }
-      }
+      onLayout={[Function]}
+      style={Object {}}
     >
       <View
         style={
           Object {
-            "backgroundColor": "transparent",
-            "borderColor": "transparent",
-            "borderRadius": 4,
-            "borderStyle": "solid",
-            "borderWidth": 0,
-            "elevation": 0,
-            "margin": 4,
-            "minWidth": "auto",
-            "shadowColor": "#000000",
-            "shadowOffset": Object {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0.24,
-            "shadowRadius": 0,
+            "flexDirection": "row",
+            "justifyContent": "flex-start",
+            "marginBottom": 0,
+            "marginHorizontal": 8,
+            "marginTop": 16,
           }
         }
       >
-        <View
-          accessibilityRole="button"
-          accessible={true}
-          isTVSelectable={true}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
+        <Text
           style={
             Array [
               Object {
-                "overflow": "hidden",
+                "color": "#000000",
+                "fontFamily": "Helvetica Neue",
+                "textAlign": "left",
+                "writingDirection": "ltr",
               },
               Object {
-                "borderRadius": 4,
+                "flex": 1,
+                "margin": 8,
               },
             ]
           }
+        >
+          Two line text string with two actions. One to two lines is preferable on mobile.
+        </Text>
+      </View>
+      <View
+        style={
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "flex-end",
+            "margin": 4,
+          }
+        }
+      >
+        <View
+          style={
+            Object {
+              "backgroundColor": "transparent",
+              "borderColor": "transparent",
+              "borderRadius": 4,
+              "borderStyle": "solid",
+              "borderWidth": 0,
+              "elevation": 0,
+              "margin": 4,
+              "minWidth": "auto",
+              "shadowColor": "#000000",
+              "shadowOffset": Object {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0.24,
+              "shadowRadius": 0,
+            }
+          }
         >
           <View
+            accessibilityRole="button"
+            accessible={true}
+            isTVSelectable={true}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               Array [
                 Object {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
+                  "overflow": "hidden",
+                },
+                Object {
+                  "borderRadius": 4,
                 },
-                undefined,
               ]
             }
           >
-            <Text
-              numberOfLines={1}
+            <View
               style={
                 Array [
                   Object {
-                    "color": "#000000",
-                    "fontFamily": "Helvetica Neue",
-                    "textAlign": "left",
-                    "writingDirection": "ltr",
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "justifyContent": "center",
                   },
-                  Array [
-                    Object {
-                      "letterSpacing": 1,
-                      "marginHorizontal": 16,
-                      "marginVertical": 9,
-                      "textAlign": "center",
-                    },
-                    Object {
-                      "marginHorizontal": 8,
-                    },
-                    Object {
-                      "color": "#6200ee",
-                      "fontFamily": "HelveticaNeue-Medium",
-                    },
-                    Object {
-                      "fontFamily": "HelveticaNeue-Medium",
-                    },
-                  ],
+                  undefined,
                 ]
               }
             >
-              FIRST
-            </Text>
+              <Text
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000000",
+                      "fontFamily": "Helvetica Neue",
+                      "textAlign": "left",
+                      "writingDirection": "ltr",
+                    },
+                    Array [
+                      Object {
+                        "letterSpacing": 1,
+                        "marginHorizontal": 16,
+                        "marginVertical": 9,
+                        "textAlign": "center",
+                      },
+                      Object {
+                        "marginHorizontal": 8,
+                      },
+                      Object {
+                        "color": "#6200ee",
+                        "fontFamily": "HelveticaNeue-Medium",
+                      },
+                      Object {
+                        "fontFamily": "HelveticaNeue-Medium",
+                      },
+                    ],
+                  ]
+                }
+              >
+                FIRST
+              </Text>
+            </View>
           </View>
         </View>
-      </View>
-      <View
-        style={
-          Object {
-            "backgroundColor": "transparent",
-            "borderColor": "transparent",
-            "borderRadius": 4,
-            "borderStyle": "solid",
-            "borderWidth": 0,
-            "elevation": 0,
-            "margin": 4,
-            "minWidth": "auto",
-            "shadowColor": "#000000",
-            "shadowOffset": Object {
-              "height": 0,
-              "width": 0,
-            },
-            "shadowOpacity": 0.24,
-            "shadowRadius": 0,
-          }
-        }
-      >
         <View
-          accessibilityRole="button"
-          accessible={true}
-          isTVSelectable={true}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
           style={
-            Array [
-              Object {
-                "overflow": "hidden",
-              },
-              Object {
-                "borderRadius": 4,
+            Object {
+              "backgroundColor": "transparent",
+              "borderColor": "transparent",
+              "borderRadius": 4,
+              "borderStyle": "solid",
+              "borderWidth": 0,
+              "elevation": 0,
+              "margin": 4,
+              "minWidth": "auto",
+              "shadowColor": "#000000",
+              "shadowOffset": Object {
+                "height": 0,
+                "width": 0,
               },
-            ]
+              "shadowOpacity": 0.24,
+              "shadowRadius": 0,
+            }
           }
         >
           <View
+            accessibilityRole="button"
+            accessible={true}
+            isTVSelectable={true}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               Array [
                 Object {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
+                  "overflow": "hidden",
+                },
+                Object {
+                  "borderRadius": 4,
                 },
-                undefined,
               ]
             }
           >
-            <Text
-              numberOfLines={1}
+            <View
               style={
                 Array [
                   Object {
-                    "color": "#000000",
-                    "fontFamily": "Helvetica Neue",
-                    "textAlign": "left",
-                    "writingDirection": "ltr",
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "justifyContent": "center",
                   },
-                  Array [
-                    Object {
-                      "letterSpacing": 1,
-                      "marginHorizontal": 16,
-                      "marginVertical": 9,
-                      "textAlign": "center",
-                    },
-                    Object {
-                      "marginHorizontal": 8,
-                    },
-                    Object {
-                      "color": "#6200ee",
-                      "fontFamily": "HelveticaNeue-Medium",
-                    },
-                    Object {
-                      "fontFamily": "HelveticaNeue-Medium",
-                    },
-                  ],
+                  undefined,
                 ]
               }
             >
-              SECOND
-            </Text>
+              <Text
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000000",
+                      "fontFamily": "Helvetica Neue",
+                      "textAlign": "left",
+                      "writingDirection": "ltr",
+                    },
+                    Array [
+                      Object {
+                        "letterSpacing": 1,
+                        "marginHorizontal": 16,
+                        "marginVertical": 9,
+                        "textAlign": "center",
+                      },
+                      Object {
+                        "marginHorizontal": 8,
+                      },
+                      Object {
+                        "color": "#6200ee",
+                        "fontFamily": "HelveticaNeue-Medium",
+                      },
+                      Object {
+                        "fontFamily": "HelveticaNeue-Medium",
+                      },
+                    ],
+                  ]
+                }
+              >
+                SECOND
+              </Text>
+            </View>
           </View>
         </View>
       </View>
@@ -534,74 +558,82 @@ exports[`renders visible banner, without action buttons and with image 1`] = `
   <View
     style={
       Object {
-        "height": 0,
+        "overflow": "hidden",
       }
     }
-  />
-  <View
-    onLayout={[Function]}
-    style={Object {}}
   >
     <View
       style={
         Object {
-          "flexDirection": "row",
-          "justifyContent": "flex-start",
-          "marginBottom": 0,
-          "marginHorizontal": 8,
-          "marginTop": 16,
+          "height": 0,
         }
       }
+    />
+    <View
+      onLayout={[Function]}
+      style={Object {}}
     >
       <View
         style={
           Object {
-            "margin": 8,
+            "flexDirection": "row",
+            "justifyContent": "flex-start",
+            "marginBottom": 0,
+            "marginHorizontal": 8,
+            "marginTop": 16,
           }
         }
       >
-        <Image
-          source={
+        <View
+          style={
             Object {
-              "uri": "https://callstack.com/images/team/Satya.png",
+              "margin": 8,
             }
           }
-          style={
-            Object {
-              "height": 40,
-              "width": 40,
+        >
+          <Image
+            source={
+              Object {
+                "uri": "https://callstack.com/images/team/Satya.png",
+              }
+            }
+            style={
+              Object {
+                "height": 40,
+                "width": 40,
+              }
             }
+          />
+        </View>
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#000000",
+                "fontFamily": "Helvetica Neue",
+                "textAlign": "left",
+                "writingDirection": "ltr",
+              },
+              Object {
+                "flex": 1,
+                "margin": 8,
+              },
+            ]
           }
-        />
+        >
+          Two line text string with two actions. One to two lines is preferable on mobile.
+        </Text>
       </View>
-      <Text
+      <View
         style={
-          Array [
-            Object {
-              "color": "#000000",
-              "fontFamily": "Helvetica Neue",
-              "textAlign": "left",
-              "writingDirection": "ltr",
-            },
-            Object {
-              "flex": 1,
-              "margin": 8,
-            },
-          ]
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "flex-end",
+            "margin": 4,
+          }
         }
-      >
-        Two line text string with two actions. One to two lines is preferable on mobile.
-      </Text>
+      />
     </View>
-    <View
-      style={
-        Object {
-          "flexDirection": "row",
-          "justifyContent": "flex-end",
-          "margin": 4,
-        }
-      }
-    />
   </View>
 </View>
 `;
@@ -625,53 +657,61 @@ exports[`renders visible banner, without action buttons and without image 1`] =
   <View
     style={
       Object {
-        "height": 0,
+        "overflow": "hidden",
       }
     }
-  />
-  <View
-    onLayout={[Function]}
-    style={Object {}}
   >
     <View
       style={
         Object {
-          "flexDirection": "row",
-          "justifyContent": "flex-start",
-          "marginBottom": 0,
-          "marginHorizontal": 8,
-          "marginTop": 16,
+          "height": 0,
         }
       }
+    />
+    <View
+      onLayout={[Function]}
+      style={Object {}}
     >
-      <Text
+      <View
         style={
-          Array [
-            Object {
-              "color": "#000000",
-              "fontFamily": "Helvetica Neue",
-              "textAlign": "left",
-              "writingDirection": "ltr",
-            },
-            Object {
-              "flex": 1,
-              "margin": 8,
-            },
-          ]
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "flex-start",
+            "marginBottom": 0,
+            "marginHorizontal": 8,
+            "marginTop": 16,
+          }
         }
       >
-        Two line text string with two actions. One to two lines is preferable on mobile.
-      </Text>
-    </View>
-    <View
-      style={
-        Object {
-          "flexDirection": "row",
-          "justifyContent": "flex-end",
-          "margin": 4,
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#000000",
+                "fontFamily": "Helvetica Neue",
+                "textAlign": "left",
+                "writingDirection": "ltr",
+              },
+              Object {
+                "flex": 1,
+                "margin": 8,
+              },
+            ]
+          }
+        >
+          Two line text string with two actions. One to two lines is preferable on mobile.
+        </Text>
+      </View>
+      <View
+        style={
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "flex-end",
+            "margin": 4,
+          }
         }
-      }
-    />
+      />
+    </View>
   </View>
 </View>
 `;