Creating a UI with Box Shadow in React Native

Home Q&A Creating a UI with Box Shadow in React Native

Unlike traditional CSS, React Native doesn’t support the box-shadow property directly. However, you can achieve shadow effects using platform-specific approaches. Here’s how:

Solution 1: Using Native Shadow Properties (iOS & Android)

React Native provides built-in shadow properties for iOS and elevation for Android.

import { View, StyleSheet } from "react-native";
const ShadowBox = () => {
  return <View style={styles.box} />;
};
const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: "white",
    borderRadius: 10,
    // iOS Shadow Properties
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 5,
    // Android Shadow Property
    elevation: 6,
  },
});

Solution 2: Using react-native-shadow-2 (Third-Party Library)

For enhanced cross-platform shadows, consider using react-native-shadow-2.

import { Shadow } from 'react-native-shadow-2';
import { View } from 'react-native';

const ShadowBox = () => (
  <Shadow distance={10} startColor={'rgba(0, 0, 0, 0.2)'}>
    <View style={{ width: 100, height: 100, backgroundColor: 'white' }} />
  </Shadow>
);

Solution 3: Creating Shadows with react-native-svg

For custom and precise shadow effects, react-native-svg provides an alternative approach.

import Svg, { Defs, Rect, Filter, FeDropShadow } from 'react-native-svg';

const SvgShadowBox = () => (
  <Svg height="120" width="120">
    <Defs>
      <Filter id="shadow">
        <FeDropShadow dx="2" dy="4" stdDeviation="3" floodColor="black" />
      </Filter>
    </Defs>
    <Rect x="10" y="10" width="100" height="100" fill="white" filter="url(#shadow)" />
  </Svg>
);