React-Native Box Shadow in React Native

Syntax

To apply a box shadow in React Native, we can use the elevation prop on a View component.

<View style={{ elevation: 5 }}>
  {/* Content */}
</View>

We can also use the shadow property by passing an object with specific values to the StyleSheets.create() method, and then applying that style object to a view.

const styles = StyleSheet.create({
  shadow: {
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,

    elevation: 5,
  },
});

<View style={styles.shadow}>
  {/* Content */}
</View>

Example

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <Text style={styles.text}>Box with Shadow</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 200,
    height: 200,
    backgroundColor: '#fff',
    borderRadius: 10,
    elevation: 5,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold',
    textAlign: 'center',
    marginTop: 80,
  },
});

export default App;

Output

The above example will create a box with shadow that looks like this:

Explanation

Box shadow is a visual effect that creates the illusion of depth by adding a shadow underneath an element. In React Native, this effect can be applied to any View component.

The elevation prop is the simplest way to apply a box shadow in React Native. It works on both iOS and Android platforms by adjusting the z-coordinate of the component. However, the elevation prop has limited support for customizing the box shadow.

The shadow property allows for more customization by specifying individual shadow properties such as shadowColor, shadowOffset, shadowOpacity, and shadowRadius. However, this property is only available on iOS.

Use

Box shadow can be used to add visual depth and dimension to components in React Native. It can be used to emphasize key UI elements, such as buttons or cards, and to create a more polished and professional look for an app.

Important Points

• The elevation prop is the simplest way to apply a box shadow in React Native, but has limited customization options.
• The shadow property allows for more customization, but is only available on iOS.
• Box shadow can be used to add visual depth and dimension to components in React Native.

Summary

Box shadow is a common UI effect in web and mobile app design, and can be easily applied to components in React Native using the elevation prop or the shadow property. By adding a shadow underneath a component, we can create the illusion of depth and make an app look more polished and professional.