title: Text wrapping of several Text elements in react-native?
body: <p>Let's say I have the following react-native code:</p>
  
  <pre><code>//FormatText.js
  
   &lt;View style={styleOptions.container}&gt;
  &lt;Text style={styleOptions.regular}&gt;
      Hello world I am going to eat some Pizza for the sake of eating pizza.{" "}
  &lt;/Text&gt;
  &lt;Text style={[{ fontWeight: "bold" }, styleOptions.strong]}&gt;
      Super Pizza Store.{" "}
  &lt;/Text&gt;
  &lt;Text style={styleOptions.regular}&gt;You will pay $10&lt;/Text&gt;
  &lt;Text style={[{ textAlignVertical: "top" }, styleOptions.superscript]}&gt;
      8
  &lt;/Text&gt;
  &lt;Text style={styleOptions.regular}&gt;. I doubt you can afford it.&lt;/Text&gt;
  &lt;/View&gt;;
  </code></pre>
  
  <p>And the <code>styleOptions</code> is defined in this file.</p>
  
  <pre><code>//Style.js
   const styleOptions = {
  container: {
      flexDirection: "row",
      flexWrap: "wrap",
      width: 300,
      padding: 10
  },
  regular: { fontSize: 13 },
  superscript: { fontSize: 8 },
  strong: { fontSize: 13 }
  };
  </code></pre>
  
  <p>I see the following output:</p>
  
  <p><a href="https://i.stack.imgur.com/1hkPW.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1hkPW.png" alt="enter image description here"></a></p>
  
  <p>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.</p>
  
  <p>How do I get rid of line breaks and only allow for natural line breaks?  Ideally, I want to limit my changes to <code>Style.js</code>only.  As a last resort, if absolutely necessary, I will restructure the contents of <code>FormatText.js</code>.  </p>