Border

A comprehensive reference for layout border configurations. This framework includes static styling shortcuts, directional layout rules, custom width functions, and reactive dark-mode color engines.

---

Static Pre-compiled Layout Rules (rncStyles)

Static utility presets configure custom line widths across layout sides using high-performance pre-compiled dictionaries.

Side / Context	Thickness: 1px	Thickness: 2px	Target Style Definition
Global (All Sides)	rncStyles.border_1	rncStyles.border_2	{ borderWidth }
Top Border (_t)	rncStyles.border_t_1	rncStyles.border_t_2	{ borderTopWidth }
Bottom Border (_b)	rncStyles.border_b_1	rncStyles.border_b_2	{ borderBottomWidth }
Start / Left Border (_s)	rncStyles.border_s_1	rncStyles.border_s_2	{ borderLeftWidth }
End / Right Border (_e)	rncStyles.border_e_1	rncStyles.border_e_2	{ borderRightWidth }
Horizontal Axis (_x)	rncStyles.border_x_1	rncStyles.border_x_2	{ borderLeftWidth, borderRightWidth }
Vertical Axis (_y)	rncStyles.border_y_1	rncStyles.border_y_2	{ borderTopWidth, borderBottomWidth }

---

Dynamic Functional Generators (rncStyles)

When standard static sizes or hardcoded palettes do not match your UI design criteria, execute layout and color token generators.

1. Border Width Generators

All size functions default cleanly to a fallback width of 1 pixel if called without explicitly providing a number parameter value.

Function Interface	Native Property Targets	Default Value
rncStyles.border(width)	borderWidth	1
rncStyles.border_t(width)	borderTopWidth	1
rncStyles.border_b(width)	borderBottomWidth	1
rncStyles.border_s(width)	borderLeftWidth	1
rncStyles.border_e(width)	borderRightWidth	1
rncStyles.border_x(width)	borderLeftWidth, borderRightWidth	1
rncStyles.border_y(width)	borderTopWidth, borderBottomWidth	1

2. Color & Dark Mode Token Lookups

Inject color system tokens into layouts. The d_ prefix automatically handles contextual dark-theme runtime conditions without manual status listeners.

Light / Standard Theme Mode	Responsive Dark Theme Mode (d_)	Linked Swatches
rncStyles.border_color(color, range)	rncStyles.d_border_color(color, range)	Color Palette Reference
rncStyles.border_t_color(color, range)	rncStyles.d_border_t_color(color, range)	Color Palette Reference
rncStyles.border_b_color(color, range)	rncStyles.d_border_b_color(color, range)	Color Palette Reference
rncStyles.border_s_color(color, range)	rncStyles.d_border_s_color(color, range)	Color Palette Reference
rncStyles.border_e_color(color, range)	rncStyles.d_border_e_color(color, range)	Color Palette Reference
rncStyles.border_x_color(color, range)	rncStyles.d_border_x_color(color, range)	Color Palette Reference
rncStyles.border_y_color(color, range)	rncStyles.d_border_y_color(color, range)	Color Palette Reference

---

Usage Example

BorderPreview.tsx

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

export default function BorderPreview() {
  return (
    <View style={{ gap: 20 }}>
      
      {/* Basic Card with a clean 1px border wrap */}
      <View style={[
        rncStyles.border_1, 
        rncStyles.border_color('zinc', 200),
        rncStyles.d_border_color('zinc', 800)
      ]}>
        <Text>Standard Light Outline Card</Text>
      </View>

      {/* Input or List row with a subtle bottom accent separator */}
      <View style={[
        rncStyles.border_b_2, 
        rncStyles.border_b_color('indigo', 500)
      ]}>
        <Text>Active Field Bottom Tracker Element</Text>
      </View>

      {/* Custom Dynamic Layout Container wrapping horizontal bounds */}
      <View style={[
        rncStyles.border_x(4), 
        rncStyles.border_x_color('emerald', 400),
        rncStyles.d_border_x_color('emerald', 600)
      ]}>
        <Text>Custom 4px horizontal framing container bounds</Text>
      </View>

    </View>
  );
}