symbiotdevExpo Animated Linear Gradient 🎨 🚀
A lightweight and flexible animated linear gradient component for React Native and Expo, compatible with iOS, Android, and Web. Built on top of expo-linear-gradient, this component provides smooth and customizable animated transitions, perfect for enhancing UI with modern, visually appealing gradient effects.
📱 Demo
✨ Key Features
🌈 Smooth Animated Gradients – Create eye-catching linear gradients with seamless animated transitions to enhance visual appeal.
🎨 Customizable Colors and Directions – Fully control gradient colors, animation duration and direction.
🧠 Minimal and Efficient – Built on top of expo-linear-gradient with zero native linking and minimal overhead.
🔧 Expo-First Integration – No extra setup needed in managed Expo projects — just install and go.
🚀 Cross-Platform Compatibility – Works flawlessly with:
- React Native CLI
- Expo
- Expo Go
- React Native Web for full browser support
👩🏿💻 Installation
npm install @symbiot.dev/expo-animated-linear-gradient expo-linear-gradient
# or
yarn add @symbiot.dev/expo-animated-linear-gradient expo-linear-gradient🚀 Usage
AnimatedLinearGradient
| Prop | Type | Default | Description |
|---|---|---|---|
colors |
string[] |
— | Array of colors used in the gradient animation. |
duration |
number |
300 |
Duration (in ms) between colors changes. |
webDirection |
string |
'0deg' |
CSS direction for gradients on the web in deg. |
| ... | LinearGradientProps |
— | Inherits all props from expo-linear-gradient except colors. |
✨ Example
import { AnimatedLinearGradient } from '@symbiot.dev/expo-animated-linear-gradient';
// ... other deps
const blackWhite = {
dark: ['#000000', '#000000', '#000000'],
light: ['#FFFFFF', '#FFFFFF', '#FFFFFF']
};
export default function App() {
const [colors, setColors] = useState(blackWhite.dark);
return (
<AnimatedLinearGradient
colors={colors}
style={StyleSheet.absoluteFillObject}
>
<Pressable onPress={() => setColors(blackWhite.light)}>
<Text>Press me</Text>
</Pressable>
</AnimatedLinearGradient>
);
}AnimatedSchemedLinearGradient
| Prop | Type | Default | Description | |
|---|---|---|---|---|
colors |
Record<Scheme, string[]> |
— | Object with light and dark color arrays. |
|
duration |
number |
300 |
Duration (in ms) of each gradient transition cycle. | |
webDirection |
string |
'0deg' |
CSS direction for gradients on the web in deg. |
|
scheme |
'light' \ |
'dark' |
'light' |
Determines which color scheme to use. |
| ... | LinearGradientProps |
— | Inherits all props from expo-linear-gradient except colors. |
✨ Example
import { AnimatedSchemedLinearGradient } from '@symbiot.dev/expo-animated-linear-gradient';
// ... other deps
const blackWhite = {
dark: ['#000000', '#000000', '#000000'],
light: ['#FFFFFF', '#FFFFFF', '#FFFFFF']
};
const colorful = {
dark: ['#063D60', '#1E6D51', '#2B4669'],
light: ['#E6F8FA', '#E8F5E9', '#F9F2FF']
};
export default function App() {
const [colors, setColors] = useState(blackWhite);
return (
<AnimatedSchemedLinearGradient
colors={colors}
style={StyleSheet.absoluteFillObject}
>
<Pressable onPress={() => setColors(colorful)}>
<Text>Press me</Text>
</Pressable>
</AnimatedSchemedLinearGradient>
);
}🌐 Platform Support
- ✅ iOS
- ✅ Android
- ✅ Web
- ✅ Expo & Expo Go
📦 Bundle Size
Lightweight and fast — see actual size on Bundlephobia.
💬 Contributing
Contributions welcome! Feel free to open issues, discussions, or suggestions.
🌟 Who's Using This?
Using expo-animated-linear-gradient in your app or product?
Feel free to share your project — it might be featured in this section!
✉️ Open pull request, or reach out directly to get included.
🚀 Got Ideas or Gaps to Fill?
Know of existing libraries or functionality that could be improved?
Have an idea for something completely new?
Symbiot is ready to take on the challenge — feedback, feature requests, or collaboration ideas are always welcome!
🧠 Let’s build better tools together. Start the conversation or contact via email.
🧾 License
MIT — Made with ❤️ by Symbiot