Text Component

A styled text component for React Native that provides consistent typography and theming capabilities with additional text styling variants.

Features

🎨 Theme Integration - Seamlessly integrates with the design system
📝 Multiple Variants - Regular, Bold, and Italic text styles
🎯 Customizable - Override colors, fonts, and sizes easily
♿ Accessible - Inherits all React Native Text accessibility features
🔧 TypeScript Ready - Full type safety and IntelliSense support
🎪 Styled Components - Built with styled-components for optimal performance

Installation

💻Bash

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

Basic Usage

⚛️TSX

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

export default function App() {
  return Hello, World!
}

Text Variants

Regular Text

⚛️TSX

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

This is regular text

Bold Text

⚛️TSX

This is bold text

Italic Text

⚛️TSX

This is italic text

Customization

Custom Color

⚛️TSX

Blue text
Bold red text
Italic green text

Custom Font Size

⚛️TSX

Large text
Small text

Combined Styling

⚛️TSX


  Centered text with custom styling

API Reference

TextProps

Prop	Type	Default	Description
`color`	`string`	`theme.textColor`	Text color
`fontSize`	`number`	`theme.fontSize`	Font size
`style`	`StyleProp<TextStyle>`	`undefined`	Additional text styles
`children`	`React.ReactNode`	Required	Text content

Inheritance

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

Layout Examples

Content Structure

⚛️TSX

import React from 'react'
import { View } from 'react-native'
import { Text } from 'rn-base-component'

export default function ContentExample() {
  return (
    
      
        Article Title
      
      
      
        Published on March 15, 2024
      
      
      
        This is a paragraph of text that demonstrates how to use the Text 
        component for content layout. The component inherits all the styling 
        capabilities of React Native's Text component while providing 
        additional theming support.
      
      
      
        Last updated 2 hours ago
      
    
  )
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  meta: {
    marginVertical: 8,
  },
  paragraph: {
    lineHeight: 22,
    marginVertical: 16,
  },
})

User Interface Elements

⚛️TSX


  John Doe
  Software Engineer
  
    Last seen 2 hours ago

Status Messages

⚛️TSX

✓ Operation completed successfully
✗ Error occurred during operation
⚠ Warning: Check your input

Theme Integration

Using Theme Colors

⚛️TSX

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

const theme = useTheme()

Primary colored text
Secondary colored text
Error colored text

Responsive Text

⚛️TSX

Large text
Medium text
Small text

Best Practices

Consistent Typography - Use the Text component for all text to maintain consistency
Readable Colors - Ensure sufficient contrast between text and background
Appropriate Sizing - Use appropriate font sizes for different content types
Theme Integration - Leverage theme colors and font sizes
Accessibility - Test with screen readers and ensure proper contrast
Performance - Use Text variants instead of inline styling when possible

Performance Tip

The Text component is optimized with styled-components for better performance compared to inline styling.

Common Patterns

Error States

⚛️TSX


  Please enter a valid email address

Loading States

⚛️TSX

Loading...

Empty States

⚛️TSX


  No items found

Links

⚛️TSX


  Learn more