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
– PhantomSpooks, Commented Feb 28, 2023 at 22:49

joaocout · Accepted Answer · 2023-02-28 18:04:52Z

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, 2023 at 18:04

joaocout

5582 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

PhantomSpooks Over a year ago

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 Over a year ago

snack.expo.dev/40tvGKX1S

Hamed Over a year ago

@joaocout thank you for your time, it works fine with your solution

Hamed Over a year ago

@PhantomSpooks, withTiming makes it a little bit laggy when it collapses

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related