Typography Component

A comprehensive typography system component that provides consistent text styling with predefined variants for building hierarchical text layouts in React Native applications.

Features

📐 Typography Scale - Predefined text variants (h1, h2, regular, bold)
🎨 Consistent Styling - Standardized font sizes, weights, and line heights
🎯 Easy to Use - Simple variant-based API for quick implementation
🔧 Flexible - Supports custom colors and additional styling
♿ Accessible - Built-in text accessibility features
🎪 TypeScript Ready - Full type definitions and IntelliSense support

Installation

💻Bash

npm install rn-base-component
# or
yarn add rn-base-component

Basic Usage

⚛️TSX

import React from 'react'
import { Typography } from 'rn-base-component'

export default function App() {
  return Welcome to our app
}

Typography Variants

Heading 1 (h1)

⚛️TSX

Large Heading
// Font size: 28, Weight: 700, Line height: 32

Heading 2 (h2)

⚛️TSX

Medium Heading
// Font size: 24, Weight: 600, Line height: 28

Heading 3 (h3)

⚛️TSX

Small Heading
// Font size: 20, Weight: 600, Line height: 24

Body Text

⚛️TSX

Regular body text
// Font size: 16, Weight: 400, Line height: 22

Bold Text

⚛️TSX

Bold emphasis text
// Font size: 16, Weight: 700, Line height: 22

Caption

⚛️TSX

Small caption text
// Font size: 12, Weight: 400, Line height: 16

Customization

Custom Color

⚛️TSX


  Blue Heading



  Gray body text

Additional Styling

⚛️TSX


  Centered Heading

Custom Font Family

⚛️TSX


  Text with custom font

API Reference

TypographyProps

Prop	Type	Default	Description
`variant`	`TypographyVariant`	Required	Typography variant to use
`color`	`string`	`theme.colors.text`	Text color
`style`	`StyleProp<TextStyle>`	`undefined`	Additional text styles
`children`	`React.ReactNode`	Required	Text content

Typography Variants

Variant	Font Size	Weight	Line Height	Use Case
`h1`	28	700	32	Page titles, main headings
`h2`	24	600	28	Section headings
`h3`	20	600	24	Subsection headings
`body`	16	400	22	Regular body text
`bold`	16	700	22	Emphasized text
`caption`	12	400	16	Small text, metadata

Inheritance

All React Native TextProps are supported, including numberOfLines, ellipsizeMode, selectable, onPress, etc.

Layout Examples

Article Layout

⚛️TSX

import React from 'react'
import { ScrollView, View } from 'react-native'
import { Typography } from 'rn-base-component'

export default function ArticleLayout() {
  return (
    
      
        Understanding React Native Typography
      
      
      
        Published on March 15, 2024 • 5 min read
      
      
      
        Introduction
      
      
      
        Typography is a crucial aspect of mobile app design that affects 
        readability, user experience, and overall visual hierarchy. This 
        article explores best practices for implementing consistent 
        typography in React Native applications.
      
      
      
        Key Principles
      
      
      
        When designing typography systems, consider factors such as font 
        size, line height, and color contrast to ensure optimal readability 
        across different devices and screen sizes.
      
      
      
        Remember: Consistency is key to great typography.
      
    
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  title: {
    marginBottom: 8,
  },
  meta: {
    marginBottom: 24,
  },
  sectionTitle: {
    marginTop: 32,
    marginBottom: 16,
  },
  subsectionTitle: {
    marginTop: 24,
    marginBottom: 12,
  },
  paragraph: {
    marginBottom: 16,
  },
  highlight: {
    marginTop: 16,
    marginBottom: 8,
  },
})

Card Content

⚛️TSX


  
    Product Name
  
  
  
    This is a brief description of the product that provides key information 
    to help users understand what it offers.
  
  
  
    $29.99
  
  
  
    Free shipping available

Status Messages

⚛️TSX


  
    Success!
  
  
  
    Your account has been created successfully.
  
  
  
    You can now start using all features.

Theme Integration

Using Theme Colors

⚛️TSX

import { useTheme } from 'rn-base-component'

const theme = useTheme()


  Primary Heading



  Body text with theme color



  Secondary text

Responsive Typography

⚛️TSX

import { useResponsiveValue } from 'rn-base-component'

export default function ResponsiveText() {
  const fontSize = useResponsiveValue({ base: 24, md: 28, lg: 32 })
  
  return (
    
      Responsive Heading
    
  )
}

Best Practices

Establish Hierarchy - Use variants consistently to create clear visual hierarchy
Maintain Consistency - Stick to the predefined variants for consistency
Consider Readability - Ensure adequate line height and spacing between text elements
Color Contrast - Use appropriate color contrast for accessibility
Responsive Design - Test typography on different screen sizes
Performance - Use Typography component instead of multiple styled Text components

Accessibility

Always ensure sufficient color contrast (minimum 4.5:1 for normal text, 3:1 for large text) for WCAG compliance.

Common Patterns

Error Messages

⚛️TSX


  Please enter a valid email address

Loading States

⚛️TSX


  Loading content...

Empty States

⚛️TSX


  
    No Items Found
  
  
    Try adjusting your search criteria or check back later.

Form Labels

⚛️TSX


  Email Address *