Visibility & Display

A static utility reference for managing element visibility and rendering states within the layout tree. These shortcuts provide clean ways to conditionally show or hide elements without fully unmounting components from the React tree.

---

Static Display Rules

Pre-compiled display structures for controlling element layout visibility states.

Utility Property	Style Definition	Layout Behavior
rncStyles.hidden	{ display: 'none' }	Collapse & Hide: Completely hides the element and removes its structural footprint from the layout calculation layout pass. Sibling elements will shift to fill its empty space.
rncStyles.show	{ display: 'flex' }	Reveal: Explicitly restores the standard layout rules and flexbox structural presence of the element (React Native defaults to flex layout formatting).

---

Technical Considerations

• Conditional Rendering Choice: While using { display: 'none' } is excellent for rapidly toggling tabs, accordion panels, or responsive sections while preserving state within the component instance, for security-cleared views or heavy layouts consider standard React logical short-circuits ({isVisible && <Component />}) to save device runtime resources.
• Layout Shifts: Toggling between hidden and show will trigger an automated layout pass recalculation for surrounding sibling UI structures.

---

Usage Example

DisplayPreview.tsx

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

export default function DisplayPreview() {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <View style={{ padding: 16 }}>
      
      {/* Accordion Action Header Toggle Anchor */}
      <TouchableOpacity 
        onPress={() => setIsExpanded(!isExpanded)}
        style={{ padding: 12, backgroundColor: '#e4e4e7', borderRadius: 8 }}
      >
        <Text style={{ fontWeight: '600' }}>
          {isExpanded ? 'Hide Advanced Details' : 'Show Advanced Details'}
        </Text>
      </TouchableOpacity>

      {/* Collapsible Content Section Panel */}
      <View style={[
        isExpanded ? rncStyles.show : rncStyles.hidden,
        { padding: 16, borderWidth: 1, borderColor: '#e4e4e7', borderTopWidth: 0, borderRadius: 8 }
      ]}>
        <Text>
          This target layout area holds metadata strings and system configurations that stay initialized 
          hidden safely beneath the surface, avoiding layout tree re-mounts on rapid user interaction.
        </Text>
      </View>

    </View>
  );
}