Padding

A comprehensive reference for layout padding utilities. This framework provides both static preset scales (1 to 5) and dynamic functional generators for absolute custom control.

---

Static Preset Scale Reference

Static utility presets use a uniform mapping increment multiplier of 10.

Prefix	Style Variant	_1	_2	_3	_4	_5
p_	All-Around Padding	10	20	30	40	50
py_	Vertical Padding	10	20	30	40	50
px_	Horizontal Padding	10	20	30	40	50
pt_	Top Padding	10	20	30	40	50
pb_	Bottom Padding	10	20	30	40	50
ps_	Start (Left) Padding	10	20	30	40	50
pe_	End (Right) Padding	10	20	30	40	50

---

Dynamic Rule Generators (rncStyles)

When preset values do not fit your pixel-perfect requirement, execute dynamic generators to inject custom numbers directly into the layout tree.

Function Interface	Native Parameter Target	Returns
rncStyles.p(value: number)	padding	{ padding: value }
rncStyles.py(value: number)	paddingVertical	{ paddingVertical: value }
rncStyles.px(value: number)	paddingHorizontal	{ paddingHorizontal: value }
rncStyles.pt(value: number)	paddingTop	{ paddingTop: value }
rncStyles.pb(value: number)	paddingBottom	{ paddingBottom: value }
rncStyles.ps(value: number)	paddingLeft	{ paddingLeft: value }
rncStyles.pe(value: number)	paddingEnd	{ paddingEnd: value }

---

Usage Example

PaddingPreview.tsx

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

export default function PaddingPreview() {
  return (
    <View>
      
      
      <View  style="{[rncStyles.p_4,rncStyles.pt_2]}">
        <Text>All-around padding of 40, overwritten at top with 20</Text>
      </View>

      
      <View  style="{[rncStyles.px_3,rncStyles.py_1]}">
        <Text>Horizontal padding of 30 and Vertical padding of 10</Text>
      </View>

      
      <View  style="{[rncStyles.p(12),rncStyles.pb(64)]}">
        <Text>Explicit custom padding of 12 and bottom padding of 64</Text>
      </View>

    </View>
  );
}