React Native Svg Animated Linear Gradient

Overview:

The SVG Animated Linear Gradient component is designed for iOS and Android platforms. This component creates animated linear gradients for all SVG components used as child props. It can be used as a loading component similar to those seen on Facebook or Instagram. This component is built using expo, but users have the option to fork the repository, remove expo, and use react-native-svg instead.

Features:

• Animated Linear Gradient: Creates animated linear gradients for SVG components.
• Loading Component: Ideal for use as a loading component resembling Facebook or Instagram.
• Configurable Properties: Users can customize primary color, secondary color, animation duration, width, height, gradient points, and offset value.

Installation:

To use the SVG Animated Linear Gradient component, follow these steps:

1. Install the component and react-native-svg dependencies:

   npm i react-native-svg-animated-linear-gradient --save
   npm i react-native-svg
   

2. Link react-native-svg to your project:

   react-native link react-native-svg
   

3. Use the component inside your component:

   import AnimatedLinearGradient from 'react-native-svg-animated-linear-gradient';
   
   <AnimatedLinearGradient
       primaryColor='#ffffff'
       secondaryColor='#cccccc'
       duration={3000}
       width={200}
       height={150}
       x1='0%'
       y1='0%'
       x2='100%'
       y2='0%'
       offset={1}
   >
       {/* Your SVG components here */}
   </AnimatedLinearGradient>
   

Summary:

The SVG Animated Linear Gradient component offers a convenient way to create animated linear gradients for SVG components on iOS and Android platforms. With customizable properties for colors, duration, dimensions, gradient points, and offset value, this component is versatile and can be used effectively as a loading component in various applications. Users have the flexibility to adjust the component to suit their specific design requirements by forking the repository and making modifications as needed.