react-native-drop-shadow-view

A React Native component that renders platform-optimized drop shadows with customizable size presets. Works seamlessly on both iOS and Android with native shadow implementations.

Features

• 🎯 Platform Optimized: Uses native shadow APIs for best performance
• 📏 Size Presets: Pre-configured shadow sizes (xs, sm, md, lg, xl)
• 🎨 Custom Colors: Full shadow color customization support
• ⚙️ Platform Overrides: iOS and Android specific shadow customization
• 🎯 TypeScript: Full TypeScript support included

Installation

npm install react-native-drop-shadow-view

Basic Usage

import { DropShadowView } from 'react-native-drop-shadow-view';
import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <DropShadowView style={styles.card} shadowSize="md">
      <Text style={styles.cardTitle}>Card with Shadow</Text>
      <Text style={styles.cardText}>This card has a medium drop shadow</Text>
    </DropShadowView>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: 'white',
    padding: 16,
    borderRadius: 8,
  },
  cardTitle: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  cardText: {
    color: '#666',
  },
});

Shadow Sizes

The component comes with predefined shadow size presets:

// No shadow
<DropShadowView shadowSize="none">
  <Text>No Shadow</Text>
</DropShadowView>

// Extra small shadow
<DropShadowView shadowSize="xs">
  <Text>Extra Small Shadow</Text>
</DropShadowView>

// Small shadow
<DropShadowView shadowSize="sm">
  <Text>Small Shadow</Text>
</DropShadowView>

// Medium shadow (default)
<DropShadowView shadowSize="md">
  <Text>Medium Shadow</Text>
</DropShadowView>

// Large shadow
<DropShadowView shadowSize="lg">
  <Text>Large Shadow</Text>
</DropShadowView>

// Extra large shadow
<DropShadowView shadowSize="xl">
  <Text>Extra Large Shadow</Text>
</DropShadowView>

Custom Shadow Colors

You can customize shadow colors using the shadowColor prop:

// Blue shadow
<DropShadowView 
  shadowSize="md" 
  shadowColor="#3b82f6"
  style={styles.blueCard}
>
  <Text>Blue Shadow</Text>
</DropShadowView>

// Green shadow
<DropShadowView 
  shadowSize="md" 
  shadowColor="#10b981"
  style={styles.greenCard}
>
  <Text>Green Shadow</Text>
</DropShadowView>

// Custom RGBA shadow
<DropShadowView 
  shadowSize="lg" 
  shadowColor="rgba(59, 130, 246, 0.5)"
  style={styles.card}
>
  <Text>Semi-transparent Blue Shadow</Text>
</DropShadowView>

Platform-Specific Overrides

For fine-grained control, you can override platform-specific shadow properties:

<DropShadowView
  shadowSize="md"
  iosShadowStyle={{
    shadowOffset: { width: 4, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 8,
  }}
  androidShadowStyle={{
    elevation: 10,
  }}
>
  <Text>Custom Platform Shadows</Text>
</DropShadowView>

API Reference

Props

Prop	Type	Default	Description
shadowSize	'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Predefined shadow size preset
shadowColor	string	'black'	Custom shadow color (hex, rgba, etc.)
iosShadowStyle	object	undefined	iOS-specific shadow style overrides
androidShadowStyle	object	undefined	Android-specific shadow style overrides
style	ViewStyle	undefined	Additional styles for the container
children	ReactNode	undefined	Content to render inside the shadow view

iOS Shadow Style Properties

When using iosShadowStyle, you can override these properties:

{
  shadowColor?: string;
  shadowOffset?: { width: number; height: number };
  shadowOpacity?: number;
  shadowRadius?: number;
}

Android Shadow Style Properties

When using androidShadowStyle, you can override these properties:

{
  elevation?: number;
  shadowColor?: string;
}

Platform Notes

iOS

• Supports full shadow customization including color, offset, opacity, and blur radius
• Shadows are rendered using Core Graphics
• All shadow properties are supported

Android

• Uses Material Design elevation system
• Primary shadow control is through elevation property
• shadowColor works in combination with elevation
• Other shadow properties (offset, opacity, radius) are not supported

Examples

Card Layout

<View style={styles.row}>
  <DropShadowView style={[styles.card, styles.flex]} shadowSize="sm">
    <Text style={styles.centeredText}>Left Card</Text>
  </DropShadowView>
  <DropShadowView style={[styles.card, styles.flex]} shadowSize="sm">
    <Text style={styles.centeredText}>Right Card</Text>
  </DropShadowView>
</View>

Complex Card Component

<DropShadowView style={styles.largeCard} shadowSize="md">
  <Text style={styles.cardTitle}>Card Component</Text>
  <Text style={styles.description}>
    This is a card-like component with a drop shadow that automatically
    adapts to the current theme (light/dark).
  </Text>
  <View style={styles.actionRow}>
    <View style={styles.actionButton}>
      <Text style={styles.actionButtonText}>Action 1</Text>
    </View>
    <View style={styles.actionButtonSecondary}>
      <Text style={styles.actionButtonSecondaryText}>Action 2</Text>
    </View>
  </View>
</DropShadowView>

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library