➤ Installation

Add the dependency:

➤ Peer dependencies

• Using animated-pose

➤ Usage

import StaggerAnimation, { Transition } from 'react-native-stagger-animation';

/**
 * Create stagger animation for header group
 */
const AnimatedStaggerHeader = StaggerAnimation.createAnimatedStagger();
const AnimatedViewHeader = StaggerAnimation.createAnimatedView({
  transitionType: 'easeInOut',
  duration: 900,
});

render() {
  // Visible state
  const { isVisible } = this.state;
  return (
    <Transition delayChildrenIn={150}>
      {isVisible && (
        <AnimatedStaggerHeader key="a">
          <AnimatedViewHeader>
            <Text>Hi Stephen</Text>
            <Image
              source={require('../assets/avatar.jpg')}
            />
          </AnimatedViewHeader>
          <AnimatedText>
            What sport are you going to play today ?
          </AnimatedText>
        </AnimatedStaggerHeader>
      )}
    </Transition>
  )
}

Note : The Transition is using to pass any props stagger animation

➤ Configuration

| Property | Type | Default | Description | | --------------------- | :------: | :--------: | --------------------------------------- | | createAnimatedStagger | function | () => null | Create the animate stagger wrapper view | | createAnimatedView | function | ()=>null | Create View animation component | | createAnimatedText | function | ()=>null | Create Text animation component |

➤ Props

Transition type

• spring,
• linear,
• easeIn, easeOut, easeInOut
• circIn, circOut, circInOut
• backIn, backOut, backInOut
• anticipate

Animate Spring configuration

| Property | Type | Default | Description | | ------------------ | :-----: | :-----: | --------------------------------------------- | | type | string | linear | Create the animate stagger wrapper view | | stiffness? | number | 100 | Spring stiffness. | | damping? | number | 10 | Strength of opposing force. | | velocity? | number | 0 | Initial velocity. | | overshootClamping? | boolean | false | Clamps any overshoot beyond the target value. | | mass? | number | 1 | Mass of the moving object. | | useNativeDriver | boolean | false | Use native driver |

Animate other transition type configuration

| Property | Type | Default | Description | | --------------- | :------: | :-----: | --------------------------------------------- | | type | string | linear | Create the animate stagger wrapper view | | duration | function | 300 | Total duration of animation, in milliseconds. | | useNativeDriver | boolean | false | Use native driver |

➤ Author

Sieu Thai, [email protected]

➤ License

React Native Gradient Header Library is available under the MIT license. See the LICENSE file for more info.