awesome-text/README.md

A feature-rich React Native Text component offering smooth animations (zoom & bounce with Material Design easing), extensive typography (h1-h3, body, caption), custom styling (color, weight, alignment), and container customization. Perfect for creating en

# 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

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

## Quick Start

```jsx
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
```jsx
<AwesomeText
  animation="zoom"
  duration={2000}
  minZoom={0.9}
  maxZoom={1.1}
>
  Smooth Zoom Effect
</AwesomeText>
```

### Bounce Animation
```jsx
<AwesomeText
  animation="bounce"
  duration={1500}
>
  Bouncing Text
</AwesomeText>
```

## Typography Examples

```jsx
// 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

```jsx
<AwesomeText
  containerStyle={{
    padding: 16,
    backgroundColor: '#f5f5f5',
    borderRadius: 8
  }}
>
  Text in styled container
</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!