How can I get shadows to work in my React Native Android app? It works on iOS!

Chances are you've found Shadow Props in the React Native documentation. Chances are also that when trying to use them you've run into one little problem—they don't work on Android.

We're not going to talk about why the shadow props don't work on Android. Instead, we're going to talk about the built-in option that we do have.

Android supports shadows through the elevation style property. It doesn't give us many options though, as it's simply a number.

const styles = StyleSheet.create({
  shadow: {
    // Sweet! Android shadow!
    elevation: 5
  }
});

If we accept this limitation and don't look for another alternative then we need to make sure iOS also looks the same. Because, of course, iOS doesn't support the elevation property.

The Solution

We're going generate styles that look almost identical on iOS and Android.

Here's what the end result looks like.

The function elevationShadowStyle() turns the elevation number into a set of styles that will end up like in the previous screenshots.

function elevationShadowStyle(elevation) {
  return {
    elevation,
    shadowColor: 'black',
    shadowOffset: { width: 0, height: 0.5 * elevation },
    shadowOpacity: 0.3,
    shadowRadius: 0.8 * elevation
  };
}

const styles = StyleSheet.create({
  shadow: {
    ...elevationShadowStyle(5),
    backgroundColor: 'white' // It'll look weird without a background color!
  }
});

If you're not 100% happy with the results, go ahead and tweak the numbers in the function.

Runnable Example

Below is a runnable example on Snack.