🎨 RN Animated Text Kit - Professional React Native Text Animation Library

The #1 React Native text animation library - Create stunning, eye-catching animated text effects in seconds. Perfect for iOS & Android apps.

🚀 15+ Professional Text Animation Components | ⚡ 60fps Performance | 📘 100% TypeScript | 🎨 Fully Customizable | 📱 iOS & Android

Transform your React Native app with professional animated text effects that engage users and create memorable experiences. Used by thousands of developers worldwide for loading screens, hero sections, CTAs, and stunning UI interactions.

🎬 Preview

✨ Why Choose RN Animated Text Kit?

🏆 Best React Native Text Animation Library

• ⚡ Lightning Fast - 60fps performance with native driver, smooth on any device
• 🎯 15+ Professional Animations - Typewriter, liquid fill, bounce, fade, rotate, wave, scramble, flicker, and more
• 📘 100% TypeScript - Fully typed with strict TypeScript definitions, IntelliSense support, zero type errors
• 🎨 Maximum Customization - Every color, timing, style, and behavior is customizable
• 🔧 Developer Friendly - Clean API, excellent documentation, copy-paste examples
• 📱 Cross-Platform Excellence - Perfect rendering on iOS and Android, tested on thousands of devices
• 🚀 Production Ready - Battle-tested, used by top apps, maintained regularly
• 💪 Zero Config - Install and start animating in 30 seconds
• 🎭 Lightweight - Minimal bundle size, only essential peer dependencies
• 📦 Complete Package - Everything you need for text animations in one library

🎬 Perfect For:

• 📱 Mobile Apps - Loading screens, splash screens, onboarding flows
• 🎯 Landing Pages - Hero sections, headlines, call-to-actions
• 💼 Business Apps - Professional presentations, data visualization, dashboards
• 🎮 Gaming - Score counters, level transitions, achievements
• 🛒 E-commerce - Product showcases, promotional banners, sale announcements
• 📰 Content Apps - News tickers, article headlines, notifications
• 🎓 Educational Apps - Interactive learning, quiz feedback, progress indicators

📦 Installation

npm install rn-animated-text-kit
# or
yarn add rn-animated-text-kit

Peer Dependencies

Install the required peer dependencies:

npm install react-native-svg @react-native-masked-view/masked-view react-native-linear-gradient
# or
yarn add react-native-svg @react-native-masked-view/masked-view react-native-linear-gradient

For iOS, run:

cd ios && pod install

🚀 Components

1. TypewriterText

Classic typewriter effect with blinking cursor.

import { TypewriterText } from 'rn-animated-text-kit';

<TypewriterText
  text="Hello World!"
  speed={100}
  style={{ fontSize: 24, color: '#333' }}
  showCursor={true}
  cursorChar="_"
  loop={true}
  pause={1000}
  onComplete={() => console.log('Done!')}
/>

Props:

• text (string, required) - Text to animate
• speed (number) - Typing speed in ms per character (default: 100)
• style (StyleProp) - Custom text styles
• showCursor (boolean) - Show blinking cursor (default: true)
• cursorChar (string) - Cursor character (default: '_')
• loop (boolean) - Loop the animation (default: false)
• pause (number) - Pause before restart in ms (default: 1000)
• onComplete (function) - Callback when typing completes

2. TypewriterCycleText

Cycles through multiple texts with typewriter effect.

import { TypewriterCycleText } from 'rn-animated-text-kit';

<TypewriterCycleText
  texts={['Hello', 'World', 'React Native']}
  speed={100}
  pause={2000}
  style={{ fontSize: 28, color: '#2196F3' }}
  cursorChar="|"
/>

Props:

• texts (string[]) - Array of texts to cycle through
• speed (number) - Typing speed in ms (default: 100)
• pause (number) - Pause between texts in ms (default: 2000)
• style (StyleProp) - Custom text styles
• cursorChar (string) - Cursor character (default: '_')

3. LiquidFillText

Liquid/water filling effect with animated waves.

import { LiquidFillText } from 'rn-animated-text-kit';

<LiquidFillText
  text="WAVE"
  boxWidth={320}
  boxHeight={150}
  waveColor="#2196F3"
  textColor="#FFFFFF"
  backgroundColor="#0a0a0a"
  loadDuration={3000}
  waveDuration={4000}
  loadUntil={0.7}
  waveHeight={12}
  loopWave={true}
  textStyle={{ fontSize: 60, fontWeight: '900' }}
/>

Props:

• text (string, required) - Text to animate
• boxWidth (number) - Container width (default: 400)
• boxHeight (number) - Container height (default: 250)
• waveColor (string) - Wave fill color (default: '#2196F3')
• textColor (string) - Base text color (default: '#FFFFFF')
• backgroundColor (string) - Background color (default: '#000000')
• loadDuration (number) - Fill duration in ms (default: 6000)
• waveDuration (number) - Wave animation speed in ms (default: 2000)
• loadUntil (number) - Fill level 0-1 (default: 1.0)
• waveHeight (number) - Wave amplitude (default: 8)
• loopWave (boolean) - Loop wave animation (default: true)
• loopFill (boolean) - Loop fill animation (default: false)
• textStyle (StyleProp) - Custom text styles

4. FadeText

Smooth fade in/out transitions between texts.

import { FadeText } from 'rn-animated-text-kit';

<FadeText
  texts={['Hello!', 'Welcome!', 'Enjoy!']}
  duration={1500}
  pauseDuration={1000}
  style={{ fontSize: 28, color: '#2C2C2C' }}
  loop={true}
/>

Props:

• texts (string[]) - Array of texts to cycle
• duration (number) - Fade animation duration in ms (default: 2000)
• pauseDuration (number) - Pause between fades in ms (default: 1000)
• style (StyleProp) - Custom text styles
• loop (boolean) - Loop the animation (default: true)

5. ScaleText

Text scaling/zooming animation.

import { ScaleText } from 'rn-animated-text-kit';

<ScaleText
  texts={['Pop!', 'Boom!', 'Wow!']}
  duration={800}
  pauseDuration={1000}
  scaleFrom={0}
  scaleTo={1}
  style={{ fontSize: 36, color: '#F59E0B' }}
  loop={true}
/>

Props:

• texts (string[]) - Array of texts to animate
• duration (number) - Scale animation duration in ms (default: 1000)
• pauseDuration (number) - Pause between animations in ms (default: 1000)
• scaleFrom (number) - Starting scale (default: 0)
• scaleTo (number) - Ending scale (default: 1)
• style (StyleProp) - Custom text styles
• loop (boolean) - Loop the animation (default: true)

6. RotateText

3D rotation/flip effect between texts.

import { RotateText } from 'rn-animated-text-kit';

<RotateText
  texts={['Morning', 'Afternoon', 'Evening', 'Night']}
  duration={2000}
  pauseDuration={2000}
  style={{ fontSize: 32, color: '#14B8A6' }}
/>

Props:

• texts (string[]) - Array of texts to rotate
• duration (number) - Rotation duration in ms (default: 2000)
• pauseDuration (number) - Pause between rotations in ms (default: 1500)
• style (StyleProp) - Custom text styles

7. WavyText

Characters move in a wave pattern.

import { WavyText } from 'rn-animated-text-kit';

<WavyText
  text="Hello World"
  style={{ fontSize: 32, color: '#2196F3' }}
  waveDuration={800}
  waveHeight={25}
  loop={true}
  delay={0}
  onAnimationComplete={() => {}}
/>

Props:

• text (string, required) - Text to animate
• style (StyleProp) - Custom text styles
• waveDuration (number) - Wave cycle duration in ms (default: 2000)
• waveHeight (number) - Wave amplitude in pixels (default: 10)
• loop (boolean) - Loop the animation (default: true)
• delay (number) - Start delay in ms (default: 0)
• onAnimationComplete (function) - Completion callback

8. FlickerText

Tube light flicker effect.

import { FlickerText } from 'rn-animated-text-kit';

<FlickerText
  texts={['Flicker!', 'Glow!', 'Shine!']}
  style={{ fontSize: 40, color: '#FFFFFF' }}
  flickerDuration={1000}
  displayDuration={2000}
  flickerCount={2}
/>

Props:

• texts (string[]) - Array of texts to display
• style (StyleProp) - Custom text styles
• flickerDuration (number) - Flicker phase duration in ms (default: 1000)
• displayDuration (number) - Display duration in ms (default: 2000)
• flickerCount (number) - Number of flickers (default: 5)

9. ScrambleText

Matrix-style scramble effect.

import { ScrambleText } from 'rn-animated-text-kit';

<ScrambleText
  texts={['Decode', 'Decrypt', 'Unlock']}
  style={{ fontSize: 36, color: '#2C2C2C' }}
  speed={150}
  displayDuration={2000}
  scrambleChars="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*"
/>

Props:

• texts (string[]) - Array of texts to scramble
• style (StyleProp) - Custom text styles
• speed (number) - Scramble speed in ms (default: 200)
• displayDuration (number) - Display duration in ms (default: 2000)
• scrambleChars (string) - Characters to use for scrambling

10. BounceText

Spring bounce animation.

import { BounceText } from 'rn-animated-text-kit';

<BounceText
  texts={['Bounce!', 'Jump!', 'Spring!']}
  style={{ fontSize: 48, color: '#F59E0B' }}
  bounceDuration={1000}
  displayDuration={2000}
/>

Props:

• texts (string[]) - Array of texts to bounce
• style (StyleProp) - Custom text styles
• bounceDuration (number) - Bounce duration in ms (default: 1000)
• displayDuration (number) - Display duration in ms (default: 2000)

11. AnimatedNumber

Rolling number counter animation.

import { AnimatedNumber } from 'rn-animated-text-kit';

<AnimatedNumber
  value={9999}
  duration={3000}
  style={{ fontWeight: '900', color: '#2C2C2C' }}
  fontSize={64}
  prefix="$"
  suffix=" USD"
  decimals={2}
  animateToNumber={true}
/>

Props:

• value (number, required) - Target number
• duration (number) - Animation duration in ms (default: 2000)
• style (StyleProp) - Custom text styles
• fontSize (number) - Font size (default: 40)
• prefix (string) - Text before number (default: '')
• suffix (string) - Text after number (default: '')
• decimals (number) - Decimal places (default: 0)
• animateToNumber (boolean) - Animate digits (default: true)

12. FadeInLines

Staggered fade-in for multiple lines.

import { FadeInLines } from 'rn-animated-text-kit';

<FadeInLines
  lines={['First line', 'Second line', 'Third line', 'Fourth line']}
  style={{ fontSize: 20, color: '#2C2C2C' }}
  duration={800}
  delay={300}
  loop={true}
  pauseDuration={2000}
/>

Props:

• lines (string[]) - Array of lines to animate
• style (StyleProp) - Custom text styles
• duration (number) - Fade duration per line in ms (default: 800)
• delay (number) - Delay between lines in ms (default: 300)
• loop (boolean) - Loop the animation (default: false)
• pauseDuration (number) - Pause before loop in ms (default: 2000)

13. ColorizeText

Rainbow gradient color sweep effect.

import { ColorizeText } from 'rn-animated-text-kit';

<ColorizeText
  text="RAINBOW"
  colors={['#FF0000', '#FF7F00', '#FFFF00', '#00FF00', '#0000FF', '#9400D3']}
  duration={3000}
  textStyle={{ fontSize: 50, fontWeight: 'bold' }}
  baseColor="#E0E0E0"
  loop={true}
/>

Props:

• text (string, required) - Text to colorize
• colors (string[]) - Gradient colors array
• duration (number) - Animation duration in ms (default: 3000)
• style (StyleProp) - Container styles
• textStyle (StyleProp) - Text styles
• baseColor (string) - Base text color (default: '#CCCCCC')
• loop (boolean) - Loop the animation (default: true)

14. FallingWords

Characters fall and fade out.

import { FallingWords } from 'rn-animated-text-kit';

<FallingWords
  words={['Hello', 'Beautiful', 'World']}
  duration={1500}
  delay={200}
  style={{ fontSize: 28, color: '#2C2C2C' }}
  loop={true}
  pauseDuration={2000}
  displayDuration={1500}
/>

Props:

• words (string[]) - Array of words
• duration (number) - Fall duration in ms (default: 2000)
• delay (number) - Delay between characters in ms (default: 100)
• style (StyleProp) - Custom text styles
• loop (boolean) - Loop the animation (default: true)
• pauseDuration (number) - Pause before loop in ms (default: 1000)
• displayDuration (number) - Display before fall in ms (default: 1500)

15. LiquidFillTextAdvanced

Advanced liquid fill with more control.

import { LiquidFillTextAdvanced } from 'rn-animated-text-kit';

<LiquidFillTextAdvanced
  text="ADVANCED"
  boxWidth={320}
  boxHeight={150}
  waveColor="#2196F3"
  backgroundColor="#000000"
  loadDuration={6000}
  waveDuration={2000}
  loadUntil={1.0}
  waveAmplitude={10}
  waveFrequency={2}
  textStyle={{ fontSize: 70, fontWeight: 'bold' }}
/>

Props:

• text (string, required) - Text to animate
• boxWidth (number) - Container width (default: 400)
• boxHeight (number) - Container height (default: 250)
• waveColor (string) - Wave color (default: '#2196F3')
• backgroundColor (string) - Background color (default: '#000000')
• loadDuration (number) - Fill duration in ms (default: 6000)
• waveDuration (number) - Wave speed in ms (default: 2000)
• loadUntil (number) - Fill level 0-1 (default: 1.0)
• waveAmplitude (number) - Wave height (default: 10)
• waveFrequency (number) - Wave count (default: 2)
• textStyle (StyleProp) - Custom text styles

🎯 Usage Examples

Basic Usage

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { TypewriterText, BounceText, ColorizeText } from 'rn-animated-text-kit';

const App = () => {
  return (
    <View style={styles.container}>
      <TypewriterText
        text="Welcome to RN Animated Text Kit!"
        speed={80}
        style={styles.typewriter}
      />

      <BounceText
        texts={['Exciting!', 'Amazing!', 'Awesome!']}
        style={styles.bounce}
      />

      <ColorizeText
        text="COLORFUL"
        colors={['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A']}
        textStyle={styles.colorize}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5F5F5',
  },
  typewriter: {
    fontSize: 24,
    color: '#333',
    marginBottom: 30,
  },
  bounce: {
    fontSize: 36,
    fontWeight: 'bold',
    color: '#FF6B6B',
    marginBottom: 30,
  },
  colorize: {
    fontSize: 48,
    fontWeight: 'bold',
  },
});

export default App;

Advanced Customization

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { LiquidFillText, RotateText, FadeInLines } from 'rn-animated-text-kit';

const AdvancedExample = () => {
  return (
    <View style={styles.container}>
      {/* Custom Liquid Fill */}
      <LiquidFillText
        text="FIRE"
        boxWidth={300}
        boxHeight={120}
        waveColor="#FF5722"
        textColor="#FFD700"
        backgroundColor="#1a1a1a"
        loadDuration={2500}
        waveDuration={3500}
        loadUntil={0.65}
        waveHeight={10}
        textStyle={styles.liquidText}
      />

      {/* 3D Rotate with Custom Timing */}
      <RotateText
        texts={['Design', 'Develop', 'Deploy']}
        duration={1500}
        pauseDuration={1000}
        style={styles.rotateText}
      />

      {/* Staggered Lines */}
      <FadeInLines
        lines={[
          '✓ TypeScript Support',
          '✓ Highly Customizable',
          '✓ 60fps Performance',
          '✓ Easy to Use'
        ]}
        style={styles.lineText}
        duration={600}
        delay={200}
        loop={true}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: '#0a0a0a',
    padding: 20,
  },
  liquidText: {
    fontSize: 56,
    fontWeight: '900',
    letterSpacing: 2,
  },
  rotateText: {
    fontSize: 32,
    fontWeight: 'bold',
    color: '#4ECDC4',
  },
  lineText: {
    fontSize: 18,
    color: '#E0E0E0',
    fontWeight: '600',
  },
});

export default AdvancedExample;

🎨 Customization Tips

Color Customization

All components support standard React Native TextStyle and custom color props:

<TypewriterText
  text="Custom Colors"
  style={{
    color: '#FF6B6B',
    textShadowColor: 'rgba(0, 0, 0, 0.3)',
    textShadowOffset: { width: 2, height: 2 },
    textShadowRadius: 4,
  }}
/>

Font Customization

Apply custom fonts using style prop:

<FadeText
  texts={['Custom Font']}
  style={{
    fontFamily: 'YourCustomFont-Bold',
    fontSize: 32,
    fontWeight: '700',
    letterSpacing: 1.5,
  }}
/>

Timing Control

Fine-tune animation timing for perfect synchronization:

<ScaleText
  texts={['Fast', 'Medium', 'Slow']}
  duration={500}        // Quick scale
  pauseDuration={300}   // Brief pause
  scaleFrom={0.5}       // Start at 50%
  scaleTo={1.2}         // Scale to 120%
/>

📱 Platform Compatibility

• ✅ iOS (10.0+)
• ✅ Android (API 21+)
• ✅ Expo (SDK 44+)
• ✅ React Native Web (experimental)

🔧 Troubleshooting

Issue: Animations are choppy

Solution: Ensure you're using useNativeDriver: true (already enabled by default in all components)

Issue: TypeScript errors

Solution: Make sure you have @types/react and @types/react-native installed

Issue: Gradients not showing (ColorizeText)

Solution: Verify react-native-linear-gradient is properly linked:

cd ios && pod install

📄 License

MIT © Noman Akram

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📧 Support

For bugs and feature requests, please create an issue.

⭐ Show Your Support

If you like this project, please give it a star on GitHub!

Made with ❤️ for the React Native community