Shadow & Elevation

A static utility reference for cross-platform depth styles. These presets combine iOS shadow properties (shadowColor, shadowOffset, shadowOpacity, shadowRadius) and Android property primitives (elevation) to deliver consistent visual elevation steps.

---

Static Preset Depth Scale (rncStyles)

Pre-compiled shadows scale gradually up to a high-contrast accent depth.

Utility Property	iOS Shadow Properties	Android Elevation	Typical UI Context
rncStyles.shadow_1	H: 2, Opacity: 0.23, Radius: 2.62	elevation: 4	Low depth components (e.g., subtle cards, standard buttons)
rncStyles.shadow_2	H: 4, Opacity: 0.30, Radius: 4.65	elevation: 8	Interactive widgets, hover states, navigation anchors
rncStyles.shadow_3	H: 6, Opacity: 0.37, Radius: 7.49	elevation: 12	Dropdowns, absolute popovers, floating small nodes
rncStyles.shadow_4	H: 8, Opacity: 0.44, Radius: 10.32	elevation: 16	Contextual menus, card slide-outs, secondary sheets
rncStyles.shadow_5	H: 10, Opacity: 0.51, Radius: 13.16	elevation: 20	Action dialog wrappers, multi-layer bottom modal sheets
rncStyles.shadow_6	H: 12, Opacity: 0.58, Radius: 16.00	elevation: 24	Primary global alert dialog blocks and heavy overlays

---

Technical Considerations

• Color Baseline: All preset options utilize an alpha-channeled dark foundation mapping (rgba(0,0,0,0.5)).
• Layout Notice: Ensure parent component clipping elements (overflow: 'hidden') are disabled on layers where visible outer shadows need to render properly on iOS hardware.

---

Usage Example

ShadowPreview.tsx

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

export default function ShadowPreview() {
  return (
    <View style={{ gap: 24, padding: 20 }}>
      
      {/* Level 1 Depth - Standard UI Card Element */}
      <View style={[rncStyles.shadow_1, { backgroundColor: '#ffffff', padding: 16, borderRadius: 8 }]}>
        <Text>Subtle Elevation Card (Shadow 1)</Text>
      </View>

      {/* Level 3 Depth - Floating Context Menu Trigger */}
      <View style={[rncStyles.shadow_3, { backgroundColor: '#ffffff', padding: 16, borderRadius: 12 }]}>
        <Text>Floating Container Overlay (Shadow 3)</Text>
      </View>

      {/* Level 6 Depth - High Priority Alert/Modal Overlay */}
      <View style={[rncStyles.shadow_6, { backgroundColor: '#ffffff', padding: 20, borderRadius: 16 }]}>
        <Text style={{ fontWeight: 'bold' }}>Critical Alert Modal Box (Shadow 6)</Text>
      </View>

    </View>
  );
}