fix: consistent elevation behavior across platforms (#1176)

src/components/Surface.tsx

@@ -56,14 +56,14 @@ class Surface extends React.Component<Props> {
   render() {
     const { style, theme, ...rest } = this.props;
     const flattenedStyles = StyleSheet.flatten(style) || {};
-    const { elevation }: any = flattenedStyles;
+    const { elevation }: ViewStyle = flattenedStyles;
 
     return (
       <Animated.View
         {...rest}
         style={[
           { backgroundColor: theme.colors.surface },
-          elevation && shadow(elevation),
+          shadow(elevation),
           style,
         ]}
       />

src/index.tsx

@@ -10,6 +10,7 @@ export { withTheme, ThemeProvider } from './core/theming';
 export { default as Provider } from './core/Provider';
 export { default as DefaultTheme } from './styles/DefaultTheme';
 export { default as DarkTheme } from './styles/DarkTheme';
+export { default as shadow } from './styles/shadow';
 
 import * as Avatar from './components/Avatar/Avatar';
 import * as List from './components/List/List';

src/styles/shadow.tsx

@@ -1,20 +1,34 @@
 import * as Colors from './colors';
 import { Animated } from 'react-native';
 
-export default function shadow(elevation: number | Animated.Value) {
-  let height, radius;
+const SHADOW_COLOR = Colors.black;
+const SHADOW_OPACITY = 0.24;
 
+export default function shadow(elevation: number | Animated.Value = 0) {
   if (elevation instanceof Animated.Value) {
-    height = elevation.interpolate({
-      inputRange: [0, 1, 2, 3, 8, 24],
-      outputRange: [0, 0.5, 0.75, 2, 7, 23],
-    });
+    const inputRange = [0, 1, 2, 3, 8, 24];
 
-    radius = elevation.interpolate({
-      inputRange: [0, 1, 2, 3, 8, 24],
-      outputRange: [0, 0.75, 1.5, 3, 8, 24],
-    });
+    return {
+      shadowColor: SHADOW_COLOR,
+      shadowOffset: {
+        width: new Animated.Value(0),
+        height: elevation.interpolate({
+          inputRange,
+          outputRange: [0, 0.5, 0.75, 2, 7, 23],
+        }),
+      },
+      shadowOpacity: new Animated.Value(SHADOW_OPACITY),
+      shadowRadius: elevation.interpolate({
+        inputRange,
+        outputRange: [0, 0.75, 1.5, 3, 8, 24],
+      }),
+    };
   } else {
+    if (elevation === 0) {
+      return {};
+    }
+
+    let height, radius;
     switch (elevation) {
       case 1:
         height = 0.5;
@@ -28,15 +42,15 @@ export default function shadow(elevation: number | Animated.Value) {
         height = elevation - 1;
         radius = elevation;
     }
-  }
 
-  return {
-    shadowColor: Colors.black,
-    shadowOffset: {
-      width: 0,
-      height,
-    },
-    shadowOpacity: 0.24,
-    shadowRadius: radius,
-  };
+    return {
+      shadowColor: SHADOW_COLOR,
+      shadowOffset: {
+        width: 0,
+        height,
+      },
+      shadowOpacity: SHADOW_OPACITY,
+      shadowRadius: radius,
+    };
+  }
 }