Layout Positioning

A clear reference for managing component positioning contexts within the layout tree. These utilities define how an element is positioned relative to its normal flow or its parent boundaries.

---

Static Positioning Rules

Pre-compiled positioning style shortcuts for structuring complex user interfaces.

Utility Property	Style Definition	Typical UI Layout Context
rncStyles.positionRelative	{ position: "relative" }	Default Flow Binding: Establishes a local bounding context for nested absolute children without altering its standard layout layout path.
rncStyles.positionAbsolute	{ position: "absolute" }	Floating Bounds Escape: Removes the element from the standard layout structure, positioning it relative to its closest positioned (relative or absolute) ancestor container.

---

Technical Considerations

• Layout Parent Binding: An element with positionAbsolute will automatically search up the component tree to align its layout metrics (top, bottom, left, right) based on the bounds of the nearest ancestor component wrapped in a positionRelative style.
• Flexbox Interaction: Absolute layout children will float freely over standard flexbox sibling modules without changing their distribution coordinates or taking up spacing blocks in the main layout stream.

---

Usage Example

PositionPreview.tsx

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

export default function PositionPreview() {
  return (
    <View style={{ gap: 24, padding: 16 }}>
      
      {/* 1. Parent Bounding Context Container Container */}
      <View style={[rncStyles.positionRelative, { width: '100%', height: 160, backgroundColor: '#f4f4f5', borderRadius: 12, padding: 16 }]}>
        <Text style={{ fontWeight: 'bold' }}>Main Card Frame</Text>
        <Text>Standard document flow elements render sequentially here.</Text>

        {/* Floating Absolute Action Badge Context */}
        <View style={[
          rncStyles.positionAbsolute, 
          { top: 12, right: 12, backgroundColor: '#10b981', paddingHorizontal: 8, paddingVertical: 4, borderRadius: 20 }
        ]}>
          <Text style={{ color: '#ffffff', fontSize: 12, fontWeight: '600' }}>Active</Text>
        </View>
      </View>

      {/* 2. Full-Screen Backdrop Overlay Block */}
      {/* Uncomment to layer a absolute shield across parent dimensions:
        <View style={[rncStyles.positionAbsolute, { inset: 0, backgroundColor: 'rgba(0,0,0,0.3)' }]} />
      */}

    </View>
  );
}