feat: adjust elevation usage in components based on Surface

src/components/Banner.tsx

@@ -7,7 +7,6 @@ import Icon, { IconSource } from './Icon';
 import { withTheme } from '../core/theming';
 import type { $RemoveChildren, Theme } from '../types';
 
-const ELEVATION = 1;
 const DEFAULT_MAX_WIDTH = 960;
 
 type Props = $RemoveChildren<typeof Surface> & {
@@ -42,6 +41,11 @@ type Props = $RemoveChildren<typeof Surface> & {
    * Use this prop to apply custom width for wide layouts.
    */
   contentStyle?: StyleProp<ViewStyle>;
+  /**
+   * @supported Available in v3.x with theme version 3
+   * Changes Banner shadow and background on iOS and Android.
+   */
+  elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
   style?: StyleProp<ViewStyle>;
   ref?: React.RefObject<View>;
   /**
@@ -125,6 +129,7 @@ const Banner = ({
   children,
   actions,
   contentStyle,
+  elevation = 1,
   style,
   theme,
   onShowAnimationFinished = () => {},
@@ -183,14 +188,9 @@ const Banner = ({
   return (
     <Surface
       {...rest}
-      style={[
-        style,
-        !theme.isV3 && {
-          elevation: ELEVATION,
-        },
-      ]}
+      style={[!theme.isV3 && styles.elevation, style]}
       theme={theme}
-      {...(theme.isV3 && { elevation: ELEVATION })}
+      {...(theme.isV3 && { elevation })}
     >
       <View style={[styles.wrapper, contentStyle]}>
         <Animated.View style={{ height }} />
@@ -285,6 +285,9 @@ const styles = StyleSheet.create({
   button: {
     margin: 4,
   },
+  elevation: {
+    elevation: 1,
+  },
 });
 
 export default withTheme(Banner);

src/components/Card/Card.tsx

@@ -33,9 +33,9 @@ type HandlePressType = 'in' | 'out';
 
 type Props = React.ComponentProps<typeof Surface> & {
   /**
-   * Resting elevation of the card which controls the drop shadow.
+   * Changes Card shadow and background on iOS and Android.
    */
-  elevation?: never | number;
+  elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
   /**
    * Function to execute on long press.
    */
@@ -123,7 +123,7 @@ const Card = ({
   const { current: elevationDarkAdaptive } = React.useRef<Animated.Value>(
     new Animated.Value(cardElevation)
   );
-  const { animation, dark, mode, roundness } = theme;
+  const { animation, dark, mode, roundness, isV3 } = theme;
 
   const prevDarkRef = React.useRef<boolean>(dark);
   React.useEffect(() => {
@@ -158,13 +158,13 @@ const Card = ({
     const isPressTypeIn = pressType === 'in';
     if (dark && isAdaptiveMode) {
       Animated.timing(elevationDarkAdaptive, {
-        toValue: isPressTypeIn ? 8 : cardElevation,
+        toValue: isPressTypeIn ? (isV3 ? 2 : 8) : cardElevation,
         duration: animationDuration,
         useNativeDriver: false,
       }).start();
     } else {
       Animated.timing(elevation, {
-        toValue: isPressTypeIn ? 8 : cardElevation,
+        toValue: isPressTypeIn ? (isV3 ? 2 : 8) : cardElevation,
         duration: animationDuration,
         useNativeDriver: false,
       }).start();
@@ -197,13 +197,16 @@ const Card = ({
       style={[
         {
           borderRadius: roundness,
-          elevation: computedElevation as unknown as number,
           borderColor,
         },
+        !isV3 && {
+          elevation: computedElevation as unknown as number,
+        },
         cardMode === 'outlined' ? styles.outlined : {},
         style,
       ]}
       theme={theme}
+      {...(isV3 && { elevation: computedElevation })}
       {...rest}
     >
       <TouchableWithoutFeedback

src/components/Menu/Menu.tsx

@@ -530,6 +530,7 @@ class Menu extends React.Component<Props, State> {
       opacity: opacityAnimation,
       transform: scaleTransforms,
       borderRadius: theme.roundness,
+      ...(!theme.isV3 && { elevation: 8 }),
       ...(scrollableMenuHeight ? { height: scrollableMenuHeight } : {}),
     };
 
@@ -574,6 +575,7 @@ class Menu extends React.Component<Props, State> {
                       contentStyle,
                     ] as StyleProp<ViewStyle>
                   }
+                  {...(theme.isV3 && { elevation: 2 })}
                 >
                   {(scrollableMenuHeight && (
                     <ScrollView>{children}</ScrollView>
@@ -595,7 +597,6 @@ const styles = StyleSheet.create({
   shadowMenuContainer: {
     opacity: 0,
     paddingVertical: 8,
-    elevation: 8,
   },
 });
 

src/components/Searchbar.tsx

@@ -8,6 +8,7 @@ import {
   TextInputProps,
   ViewStyle,
   TextStyle,
+  Animated,
 } from 'react-native';
 
 import color from 'color';
@@ -47,12 +48,16 @@ type Props = React.ComponentPropsWithRef<typeof TextInput> & {
    * Callback to execute if we want the left icon to act as button.
    */
   onIconPress?: () => void;
+  /**
+   * @supported Available in v3.x with theme version 3
+   * Changes Searchbar shadow and background on iOS and Android.
+   */
+  elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
   /**
    * Set style of the TextInput component inside the searchbar
    */
   inputStyle?: StyleProp<TextStyle>;
   style?: StyleProp<ViewStyle>;
-
   /**
    * @optional
    */
@@ -113,6 +118,7 @@ const Searchbar = React.forwardRef<TextInputHandles, Props>(
       onIconPress,
       placeholder,
       searchAccessibilityLabel = 'search',
+      elevation = 1,
       style,
       theme,
       value,
@@ -153,8 +159,8 @@ const Searchbar = React.forwardRef<TextInputHandles, Props>(
       rest.onChangeText?.('');
     };
 
-    const { colors, roundness, dark, fonts } = theme;
-    const textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text;
+    const { colors, roundness, dark, fonts, isV3 } = theme;
+    const textColor = isV3 ? theme.colors.onSurface : theme.colors.text;
     const font = fonts.regular;
     const iconColor =
       customIconColor ||
@@ -164,10 +170,12 @@ const Searchbar = React.forwardRef<TextInputHandles, Props>(
     return (
       <Surface
         style={[
-          { borderRadius: roundness, elevation: 4 },
+          { borderRadius: roundness },
+          !isV3 && styles.elevation,
           styles.container,
           style,
         ]}
+        {...(theme.isV3 && { elevation })}
       >
         <IconButton
           // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
@@ -257,6 +265,9 @@ const styles = StyleSheet.create({
     textAlign: I18nManager.isRTL ? 'right' : 'left',
     minWidth: 0,
   },
+  elevation: {
+    elevation: 4,
+  },
 });
 
 export default withTheme(Searchbar);

src/components/Snackbar.tsx

@@ -43,6 +43,11 @@ export type SnackbarProps = React.ComponentProps<typeof Surface> & {
   /**
    * Style for the wrapper of the snackbar
    */
+  /**
+   * @supported Available in v3.x with theme version 3
+   * Changes Snackbar shadow and background on iOS and Android.
+   */
+  elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
   wrapperStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<ViewStyle>;
   ref?: React.RefObject<View>;
@@ -110,6 +115,7 @@ const Snackbar = ({
   duration = DURATION_MEDIUM,
   onDismiss,
   children,
+  elevation = 2,
   wrapperStyle,
   style,
   theme,
@@ -168,7 +174,7 @@ const Snackbar = ({
     }
   }, [visible, duration, opacity, scale, onDismiss]);
 
-  const { colors, roundness } = theme;
+  const { colors, roundness, isV3 } = theme;
 
   if (hidden) return null;
 
@@ -189,7 +195,7 @@ const Snackbar = ({
         accessibilityLiveRegion="polite"
         style={
           [
-            !theme.isV3 && { elevation: 6 },
+            !isV3 && styles.elevation,
             styles.container,
             {
               borderRadius: roundness,
@@ -209,7 +215,7 @@ const Snackbar = ({
             style,
           ] as StyleProp<ViewStyle>
         }
-        {...(theme.isV3 && { elevation: 2 })}
+        {...(isV3 && { elevation })}
         {...rest}
       >
         <Text
@@ -278,6 +284,9 @@ const styles = StyleSheet.create({
     marginHorizontal: 8,
     marginVertical: 6,
   },
+  elevation: {
+    elevation: 6,
+  },
 });
 
 export default withTheme(Snackbar);

src/components/Surface.tsx

@@ -160,12 +160,14 @@ const Surface = ({
       <Animated.View
         style={[
           {
-            elevation: getElevationAndroid(),
             backgroundColor,
             transform,
           },
           outerLayerStyles,
           sharedStyle,
+          {
+            elevation: getElevationAndroid(),
+          },
         ]}
       >
         {children}
@@ -194,7 +196,11 @@ const Surface = ({
     const getStyleForAnimatedShadowLayer = (layer: 0 | 1) => {
       return {
         shadowColor,
-        shadowOpacity: iOSShadowOutputRanges[layer].shadowOpacity,
+        shadowOpacity: elevation.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, iOSShadowOutputRanges[layer].shadowOpacity],
+          extrapolate: 'clamp',
+        }),
         shadowOffset: {
           width: 0,
           height: elevation.interpolate({
@@ -223,7 +229,7 @@ const Surface = ({
   const getStyleForShadowLayer = (layer: 0 | 1) => {
     return {
       shadowColor,
-      shadowOpacity: iOSShadowOutputRanges[layer].shadowOpacity,
+      shadowOpacity: elevation ? iOSShadowOutputRanges[layer].shadowOpacity : 0,
       shadowOffset: {
         width: 0,
         height: iOSShadowOutputRanges[layer].height[elevation],