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

v1.1.1

Published

6 months ago

A lightweight, animated linear gradient component built on top of expo-linear-gradient for React Native and Expo.

Downloads

0High
0Medium
0Low

react-native expo expo-linear-gradient animated-gradient linear-gradient react-native-animations expo-animated-components gradient-background animated-ui

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

| 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>
  );
}