fix: add wrapperStyle to Snackbar (#1865)

* fix: add wrapperStyle * style: fix lint * style: fix lint * test: update snapshots
callstack · Apr 30, 2020 · 3a00234 · 3a00234
1 parent ac3d8ac
commit 3a00234
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 16 deletions.
diff --git a/src/components/Snackbar.tsx b/src/components/Snackbar.tsx
@@ -41,6 +41,10 @@ type Props = React.ComponentProps<typeof Surface> & {
    * Text content of the Snackbar.
    */
   children: React.ReactNode;
+  /**
+   * Style for the wrapper of the snackbar
+   */
+  wrapperStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<ViewStyle>;
   ref?: React.RefObject<View>;
   /**
@@ -218,6 +222,7 @@ class Snackbar extends React.Component<Props, State> {
       onDismiss,
       theme,
       style,
+      wrapperStyle,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       duration,
       ...rest
@@ -229,7 +234,10 @@ class Snackbar extends React.Component<Props, State> {
     }
 
     return (
-      <SafeAreaView pointerEvents="box-none" style={styles.wrapper}>
+      <SafeAreaView
+        pointerEvents="box-none"
+        style={[styles.wrapper, wrapperStyle]}
+      >
         <Surface
           pointerEvents="box-none"
           accessibilityLiveRegion="polite"

diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
@@ -7,11 +7,14 @@ exports[`renders snackbar with Text as a child 1`] = `
   emulateUnlessSupported={true}
   pointerEvents="box-none"
   style={
-    Object {
-      "bottom": 0,
-      "position": "absolute",
-      "width": "100%",
-    }
+    Array [
+      Object {
+        "bottom": 0,
+        "position": "absolute",
+        "width": "100%",
+      },
+      undefined,
+    ]
   }
 >
   <View
@@ -79,11 +82,14 @@ exports[`renders snackbar with action button 1`] = `
   emulateUnlessSupported={true}
   pointerEvents="box-none"
   style={
-    Object {
-      "bottom": 0,
-      "position": "absolute",
-      "width": "100%",
-    }
+    Array [
+      Object {
+        "bottom": 0,
+        "position": "absolute",
+        "width": "100%",
+      },
+      undefined,
+    ]
   }
 >
   <View
@@ -242,11 +248,14 @@ exports[`renders snackbar with content 1`] = `
   emulateUnlessSupported={true}
   pointerEvents="box-none"
   style={
-    Object {
-      "bottom": 0,
-      "position": "absolute",
-      "width": "100%",
-    }
+    Array [
+      Object {
+        "bottom": 0,
+        "position": "absolute",
+        "width": "100%",
+      },
+      undefined,
+    ]
   }
 >
   <View