fix: adjust surface wrapper opacity (#3709)

callstack · Mar 6, 2023 · 5c31ef9 · 5c31ef9
1 parent 22989b6
commit 5c31ef9
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
@@ -156,6 +156,11 @@ const Banner = ({
 
   const { scale } = theme.animation;
 
+  const opacity = position.interpolate({
+    inputRange: [0, 0.1, 1],
+    outputRange: [0, 1, 1],
+  });
+
   React.useEffect(() => {
     if (visible) {
       // show
@@ -196,7 +201,7 @@ const Banner = ({
   return (
     <Surface
       {...rest}
-      style={[!theme.isV3 && styles.elevation, style]}
+      style={[!theme.isV3 && styles.elevation, { opacity }, style]}
       theme={theme}
       {...(theme.isV3 && { elevation })}
     >

diff --git a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
@@ -47,6 +47,7 @@ exports[`render visible banner, with custom theme 1`] = `
         Object {
           "backgroundColor": "rgb(247, 243, 249)",
           "flex": undefined,
+          "opacity": 1,
         }
       }
       testID="surface"
@@ -338,6 +339,7 @@ exports[`renders hidden banner, without action buttons and without image 1`] = `
         Object {
           "backgroundColor": "rgb(247, 243, 249)",
           "flex": undefined,
+          "opacity": 0,
         }
       }
       testID="surface"
@@ -486,6 +488,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
         Object {
           "backgroundColor": "rgb(247, 243, 249)",
           "flex": undefined,
+          "opacity": 1,
         }
       }
       testID="surface"
@@ -799,6 +802,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
         Object {
           "backgroundColor": "rgb(247, 243, 249)",
           "flex": undefined,
+          "opacity": 1,
         }
       }
       testID="surface"
@@ -1244,6 +1248,7 @@ exports[`renders visible banner, without action buttons and with image 1`] = `
         Object {
           "backgroundColor": "rgb(247, 243, 249)",
           "flex": undefined,
+          "opacity": 1,
         }
       }
       testID="surface"
@@ -1402,6 +1407,7 @@ exports[`renders visible banner, without action buttons and without image 1`] =
         Object {
           "backgroundColor": "rgb(247, 243, 249)",
           "flex": undefined,
+          "opacity": 1,
         }
       }
       testID="surface"