My question is similar to this: React-native view auto width by text inside, but none of the answers there help. I have this:

hi hi hi greetings everyone! my name is nathantew I want the blue text to take up as much space as it needs to stay a single line, and the pink text should take up the remaining space, but only as much as it needs. then the rest of the space should be distributed evenly. However, when the pink text requires more than a single line, this happens:

I tried the solutions in the aforementioned threads, but although they successfully make the Text component take up less space, its parent continues to take up all the remaining space like it did before:
Wrapping in a view with alignSelf: "flex-start" or alignItems: "flex-start":

hi hi hi greetings everyone! my name is nathantew Wrapping in another Text component:

hi hi hi greetings everyone! my name is nathantew So, how can I make the green part have the same width as the pink part?
Источник: https://stackoverflow.com/questions/780 ... h-of-the-t