Margin

A comprehensive reference for layout margin utilities. This framework provides static preset scales (1 to 5), layout auto centering utilities, and dynamic functional generators for precise spacing control.

---

Static Preset Scale & Auto Reference

Static utility presets use a uniform mapping increment multiplier of 10. The _auto suffix handles flexible spacing configurations native to the layout tree.

Prefix	Style Variant	_1	_2	_3	_4	_5	_auto
m_	All-Around Margin	10	20	30	40	50	"auto"
my_	Vertical Margin	10	20	30	40	50	"auto"
mx_	Horizontal Margin	10	20	30	40	50	"auto"
mt_	Top Margin	10	20	30	40	50	"auto"
mb_	Bottom Margin	10	20	30	40	50	"auto"
ms_	Start (Left) Margin	10	20	30	40	50	"auto"
me_	End (Right) Margin	10	20	30	40	50	"auto"

---

Dynamic Rule Generators (rncStyles)

When preset standard values do not fit your custom interface requirements, execute dynamic generators to inject custom spacing tokens directly.

Function Interface	Native Parameter Target	Returns
rncStyles.m(value: number)	margin	{ margin: value }
rncStyles.my(value: number)	marginVertical	{ marginVertical: value }
rncStyles.mx(value: number)	marginHorizontal	{ marginHorizontal: value }
rncStyles.mt(value: number)	marginTop	{ marginTop: value }
rncStyles.mb(value: number)	marginBottom	{ marginBottom: value }
rncStyles.ms(value: number)	marginLeft	{ marginLeft: value }
rncStyles.me(value: number)	marginEnd	{ marginEnd: value }

---

Usage Example

MarginPreview.tsx

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

export default function MarginPreview() {
  return (
    <View>
      
      {/* Container with Global Outer Margin */}
      <View style={[rncStyles.m_3]}>
        <Text>All-around outer margin spacing of 30</Text>
      </View>

      {/* Card Block Centered Horizontally Using Auto */}
      <View style={[rncStyles.mx_auto, rncStyles.my_2]}>
        <Text>Centered via horizontal auto, with 20 vertical spacing</Text>
      </View>

      {/* Element Utilizing Direct Generator Interpolation */}
      <View style={[rncStyles.mt(15),rncStyles.mb(45)]}>
        <Text>Explicit Top Margin of 15 and Bottom Margin of 45</Text>
      </View>

    </View>
  );
}