How to add Shadows to Image in React Native

Shadows are a powerful design element and can add depth and character to your app’s user interface. In this tutorial, let’s learn how to add shadows to an image in react native.

It’s easy to add shadows to images in react native using a few simple style properties. But, instead of applying the properties directly, these should be applied to a View component and the View must be the parent of the Image.

The shadow style properties elevation and shadowColor are applicable for Android whereas shadowColor, shadowOffset, and shadowOpacity are applicable for iOS devices.

See the code snippet given below.

<View
        style={
          Platform.OS === 'android'
            ? {elevation: 10, shadowColor: 'red'}
            : {
                shadowColor: 'red',
                shadowOffset: {width: 0, height: 2},
                shadowOpacity: 0.5,
              }
        }>
        <Image style={{height: 250, width: 250}} source={cat} />
      </View>

Here I am showing an image with red color shadow.

You will get the following output on the Android app.

Following is the output on iOS.

Following is the complete code for reference.

import {StyleSheet, Image, View, Platform} from 'react-native';
import React from 'react';
import cat from './cat.jpg';

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.imageShadow}>
        <Image style={styles.image} source={cat} />
      </View>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  image: {
    height: 250,
    width: 250,
  },
  imageShadow:
    Platform.OS === 'android'
      ? {elevation: 10, shadowColor: 'red'}
      : {
          shadowColor: 'red',
          shadowOffset: {width: 0, height: 2},
          shadowOpacity: 0.5,
        },
});

That’s how you add shadows to images in react native.