React Native Animation Expand

I'm creating a text component that I want to be 2 lines by default, and if the user taps on it, it will expand to the full length, and if the user taps on it again, it will collapse back to 2 lines.

So far this works to expand and collapse but I'm not sure how to set the Animated.timing function to animate it. I tried something like this:

But it didn't quite work. It doesn't display the text at all, and when I try initializing the new Animated.Value to a bigger number than the 2 line height (like 50), the height always gets truncated to 16 no matter how many times I expand and collapse. What's the best way to animate expanding and collapsing the text?

Expanding Circle Transition Using React Native Modal And Animated Api

I needed to solve this for a dynamic height component, the text can be parsed HTML so we account for funky formatting such as extra lines. This will expand the view with the embedded HTML. If you simply want to control text layout you can just re-render the component by changing the state of the text props. Remove or change the color of the gradient to match your background.

The component works rendering the full-text view and getting the height with the onLayout listener, the initial view container is set to a static height, if the full height of the rendered text view is larger than the initial height then the read more button is displayed and the full height value is set for the toggle.

I'm creating a View component that I have text when you click on it, it will expand and if you again click on it, it will collapse.

Smooth Animations With React Native Reanimated 3

Improved a bit upon Yoel answer. You can animate a View, add a Text inside, and add a callback to when the animation ends, you clamp the text to a max number of 2 lines.

*There seems to be a delay when closing the collapse, if anyone knows how to fix this issue please let me know.

Just want to inform Lucas Kuhn's question about the delay. That is because you used the maxHeight style instead of height in Animated.View. Try changing it to height and see how high the component actually becomes if you did't get what I am trying to explain

Using React Native Scrollview To Create A Sticky Header

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Posted by aryasetiaone7

Tweet