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>
  )
}