fix: consistent elevation behavior across platforms (callstack#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,
+ };
+ }
 }