Height

A clear reference for configuration of element heights. This framework provides pre-compiled percentage limits, viewport mappings, auto adjustments, and dynamic functional overrides.

---

Static Pre-compiled Percentages & Layout Boundaries (rncStyles)

Static percentage and device metrics configurations allow you to control vertical layouts fluidly.

Utility Property	Style Definition	Layout Context
rncStyles.h_full	{ height: "100%" }	Fluid Full Height
rncStyles.h_screen	{ height: screenHeight }	Total Device Screen Height
rncStyles.h_auto	{ height: "auto" }	Automatic Content Sizing
rncStyles.h_90	{ height: "90%" }	90% Vertical Boundary
rncStyles.h_80	{ height: "80%" }	80% Vertical Boundary
rncStyles.h_75	{ height: "75%" }	75% Vertical Boundary
rncStyles.h_70	{ height: "70%" }	70% Vertical Boundary
rncStyles.h_60	{ height: "60%" }	60% Vertical Boundary
rncStyles.h_50	{ height: "50%" }	50% Vertical Boundary
rncStyles.h_40	{ height: "40%" }	40% Vertical Boundary
rncStyles.h_30	{ height: "30%" }	30% Vertical Boundary
rncStyles.h_25	{ height: "25%" }	25% Vertical Boundary
rncStyles.h_20	{ height: "20%" }	20% Vertical Boundary
rncStyles.h_10	{ height: "10%" }	10% Vertical Boundary

---

Dynamic Sizing Generator (rncStyles)

When a unique explicit percentage, explicit pixel point, or alternative sizing string is required, invoke the functional style generator.

Function Interface	Native Property Target	Supported Input Formats
rncstyles.height(height)	height	number (Pixels) | string (e.g., "85%", "auto")

---

Usage Example

HeightPreview.tsx

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

export default function HeightPreview() {
  return (
    <View style={[rncStyles.h_screen]}>
      
      {/* Fixed Full Height Viewport Header */}
      <View style={[rncstyles.height(80)]}>
        <Text>Fixed 80px Top Navigation Bar</Text>
      </View>

      {/* Main Content Area filling half the viewport height */}
      <ScrollView style={[rncStyles.h_50]}>
        <Text>Scrollable view restricted to exactly 50% height of the layout container.</Text>
      </ScrollView>

      {/* Footer filling out automatically based on content wrapper */}
      <View style={[rncStyles.h_auto]}>
        <Text>Auto-sizing layout height footer block.</Text>
      </View>

    </View>
  );
}