Can't wrap text in Animated.View - React Native

Question

I am newbie in react native animations. I am using react native animated to move menu right and push all content to right without cutting text, but as you see it is not wrapping.

I have already tried these solutions:

Using flexShrink for the Text component

flex: 1 and flexWrap to the parent View element but nothing has worked, could somebody give me some advice?

`<Animated.View style={boxValue.getLayout()}>

<Text style={{flexWrap: 'wrap'}}>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
     dapibus massa eu quam porttitor, id suscipit felis volutpat. Duis
     tempus turpis
</Text>
 </Animated.View>`

Could you please share some more of your code? How is the menu rendered? How is boxValue.getLayout() pushing the view to the right? — joachimwedin, Aug 31 '21 at 16:39

score 1 · Accepted Answer · answered Aug 31 '21 at 17:43

What you are trying to do is entirely possible using the Animated API. You can wrap the text component in a Animated.View that is shifted to right using an Animated.Value combined with styling the text with flexWrap: 'wrap'. That seems to be what you were going for, but perhaps you are not updating the width of the text container? Here is a snack showing the general idea in action.

Can't wrap text in Animated.View - React Native

1 Answers1