How to hide svg with react-native-reanimted when height is collapsing

Question

I'm trying to achieve an animation on blur and focus of TextInput with react-native-reanimated when the keyboard is opening or dismissing, the height will collapse but the problem here is if we have an SVG inside Animated.View it will not collapse like text

code on expo

any improvements on the code will be appreciated too

I just want to say that having an expo snack linked to the question is super amazing and makes it so much easier to help — PhantomSpooks, Feb 28 '23 at 22:49

score 2 · Accepted Answer · answered Feb 28 '23 at 18:04

2

Try to add overflow: 'hidden' to your logoContainer style. Tested on my device, I think it behaves the way you want it.

Hope this helps!

answered Feb 28 '23 at 18:04

joaocout

518
1
5

1

I tried this but added `withTiming` to the onBlur and onFocus and it worked. Not to say that it wouldnt work without it but, I imagine the OP is using shared values because he wishes for these values to be animated – PhantomSpooks Feb 28 '23 at 22:45
1

https://snack.expo.dev/40tvGKX1S – PhantomSpooks Feb 28 '23 at 22:54
1

@joaocout thank you for your time, it works fine with your solution – Hamed Mar 01 '23 at 11:55
1

@PhantomSpooks, `withTiming` makes it a little bit laggy when it collapses – Hamed Mar 01 '23 at 11:55

How to hide svg with react-native-reanimted when height is collapsing

1 Answers1