GradientText Component

A beautiful and customizable gradient text component for React Native Expo applications. Create awesome text effects with smooth color gradients in any direction.

✨ Features

• 🎨 Customizable Colors - Use any gradient color combination
• 📐 Direction Control - Horizontal, vertical, or diagonal gradients
• 🎯 Easy Integration - Drop-in replacement for React Native Text
• 🔧 Flexible Styling - Supports all Text component styles
• 📱 Expo Compatible - Works seamlessly with Expo managed workflow
• ⚡ Performance Optimized - Efficient rendering using MaskedView

📦 Installation

Install the package and required peer dependencies:

1npm install expo-gradient-text
2npx expo install expo-linear-gradient @react-native-masked-view/masked-view

🚀 Quick Start

1import React from 'react';
2import { View } from 'react-native';
3import GradientText from 'expo-gradient-text';
4
5export default function App() {
6  return (
7    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
8      <GradientText style={{ fontSize: 32, fontWeight: 'bold' }}>
9        Hello Gradient!
10      </GradientText>
11    </View>
12  );
13}

📖 API Reference

Props

Prop	Type	Default	Description
children	string | React.ReactNode	Required	The text content to display
colors	string[]	['#FF6B6B', '#4ECDC4']	Array of colors for the gradient
start	{x: number, y: number}	{x: 0, y: 0}	Starting point of the gradient
end	{x: number, y: number}	{x: 1, y: 0}	Ending point of the gradient
style	TextStyle	{}	Style object for the text
...textProps	TextProps	-	All other React Native Text props

Gradient Direction Guide

1// Horizontal (left to right)
2start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}
3
4// Vertical (top to bottom)  
5start={{ x: 0, y: 0 }} end={{ x: 0, y: 1 }}
6
7// Diagonal (top-left to bottom-right)
8start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }}
9
10// Diagonal (top-right to bottom-left)
11start={{ x: 1, y: 0 }} end={{ x: 0, y: 1 }}

🎨 Usage Examples

Basic Gradient

1<GradientText style={{ fontSize: 24, fontWeight: 'bold' }}>
2  Welcome!
3</GradientText>

Previews

Previews

iOS	Android

Custom Colors

1<GradientText 
2  colors={['#667eea', '#764ba2']}
3  style={{ fontSize: 28, fontWeight: '600' }}
4>
5  Custom Gradient
6</GradientText>

Vertical Gradient

1<GradientText 
2  colors={['#ff9a9e', '#fecfef']}
3  start={{ x: 0, y: 0 }}
4  end={{ x: 0, y: 1 }}
5  style={{ fontSize: 32, fontWeight: 'bold' }}
6>
7  Vertical Flow
8</GradientText>

Rainbow Effect

1<GradientText 
2  colors={['#ff0000', '#ff8000', '#ffff00', '#80ff00', '#00ff80', '#0080ff', '#8000ff']}
3  style={{ fontSize: 26, fontWeight: 'bold' }}
4>
5  Rainbow Magic
6</GradientText>

Sunset Theme

1<GradientText 
2  colors={['#ff7e5f', '#feb47b']}
3  start={{ x: 0, y: 0 }}
4  end={{ x: 1, y: 1 }}
5  style={{ fontSize: 30, fontWeight: 'bold' }}
6>
7  Sunset Vibes
8</GradientText>

🎨 Popular Color Combinations

1// Ocean Breeze
2colors={['#667eea', '#764ba2']}
3
4// Warm Sunset  
5colors={['#ff7e5f', '#feb47b']}
6
7// Cool Blues
8colors={['#74b9ff', '#0984e3']}
9
10// Purple Dream
11colors={['#a29bfe', '#6c5ce7']}
12
13// Green Nature
14colors={['#55efc4', '#00b894']}
15
16// Fire Gradient
17colors={['#fd79a8', '#fdcb6e', '#e17055']}
18
19// Night Sky
20colors={['#2d3436', '#636e72', '#b2bec3']}

🏗️ Component Structure

The component uses a combination of MaskedView and LinearGradient to achieve the gradient text effect:

1. MaskedView - Creates a mask using the text shape
2. LinearGradient - Provides the gradient background
3. Text - Invisible text that defines the mask boundaries

🔧 TypeScript Support

1interface GradientTextProps extends TextProps {
2  children: React.ReactNode;
3  colors?: string[];
4  start?: { x: number; y: number };
5  end?: { x: number; y: number };
6  style?: StyleProp<TextStyle>;
7}

📱 Platform Compatibility

• ✅ iOS
• ✅ Android
• ✅ Expo Go
• ✅ Expo Dev Build

🤝 Contributing

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

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Built with Expo Linear Gradient
• Uses React Native Masked View
• Inspired by modern gradient design trends

---

Made with ❤️ for the React Native community