Awesome Text

A feature-rich React Native Text component that combines beautiful typography with smooth animations. Perfect for creating engaging, animated text interfaces with minimal setup.

Features

🎭 Smooth Animations
- Zoom animation with Material Design easing curves
- Bounce animation with customizable height
- Configurable duration and delay
- Hardware accelerated animations
📝 Rich Typography
- Pre-defined variants (h1, h2, h3, body, caption)
- Customizable font weights (normal, bold, light)
- Text alignment options (left, center, right)
- Custom color support
🎨 Styling Options
- Custom style overrides
- Container styling
- Flexible layout integration
- Full TypeScript support

Installation

npm install awesome-text
# or
yarn add awesome-text

Quick Start

import AwesomeText from 'awesome-text';

// Basic Usage
<AwesomeText>
  Hello World
</AwesomeText>

// Animated Usage
<AwesomeText
  animation="zoom"
  duration={2000}
>
  Zooming Text
</AwesomeText>

Props

Prop	Type	Default	Description
variant	'h1' \| 'h2' \| 'h3' \| 'body' \| 'caption'	'body'	Typography variant
color	string	'#000000'	Text color
weight	'normal' \| 'bold' \| 'light'	'normal'	Font weight
align	'left' \| 'center' \| 'right'	'left'	Text alignment
animation	'zoom' \| 'bounce' \| 'none'	'none'	Animation type
duration	number	1000	Animation duration in ms
delay	number	0	Animation start delay in ms
minZoom	number	0.8	Minimum zoom scale
maxZoom	number	1.2	Maximum zoom scale
customStyle	object	{}	Additional text styles
containerStyle	object	{}	Container View styles

Animation Examples

Zoom Animation

<AwesomeText
  animation="zoom"
  duration={2000}
  minZoom={0.9}
  maxZoom={1.1}
>
  Smooth Zoom Effect
</AwesomeText>

Bounce Animation

<AwesomeText
  animation="bounce"
  duration={1500}
>
  Bouncing Text
</AwesomeText>

Typography Examples

// Heading with custom color
<AwesomeText
  variant="h1"
  color="#007AFF"
  weight="bold"
  align="center"
>
  Main Title
</AwesomeText>

// Body text with custom styling
<AwesomeText
  variant="body"
  customStyle={{
    letterSpacing: 0.5,
    lineHeight: 24
  }}
>
  Content text with custom styling
</AwesomeText>

Container Styling

<AwesomeText
  containerStyle={{
    padding: 16,
    backgroundColor: '#f5f5f5',
    borderRadius: 8
  }}
>
  Text in styled container
</AwesomeText>

Best Practices

Animation Performance
- Use longer durations (2000-3000ms) for smoother animations
- Keep zoom ranges subtle (e.g., 0.9 to 1.1) for professional effects
- Animations use native driver for optimal performance
Typography
- Use appropriate variants for hierarchy
- Combine with custom styles for unique looks
- Consider alignment for different screen sizes
Styling
- Use containerStyle for layout positioning
- Combine multiple props for complex styles
- Override styles with customStyle when needed

Requirements

React Native >= 0.60.0
React >= 16.8.0

License

MIT © Ali Raza

Contributing

Contributions, issues, and feature requests are welcome!

Package detail

awesome-text

readme