react-native-animatable icon indicating copy to clipboard operation
react-native-animatable copied to clipboard

An option to make Animatable Components not animate on mount

Open AlicanC opened this issue 7 years ago • 2 comments

I have something like this:

const MyComponent = ({ isShown }) => (
  <Animatable.View
    animation={isShown ? 'fadeInUp' : 'fadeOutDown'}
  >
    <ContentHere />
  </Animatable.View>
);

The goal here is to make MyComponent show and hide itself according to the isShown prop. The problem is that Animatable.View animates when it's mounted so when I render <MyComponent isShown={false}> the user sees the component appear and fade out.

Could we add a prop to Animatable Components to make them initially render a completed animation (in this example, a completed fadeOutDown) so they don't animate on mount, but only when animation prop changes?

AlicanC avatar Apr 16 '18 13:04 AlicanC

What's the status for this ticket ? this looks like a common use-case when using animatable library.

teod avatar Jun 25 '20 08:06 teod

Any updates here?

RoliqueTeam avatar Aug 07 '20 13:08 RoliqueTeam