Typography

A collection of static style utilities built into the core framework to manage text alignment and decorations cleanly across your React Native layout definitions.

---

Alignment & Decoration Styles

Utility Key	Native Property	Value	Description
rncStyles.text_start	textAlign	"left"	Aligns text nodes flush with the leading edge.
rncStyles.text_end	textAlign	"right"	Aligns text nodes flush with the trailing edge.
rncStyles.text_center	textAlign	"center"	Centers the text inside its parent box wrapper.
rncStyles.text_justify	textAlign	"justify"	Stretches layout spacing evenly across lines.
rncStyles.underline	textDecorationLine	"underline"	Draws a decorative horizontal line beneath text elements.

---

Font Weight Styles

Style Property	Value	Description
rncStyles.font_thin	{ fontWeight: '100' }	Thin
rncStyles.font_extralight	{ fontWeight: '200' }	Extra Light
rncStyles.font_light	{ fontWeight: '300' }	Light
rncStyles.font_normal	{ fontWeight: '400' }	Normal / Regular
rncStyles.font_medium	{ fontWeight: '500' }	Medium
rncStyles.font_semibold	{ fontWeight: '600' }	Semi Bold
rncStyles.font_bold	{ fontWeight: '700' }	Bold
rncStyles.font_extrabold	{ fontWeight: '800' }	Extra Bold
rncStyles.font_black	{ fontWeight: '900' }	Black / Heavy

---

Text Color Styles

Style Property / Function	Type / Value	Description
rncStyles.text_white	{ color: "#ffffff" }	Sets text color to absolute white.
rncStyles.text_black	{ color: "#000000" }	Sets text color to absolute black.
rncStyles.text_color(color, range)	Function	Sets a custom theme color based on a name and numeric shade step (50-950). Color Palette Reference
rncStyles.d_text_color(color, range)	Function	Applies the color choice only when Dark Theme is active. Color Palette Reference

---

Usage Example

TypographyPreview.tsx

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

export default function TypographyPreview() {
  return (
    <View>
      
      // Font Weight      
      <Text  style="{[rncStyles.font_thin]}">Thin Text</Text>
      <Text  style="{[rncStyles.font_extralight]}">Extra Light Text</Text>
      <Text  style="{[rncStyles.font_light]}">Light Text</Text>
      <Text  style="{[rncStyles.font_normal]}">Normal Text</Text>
      <Text  style="{[rncStyles.font_medium]}">Medium Text</Text>
      <Text  style="{[rncStyles.font_semibold]}">Semibold Text</Text>
      <Text  style="{[rncStyles.font_bold]}">Bold Text</Text>
      <Text  style="{[rncStyles.font_extrabold]}">Extra Bold Text</Text>
      <Text  style="{[rncStyles.font_black]}">Heavy/Black Text</Text>

      // Alignment  
      <Text  style="{[rncStyles.text_center]}">Center Aligned text</Text>
      <Text style="{[rncStyles.text_start]}">Left Aligned Text</Text>
      <Text style="{[rncStyles.text_end]}">Right Aligned Text</Text>
      <Text style="{[rncStyles.text_justify]}">Justify Aligned Text</Text>
      
      
      // Text Color
      
      <Text style="{[rncStyles.text_color('blue',500)]}"> blue 500 </Text>// From Color Palette      
      <Text style="{[rncStyles.text_color('#003049')]}">#003049</Text> // custom color      
      <Text style="{[rncStyles.d_text_color('#e0e1dd')]}">#e0e1dd</Text> // color appear when dark mode is on

    </View>
  );
}