Text wrapping of several Text elements in react-native?

Question

Let's say I have the following react-native code:

//FormatText.js

 <View style={styleOptions.container}>
<Text style={styleOptions.regular}>
    Hello world I am going to eat some Pizza for the sake of eating pizza.{" "}
</Text>
<Text style={[{ fontWeight: "bold" }, styleOptions.strong]}>
    Super Pizza Store.{" "}
</Text>
<Text style={styleOptions.regular}>You will pay $10</Text>
<Text style={[{ textAlignVertical: "top" }, styleOptions.superscript]}>
    8
</Text>
<Text style={styleOptions.regular}>. I doubt you can afford it.</Text>
</View>;

And the styleOptions is defined in this file.

//Style.js
 const styleOptions = {
container: {
    flexDirection: "row",
    flexWrap: "wrap",
    width: 300,
    padding: 10
},
regular: { fontSize: 13 },
superscript: { fontSize: 8 },
strong: { fontSize: 13 }
};

I see the following output:

The problem is that there is a line break after "Super Pizza Store" and after the exponent. I'd imagine that's because each Text component is too long to fit in the space of 300px.

How do I get rid of line breaks and only allow for natural line breaks? Ideally, I want to limit my changes to Style.jsonly. As a last resort, if absolutely necessary, I will restructure the contents of FormatText.js.

Put a border or a backgroundColor to all text components to see visually the Text components boxes. You'll see that Text component creates a rectangular box contaning all the texts. First component creates a 2 line box thats why the second component can't fill the rest. — bennygenel, Mar 28 '18 at 13:52
@bennygenel Basically you're saying I can't achieve the results I want from modifying `Style.js` alone? — John, Mar 28 '18 at 13:54
I'm not sure about that. Maybe there is a way. I just wanted to clarify why the current result happen. You might achieve the desired effect with some css magic that I don't know. — bennygenel, Mar 28 '18 at 14:05
Basically I understand some of the `` blocks appear as rectangular blocks, and that's why it is knocking the next text block to another line. I guess there's no style rule to treat subsequent text blocks as "strings" that wraps naturally like text? — John, Mar 28 '18 at 14:08

score 7 · Answer 1 · edited Oct 08 '21 at 11:54

Your parent element contains the styles

flexDirection:"row",flexWrap:"wrap",width:300,padding:10

therefore it will wrap the child elements if their width is less than 200

Since your child elements are multiple, therefore whoever doesn't satisfy the above condition gets wrapped as a whole.

For this you might consider using nested Text elements as nested ones

<View style={styleOptions.container}>
  <Text style={styleOptions.regular}>Hello world I am going to eat some Pizza for the sake of eating pizza.
    <Text style={[{fontWeight:"bold"},styleOptions.strong]}>Super Pizza Store. </Text>
    <Text style={styleOptions.regular}>You will pay $10</Text>
    <Text style={[{textAlignVertical:'top'},styleOptions.superscript]}>8</Text>
    <Text style={styleOptions.regular}>.  I doubt you can afford it.</Text>
  </Text>
</View>

Thank you for your suggestion. Your solution presented another problem which I explain here: https://stackoverflow.com/questions/49536698/superscript-style-is-broken-in-my-react-native — John, Mar 28 '18 at 14:27

Text wrapping of several Text elements in react-native?

1 Answers1