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

1npm install awesome-text
2# or
3yarn add awesome-text

Quick Start

1import AwesomeText from 'awesome-text';
2
3// Basic Usage
4<AwesomeText>
5  Hello World
6</AwesomeText>
7
8// Animated Usage
9<AwesomeText
10  animation="zoom"
11  duration={2000}
12>
13  Zooming Text
14</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

1<AwesomeText
2  animation="zoom"
3  duration={2000}
4  minZoom={0.9}
5  maxZoom={1.1}
6>
7  Smooth Zoom Effect
8</AwesomeText>

Bounce Animation

1<AwesomeText
2  animation="bounce"
3  duration={1500}
4>
5  Bouncing Text
6</AwesomeText>

Typography Examples

1// Heading with custom color
2<AwesomeText
3  variant="h1"
4  color="#007AFF"
5  weight="bold"
6  align="center"
7>
8  Main Title
9</AwesomeText>
10
11// Body text with custom styling
12<AwesomeText
13  variant="body"
14  customStyle={{
15    letterSpacing: 0.5,
16    lineHeight: 24
17  }}
18>
19  Content text with custom styling
20</AwesomeText>

Container Styling

1<AwesomeText
2  containerStyle={{
3    padding: 16,
4    backgroundColor: '#f5f5f5',
5    borderRadius: 8
6  }}
7>
8  Text in styled container
9</AwesomeText>

Best Practices

1. 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

2. Typography

   • Use appropriate variants for hierarchy
   • Combine with custom styles for unique looks
   • Consider alignment for different screen sizes

3. 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!