🌈 React Native Gradient Components

A powerful and easy-to-use React Native package for applying gradient styles to Text, Buttons, and Boxes using react-native-linear-gradient.

📦 Installation

Install via npm:

or with Yarn:

💡 Expo Users: Use this instead for gradient support:

expo install expo-linear-gradient

💡 Features

✅ Gradient Text
✅ Gradient Buttons
✅ Gradient Containers / Boxes
✅ Supports any gradient color combination
✅ Fully customizable styles
✅ Minimal & clean structure

✍️ Usage

Import the components you need:

import { GradientText, GradientButton, GradientBox } from 'react-native-gradient-components';

🎨 GradientText

<GradientText text="Beautiful Gradient" gradientColors={['#FF5F6D', '#FFC371']} style={{ fontSize: 28, fontWeight: 'bold', textAlign: 'center' }} />

🔘 GradientButton

<GradientButton text="Click Me" gradientColors={['#36D1DC', '#5B86E5']} onPress={() => alert('You clicked the button!')} style={{ paddingVertical: 12, paddingHorizontal: 24, borderRadius: 8 }} textStyle={{ fontSize: 16, fontWeight: '600' }} />

📦 GradientBox

<GradientBox gradientColors={['#fc466b', '#3f5efb']} style={{ padding: 16, marginTop: 20, borderRadius: 10 }}

<Text style={{ color: '#fff' }}> 📦 This is a container with gradient background.

📁 File Structure

react-native-gradient-components/ ├── src/ │ ├── GradientText.js │ ├── GradientButton.js │ ├── GradientBox.js │ └── index.js ├── package.json ├── README.md └── LICENSE

🤝 Dependencies

Your project should include these (automatically installed):

| Package | Version | | ------------------------------------- | --------- | | react-native | ^0.80.1 | | react-native-linear-gradient | ^2.8.3 | | prop-types | ^15.8.1 | | @react-native-community/masked-view | ^0.1.11 |

🧑‍💻 Author

Kishan Tripathi
📧 Email
🌐 GitHub

📃 License

This package is licensed under the ISC License.

🙌 Contributing

We welcome contributions! Feel free to:

1. Fork the repo
2. Create your feature branch
3. Submit a Pull Request 🎉

⭐️ Show Your Support

If this package helped you, please consider ⭐️ starring the repo and sharing it with others!

🔗 Related Resources

• react-native-linear-gradient
• React Native Documentation

© 2025 – Created with ❤️ by Kishan Tripathi