Z-Index

A static utility reference for managing element stacking order along the z-axis. These presets allow you to safely layered layouts, handle structural intersections, and ensure modals or sticky components sit properly above standard viewport content.

---

Static Preset Stacking Scale (rncStyles)

Pre-compiled z-index rules map across specific layers to maintain organized cross-platform view stacking hierarchies.

Utility Property	Style Definition	Typical UI Layout Context
rncStyles.z_0	{ zIndex: 0 }	Base Layer: Default stacking layer for standard in-flow components.
rncStyles.z_10	{ zIndex: 10 }	Elevated Layer: Sticky sub-headers, floating inline actions, or decorative backgrounds.
rncStyles.z_20	{ zIndex: 20 }	Navigation / Context Layer: Global top headers, side navigation bars, or relative dropdown panels.
rncStyles.z_top	{ zIndex: 9999 }	Heavy Overlay Layer: Full-screen dialog modals, toast notifications, loading indicators, or absolute alert blockers.

---

Technical Considerations

• Position Dependency: In React Native, zIndex relies heavily on component positioning. Stacking conflicts are usually resolved by setting your target component layout to position: 'absolute' or position: 'relative'.
• Platform Behavior: Stacking order matches perfectly on both iOS and Android platforms when elements share the same parent container structure.

---

Usage Example

ZIndexPreview.tsx

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

export default function ZIndexPreview() {
  return (
    <View style={[rncStyles.flex_1]}>
      
      {/* Level 20 Depth - Global Top Navigation Header Bar */}
      <View style={[
        rncStyles.z_20, 
        { position: 'absolute', top: 0, left: 0, right: 0, height: 60, backgroundColor: '#ffffff' }
      ]}>
        <Text>Sticky Site Header (Z-Index 20)</Text>
      </View>

      {/* Level 0 Depth - Base Scrollable Page Main Content Wrapper */}
      <View style={[rncStyles.z_0, { marginTop: 60, padding: 20 }]}>
        <Text>Standard Body Paragraph Text Blocks sit cleanly here beneath the sticky banner layer.</Text>
      </View>

      {/* Level 9999 Depth - Heavy Global System Alert Overlay */}
      <View style={[
        rncStyles.z_top, 
        { position: 'absolute', inset: 0, backgroundColor: 'rgba(0,0,0,0.4)', justifyContent: 'center', alignItems: 'center' }
      ]}>
        <View style={{ backgroundColor: '#ffffff', padding: 24, borderRadius: 12 }}>
          <Text style={{ fontWeight: 'bold' }}>Critical Security Prompt Box (Z-Index 9999)</Text>
        </View>
      </View>

    </View>
  );
}