Animation doesn't stay in it's view

[mikeKane]

I've created an animation and it animated great! Thank you for a great library.

However it doesn't stay in its container. Notice it should stay with in the yellow view

[marcosmartini]

I can also confirm that. Is there a fix or proper way of handling that?

Thanks

[mikeKane]

I've tried overFlow = hidden. Not sure what else I can do.

[genesisxyz]

This works for me (react-native 0.61.1, [email protected]):

<View style={{ overflow: 'hidden' }}> <Animatable.View animation="slideInDown" useNativeDriver={true} > ... </Animatable.View> </View>

[BrianH2]

Another option is to override the translations happening. For example, I was using slideInDown which just animates translateY by -100 (see here) so I replaced it with a custom animation reducing the translateY value to fit:

<AnimatedComponent
  animation={{
    from: { translateY: -10 },
    to: { translateY: 0 },
  }}
  direction="alternate"
  iterationCount="infinite"
  duration={500}
  useNativeDriver={true}
/>

For me, this avoided the issue of the animated component disappearing when using overflow: hidden.