react-native-stagger-animation v0.1.0

➤ 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

➤ Props

Transition type

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

Animate Spring configuration

Animate other transition type configuration

➤ Author

Sieu Thai, sieuhuflit@gmail.com

➤ License

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