react-native-animated-masked-linear-gradient

Dependencies

- prop-types
- @react-native-masked-view/masked-view
- react-native-linear-gradient

Tested on

I tested this project only on a Android device. But i think there is no problem on IOS.

Installation

npm i react-native-animated-masked-linear-gradient

Importing

javascript

import AnimatedMaskedLinearGradient from 'react-native-animated-masked-linear-gradient';





Simple Usage Example

jsx



  Hello World!





Usage Example With All Default Properties

jsx

  colors={["rgb(255,0,0)", "rgb(0,255,0)", "rgb(0,0,255)"]}

  connectFirstAndLastColor={true}

  duration={3000}

  style={{}}

  contentContainerStyle={{}}

  useNativeDriver={true}

  directionTo={"right"}

>



  

  Hello World!

What is it doing?

Actually this is just a MaskedView component with LinearGradient component. It works like this:
- This MaskedView component gets children whose your putted inside and put them to a container View component.
- It runs onLayout event of this container View and get this component's width and hight values.
- It uses this width and hight values on style of 2 LinearGradient components. So, this LinearGradient components get same size with container View.
- After then, it looks at direction property (it can be only "right" or "left") and it starts an transform: translateY animation using react native Animated API.