Width

A clear reference for elements sizing configurations. This framework provides pre-compiled percentage limits, viewport mappings, grid fractions, and dynamic functional overrides.

---

Static Pre-compiled Percentages & Layout Boundaries (rncStyles)

Static percentage and device metrics configurations allow you to build fluid responsive structures.

Utility Property	Style Definition	Layout Context
rncStyles.w_full	{ width: "100%" }	Fluid Max Width
rncStyles.w_screen	{ width: screenWidth }	Total Device Screen Width
rncStyles.w_90	{ width: "90%" }	90% Bound
rncStyles.w_80	{ width: "80%" }	80% Bound
rncStyles.w_75	{ width: "75%" }	75% Bound
rncStyles.w_70	{ width: "70%" }	70% Bound
rncStyles.w_60	{ width: "60%" }	60% Bound
rncStyles.w_50	{ width: "50%" }	50% Bound
rncStyles.w_40	{ width: "40%" }	40% Bound
rncStyles.w_30	{ width: "30%" }	30% Bound
rncStyles.w_25	{ width: "25%" }	25% Bound
rncStyles.w_20	{ width: "20%" }	20% Bound
rncStyles.w_10	{ width: "10%" }	10% Bound

---

Grid Fractional Layouts (rncStyles)

Use these fractional sizing helpers to quickly design columns, sidebars, and grid elements.

Utility Property	Style Definition	Fractional Equivalent
rncStyles.w_1_2	{ width: "50%" }	1/2 Half Split
rncStyles.w_1_3	{ width: "33.333%" }	1/3 Third Column
rncStyles.w_2_3	{ width: "66.666%" }	2/3 Main Layout Content
rncStyles.w_quarter	{ width: "25%" }	1/4 Quarter Layout

---

Dynamic Sizing Generator (rncStyles)

When a unique explicit percentage or fixed pixel point value is required, invoke the functional style generator.

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

---

Usage Example

WidthPreview.tsx

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

export default function WidthPreview() {
  return (
    <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
      
      {/* Absolute full width block banner */}
      <View style={[rncStyles.w_full]}>
        <Text>Full Layout Banner Box</Text>
      </View>

      {/* Two-column grid layout */}
      <View style={[rncStyles.w_1_2]}>
        <Text>Column A (50%)</Text>
      </View>
      <View style={[rncStyles.w_1_2]}>
        <Text>Column B (50%)</Text>
      </View>

      {/* Custom absolute pixels tracking metric container */}
      <View style={[rncStyles.width(280)]}>
        <Text>Fixed Size Sidebar Component at 280px</Text>
      </View>

    </View>
  );
}