Expo 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](https://www.npmjs.com/package/expo-linear-gradient), this component provides smooth and customizable animated transitions, perfect for enhancing UI with modern, visually appealing gradient effects.
___
#### π± Demo
---
## [β¨ **Key Features**](#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**](#installation)
```bash
npm install @symbiot.dev/expo-animated-linear-gradient expo-linear-gradient
# or
yarn add @symbiot.dev/expo-animated-linear-gradient expo-linear-gradient
```
___
## [π Usage](#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
```tsx
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 (
setColors(blackWhite.light)}>
Press me
);
}
```
### `AnimatedSchemedLinearGradient`
| Prop | Type | Default | Description |
|----------------|----------------------------|-----------|-----------------------------------------------------------------|
| `colors` | `Record` | β | 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
```tsx
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 (
setColors(colorful)}>
Press me
);
}
```
___
### [π **Platform Support**](#support)
- β
iOS
- β
Android
- β
Web
- β
Expo & Expo Go
---
### [π¦ **Bundle Size**](#size)
Lightweight and fast β see actual size on [Bundlephobia](https://bundlephobia.com/package/@symbiot.dev/expo-animated-linear-gradient).
---
### [π¬ Contributing](#contributing)
Contributions welcome! Feel free to open issues, discussions, or suggestions.
---
### [π Who's Using This?](#usage)
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?](#ideas)
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](mailto:info@symbiot.dev).
___
### [π§Ύ License](#license)
MIT β Made with β€οΈ by [Symbiot](https://symbiot.dev)
