diff --git a/src/components/Surface.js b/src/components/Surface.js
index a83eed3..7cb7fcf 100644
--- a/src/components/Surface.js
+++ b/src/components/Surface.js
@@ -65,7 +65,7 @@ class Surface extends React.Component<Props> {
         {...rest}
         style={[
           { backgroundColor: theme.colors.surface },
-          elevation && shadow(elevation),
+          shadow(elevation),
           style,
         ]}
       />
diff --git a/src/components/__tests__/__snapshots__/Banner.test.js.snap b/src/components/__tests__/__snapshots__/Banner.test.js.snap
index 50efb25..f125574 100644
--- a/src/components/__tests__/__snapshots__/Banner.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Banner.test.js.snap
@@ -195,6 +195,13 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
               "elevation": 0,
               "margin": 4,
               "minWidth": "auto",
+              "shadowColor": "#000000",
+              "shadowOffset": Object {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0.24,
+              "shadowRadius": 0,
             }
           }
         >
@@ -357,6 +364,13 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
               "elevation": 0,
               "margin": 4,
               "minWidth": "auto",
+              "shadowColor": "#000000",
+              "shadowOffset": Object {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0.24,
+              "shadowRadius": 0,
             }
           }
         >
@@ -440,6 +454,13 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
               "elevation": 0,
               "margin": 4,
               "minWidth": "auto",
+              "shadowColor": "#000000",
+              "shadowOffset": Object {
+                "height": 0,
+                "width": 0,
+              },
+              "shadowOpacity": 0.24,
+              "shadowRadius": 0,
             }
           }
         >
diff --git a/src/components/__tests__/__snapshots__/Button.test.js.snap b/src/components/__tests__/__snapshots__/Button.test.js.snap
index 7072a38..c695c07 100644
--- a/src/components/__tests__/__snapshots__/Button.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Button.test.js.snap
@@ -11,6 +11,13 @@ exports[`renders button with color 1`] = `
       "borderWidth": 0,
       "elevation": 0,
       "minWidth": 64,
+      "shadowColor": "#000000",
+      "shadowOffset": Object {
+        "height": 0,
+        "width": 0,
+      },
+      "shadowOpacity": 0.24,
+      "shadowRadius": 0,
     }
   }
 >
@@ -94,6 +101,13 @@ exports[`renders button with icon 1`] = `
       "borderWidth": 0,
       "elevation": 0,
       "minWidth": 64,
+      "shadowColor": "#000000",
+      "shadowOffset": Object {
+        "height": 0,
+        "width": 0,
+      },
+      "shadowOpacity": 0.24,
+      "shadowRadius": 0,
     }
   }
 >
@@ -311,6 +325,13 @@ exports[`renders disabled button 1`] = `
       "borderWidth": 0,
       "elevation": 0,
       "minWidth": 64,
+      "shadowColor": "#000000",
+      "shadowOffset": Object {
+        "height": 0,
+        "width": 0,
+      },
+      "shadowOpacity": 0.24,
+      "shadowRadius": 0,
     }
   }
 >
@@ -399,6 +420,13 @@ exports[`renders loading button 1`] = `
       "borderWidth": 0,
       "elevation": 0,
       "minWidth": 64,
+      "shadowColor": "#000000",
+      "shadowOffset": Object {
+        "height": 0,
+        "width": 0,
+      },
+      "shadowOpacity": 0.24,
+      "shadowRadius": 0,
     }
   }
 >
@@ -495,6 +523,13 @@ exports[`renders outlined button with mode 1`] = `
       "borderWidth": 0.5,
       "elevation": 0,
       "minWidth": 64,
+      "shadowColor": "#000000",
+      "shadowOffset": Object {
+        "height": 0,
+        "width": 0,
+      },
+      "shadowOpacity": 0.24,
+      "shadowRadius": 0,
     }
   }
 >
@@ -578,6 +613,13 @@ exports[`renders text button by default 1`] = `
       "borderWidth": 0,
       "elevation": 0,
       "minWidth": 64,
+      "shadowColor": "#000000",
+      "shadowOffset": Object {
+        "height": 0,
+        "width": 0,
+      },
+      "shadowOpacity": 0.24,
+      "shadowRadius": 0,
     }
   }
 >
@@ -661,6 +703,13 @@ exports[`renders text button with mode 1`] = `
       "borderWidth": 0,
       "elevation": 0,
       "minWidth": 64,
+      "shadowColor": "#000000",
+      "shadowOffset": Object {
+        "height": 0,
+        "width": 0,
+      },
+      "shadowOpacity": 0.24,
+      "shadowRadius": 0,
     }
   }
 >
diff --git a/src/components/__tests__/__snapshots__/Chip.test.js.snap b/src/components/__tests__/__snapshots__/Chip.test.js.snap
index 27977bd..fe1003b 100644
--- a/src/components/__tests__/__snapshots__/Chip.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Chip.test.js.snap
@@ -10,6 +10,13 @@ exports[`renders chip with close button 1`] = `
       "borderStyle": "solid",
       "borderWidth": 0.5,
       "elevation": 0,
+      "shadowColor": "#000000",
+      "shadowOffset": Object {
+        "height": 0,
+        "width": 0,
+      },
+      "shadowOpacity": 0.24,
+      "shadowRadius": 0,
     }
   }
 >
@@ -184,6 +191,13 @@ exports[`renders chip with icon 1`] = `
       "borderStyle": "solid",
       "borderWidth": 0.5,
       "elevation": 0,
+      "shadowColor": "#000000",
+      "shadowOffset": Object {
+        "height": 0,
+        "width": 0,
+      },
+      "shadowOpacity": 0.24,
+      "shadowRadius": 0,
     }
   }
 >
@@ -307,6 +321,13 @@ exports[`renders chip with onPress 1`] = `
       "borderStyle": "solid",
       "borderWidth": 0.5,
       "elevation": 0,
+      "shadowColor": "#000000",
+      "shadowOffset": Object {
+        "height": 0,
+        "width": 0,
+      },
+      "shadowOpacity": 0.24,
+      "shadowRadius": 0,
     }
   }
 >
@@ -385,6 +406,13 @@ exports[`renders outlined disabled chip 1`] = `
       "borderStyle": "solid",
       "borderWidth": 0.5,
       "elevation": 0,
+      "shadowColor": "#000000",
+      "shadowOffset": Object {
+        "height": 0,
+        "width": 0,
+      },
+      "shadowOpacity": 0.24,
+      "shadowRadius": 0,
     }
   }
 >
@@ -467,6 +495,13 @@ exports[`renders selected chip 1`] = `
       "borderStyle": "solid",
       "borderWidth": 0.5,
       "elevation": 0,
+      "shadowColor": "#000000",
+      "shadowOffset": Object {
+        "height": 0,
+        "width": 0,
+      },
+      "shadowOpacity": 0.24,
+      "shadowRadius": 0,
     }
   }
 >
diff --git a/src/components/__tests__/__snapshots__/ListItem.test.js.snap b/src/components/__tests__/__snapshots__/ListItem.test.js.snap
index 6314b67..e021ecb 100644
--- a/src/components/__tests__/__snapshots__/ListItem.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ListItem.test.js.snap
@@ -89,6 +89,13 @@ exports[`renders list item with custom description 1`] = `
                 "borderStyle": "solid",
                 "borderWidth": 0.5,
                 "elevation": 0,
+                "shadowColor": "#000000",
+                "shadowOffset": Object {
+                  "height": 0,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.24,
+                "shadowRadius": 0,
               }
             }
           >
diff --git a/src/components/__tests__/__snapshots__/Menu.test.js.snap b/src/components/__tests__/__snapshots__/Menu.test.js.snap
index 0e298c7..57226cb 100644
--- a/src/components/__tests__/__snapshots__/Menu.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Menu.test.js.snap
@@ -14,6 +14,13 @@ exports[`renders not visible menu 1`] = `
         "borderWidth": 0.5,
         "elevation": 0,
         "minWidth": 64,
+        "shadowColor": "#000000",
+        "shadowOffset": Object {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0.24,
+        "shadowRadius": 0,
       }
     }
   >
@@ -101,6 +108,13 @@ exports[`renders visible menu 1`] = `
         "borderWidth": 0.5,
         "elevation": 0,
         "minWidth": 64,
+        "shadowColor": "#000000",
+        "shadowOffset": Object {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0.24,
+        "shadowRadius": 0,
       }
     }
   >
diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
index 000431e..08ceece 100644
--- a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
@@ -150,6 +150,13 @@ exports[`renders snackbar with action button 1`] = `
           "marginHorizontal": 8,
           "marginVertical": 6,
           "minWidth": "auto",
+          "shadowColor": "#000000",
+          "shadowOffset": Object {
+            "height": 0,
+            "width": 0,
+          },
+          "shadowOpacity": 0.24,
+          "shadowRadius": 0,
         }
       }
     >
diff --git a/src/styles/shadow.js b/src/styles/shadow.js
index ef0c316..d7d1157 100644
--- a/src/styles/shadow.js
+++ b/src/styles/shadow.js
@@ -1,44 +1,44 @@
 /* @flow */
 
-import * as Colors from './colors';
 import { Animated } from 'react-native';
+import * as Colors from '../styles/colors';
 
-export default function shadow(elevation: number | Animated.Value) {
-  let height, radius;
+type Shadow = {
+  shadowColor: string,
+  shadowOffset: {
+    width: Animated.Value,
+    height: Animated.Interpolation,
+  },
+  shadowOpacity: Animated.Value,
+  shadowRadius: Animated.Interpolation,
+};
 
-  if (elevation instanceof Animated.Value) {
-    height = elevation.interpolate({
-      inputRange: [0, 1, 2, 3, 8, 24],
-      outputRange: [0, 0.5, 0.75, 2, 7, 23],
-    });
+export default function shadow(elevation: ?number | Animated.Value): Shadow {
+  const animatedElevation: Animated.Value =
+    elevation instanceof Animated.Value
+      ? elevation
+      : new Animated.Value(elevation || 0);
+  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],
-    });
-  } else {
-    switch (elevation) {
-      case 1:
-        height = 0.5;
-        radius = 0.75;
-        break;
-      case 2:
-        height = 0.75;
-        radius = 1.5;
-        break;
-      default:
-        height = elevation - 1;
-        radius = elevation;
-    }
-  }
+  // Important: we need to return Animated values to ensure they are properly used in the Animated.View
+  const shadowOpacity = new Animated.Value(0.24);
+  const width = new Animated.Value(0);
+  const height = animatedElevation.interpolate({
+    inputRange,
+    outputRange: [0, 0.5, 0.75, 2, 7, 23],
+  });
+  const shadowRadius = animatedElevation.interpolate({
+    inputRange,
+    outputRange: [0, 0.75, 1.5, 3, 8, 24],
+  });
 
   return {
     shadowColor: Colors.black,
     shadowOffset: {
-      width: 0,
+      width,
       height,
     },
-    shadowOpacity: 0.24,
-    shadowRadius: radius,
+    shadowOpacity,
+    shadowRadius,
   };
 }