@symbiot.dev/expo-animated-linear-gradient v1.1.1

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

✨ 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

✨ 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