React Native Stagger Animation

React native stagger animation
_{Use to create stagger animation effect for children view}

➤ 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

➤ Example

• Check the example folder, then type to the terminal

expo start

➤ 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

➤ License

MIT