Flexbox Layout

A comprehensive reference for structural layouts using Flexbox. This utility collection features static direction models, alignment controls, dynamic item sizing modifiers, and uniform grid gap parameters.

Flex & Direction Presets (`rncStyles`)

Static pre-compiled layout configurations to manage item proportions and distribution directions.

Utility Property	Native Definition	Practical Context
`rncStyles.flex_none`	`{ flex: 0 }`	Prevents flexible resizing; stays sizes explicitly.
`rncStyles.flex_1`	`{ flex: 1 }`	Expands item to take up all remaining space evenly.
`rncStyles.flex_2`	`{ flex: 2 }`	Expands item to take up double the base flex ratio space.
`rncStyles.flex_3`	`{ flex: 3 }`	Expands item with a sizing distribution ratio of 3.
`rncStyles.flex_4`	`{ flex: 4 }`	Expands item with a sizing distribution ratio of 4.
`rncStyles.flex_5`	`{ flex: 5 }`	Expands item with a sizing distribution ratio of 5.
`rncStyles.flex_row`	`{ flexDirection: "row" }`	Lays out items horizontally from left to right.
`rncStyles.flex_row_reverse`	`{ flexDirection: "row-reverse" }`	Lays out items horizontally from right to left.
`rncStyles.flex_col`	`{ flexDirection: "column" }`	Lays out items vertically from top to bottom.
`rncStyles.flex_col_reverse`	`{ flexDirection: "column-reverse" }`	Lays out items vertically from bottom to top.

Justify Content Utilities (`rncStyles`)

Controls how child components distribute along the primary axis of your current direction container.

Utility Property	Native Property Value	Visual Behavior Definition
`rncStyles.justify_start`	`{ justifyContent: "flex-start" }`	Packs items flush toward the beginning of the line.
`rncStyles.justify_end`	`{ justifyContent: "flex-end" }`	Packs items flush toward the ending of the line.
`rncStyles.justify_center`	`{ justifyContent: "center" }`	Clusters items together inside the middle of the line.
`rncStyles.justify_between`	`{ justifyContent: "space-between" }`	Spreads elements evenly; first item at start, last item at end.
`rncStyles.justify_around`	`{ justifyContent: "space-around" }`	Spreads elements evenly with equal individual cushion spacing around them.
`rncStyles.justify_evenly`	`{ justifyContent: "space-evenly" }`	Spreads elements so all gutter spaces between pairs are uniform.
`rncStyles.justify_stretch`	`{ justifyContent: "stretch" }`	Stretches children to fill container line bounds.
`rncStyles.justify_baseline`	`{ justifyContent: "baseline" }`	Distributes child items according to structural baselines.

Align Items Utilities (`rncStyles`)

Controls how child components align along the cross axis inside their current row or column line.

Utility Property	Native Property Value	Visual Behavior Definition
`rncStyles.items_start`	`{ alignItems: "flex-start" }`	Aligns item frames flush to the cross-axis starting boundary.
`rncStyles.items_end`	`{ alignItems: "flex-end" }`	Aligns item frames flush to the cross-axis ending boundary.
`rncStyles.items_center`	`{ alignItems: "center" }`	Centers child items precisely along the cross-axis line middle.
`rncStyles.items_stretch`	`{ alignItems: "stretch" }`	Stretches layout nodes to completely fill the cross-axis bounds.
`rncStyles.items_baseline`	`{ alignItems: "baseline" }`	Aligns elements along their corresponding typography baselines.

Wrap & Compound Center Shortcuts (`rncStyles`)

Handy layout shortcuts to control wrapping states and fast absolute element centering.

Utility Property	Native Layout Definitions	Description
`rncStyles.flex_center`	`{ justifyContent: "center", alignItems: "center" }`	Fast dual-axis centering shortcut (Row & Cross center).
`rncStyles.flex_wrap`	`{ flexWrap: "wrap" }`	Allows wrapped row items to spill onto multiple lines naturally.
`rncStyles.flex_nowrap`	`{ flexWrap: "nowrap" }`	Forces layout children into a single restricted row or column line.

Uniform Grid Spacing Presets (`rncStyles`)

Static pre-compiled gutters to uniformly separate layout child components.

Utility Property	Style Definition	Gutter Spacing Size
`rncStyles.gap_1`	`{ gap: 1 }`	`1` Pixel Gutter
`rncStyles.gap_2`	`{ gap: 2 }`	`2` Pixels Gutter
`rncStyles.gap_3`	`{ gap: 3 }`	`3` Pixels Gutter
`rncStyles.gap_4`	`{ gap: 4 }`	`4` Pixels Gutter
`rncStyles.gap_5`	`{ gap: 5 }`	`5` Pixels Gutter

Dynamic Flex & Gap Generators (`rncStyles`)

Invoke functional modifiers when layouts require exact sizing overrides or parameter-driven calculations.

Function Interface	Native Property Targets	Fallback Default Value
`rncStyles.flex(value: number)`	`flex`	—
`rncStyles.flex_grow(grow: number)`	`flexGrow`	`1`
`rncStyles.flex_shrink(shrink: number)`	`flexShrink`	`1`
`rncStyles.gap(value: number)`	`gap`	—

Usage Example

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

export default function FlexboxPreview() {
  return (
    /* Full screen column layout with a custom 16px gap */
    <View style={[rncStyles.flex_1, rncStyles.flex_col, rncStyles.gap(16)]}>
      
      {/* Navbar Row layout distributing children to opposite ends */}
      <View style={[rncStyles.flex_row, rncStyles.justify_between, rncStyles.items_center]}>
        <Text>App Branding Logo</Text>
        <Text>Menu Option Button</Text>
      </View>

      {/* Main Feature Content Container that takes up remaining space */}
      <View style={[rncStyles.flex_1, rncStyles.flex_center, { backgroundColor: '#f4f4f5' }]}>
        <Text>Perfectly Dual-Axis Centered Content Block</Text>
      </View>

      {/* Footer Element utilizing custom grow parameters */}
      <View style={[rncStyles.flex_grow(0), rncStyles.flex_row, rncStyles.gap_4]}>
        <View style={[rncStyles.flex_1]}><Text>Action Left</Text></View>
        <View style={[rncStyles.flex_1]}><Text>Action Right</Text></View>
      </View>

    </View>
  );
}

Flex & Direction Presets (rncStyles)​

Justify Content Utilities (rncStyles)​

Align Items Utilities (rncStyles)​

Wrap & Compound Center Shortcuts (rncStyles)​

Uniform Grid Spacing Presets (rncStyles)​

Dynamic Flex & Gap Generators (rncStyles)​

Usage Example​