Possible to trigger animation again?

[hesselberg]

Hi,

Loving the library, easy to use and understand.

Is it possible to call a method or something that reanimates the SimpleAnimation again? I'm using it to "bounce" a counter, and I would like the animation to re-run/re-bounce as a feedback to the user.

I have animateOnUpdate set totrue, but it doesn't seem to have any effect.

Any tips?

[joeyschroeder]

Hey @hesselberg,

Do any of the props change on the component when the counter value changes? The animateOnUpdate prop will only trigger the animation if the component updates. If no props on the component change, then it's not updating, and the animation will not fire.

Could you post a small code sample of your work? Thanks.

[joeyschroeder]

Closed due to inactivity.

[jacargentina]

Just for everybody reference: what @joeyschroeder says is that you MUST CHANGE any prop on <SimpleAnimation />, not its childs, to achieve replay animation effect.

For example, i've this component for an animating validation error:

import React from 'react';
import { Text } from 'native-base';
import { View } from 'react-native';
import { SimpleAnimation } from 'react-native-simple-animations';

const ValidationMessage = (props: any) => {
  if (props.error) {
    return (
      <SimpleAnimation
        key={props.counter}
        delay={10}
        duration={100}
        fade
        staticType="bounce">
        <View
          style={{
            alignSelf: 'flex-start',
            paddingTop: 10,
            paddingBottom: 10
          }}>
          <Text
            style={{
              color: 'red',
              marginLeft: 0,
              fontSize: 14,
              fontWeight: 'bold'
            }}>
            {props.error}
          </Text>
        </View>
      </SimpleAnimation>
    );
  }
  return null;
};

export default ValidationMessage;

Note that i receive props.counterwhich is a simple number incrementing on each submit button click; i've put it on the key prop which is valid on any react component. It works perfectly! 👌