Search code examples
reactjsreact-nativereact-animatedreact-native-reanimated-v2

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

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.

enter image description here

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>`
Solution

  • 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.