title: React native text word break strategy of strings with dash
body: <h2>Setup</h2>
  
  <pre><code>react: 16.6.0-alpha.8af6728
  react-native: 0.57.4
  </code></pre>
  
  <h2>Problem</h2>
  
  <p>Word breaking in Text component does not handle strings with dashes the way app design wants it. I want to word wrap the whole word taking into account dashes. This whole <strong>string-with-dashes</strong> should be considered a word when word wrapping. But flexbox does not.</p>
  
  <h2>Code</h2>
  
  <pre><code>&lt;TouchableOpacity style={{ width: 250, backgroundColor: 'skyblue' }}&gt;
      &lt;Text style={styles.welcome}&gt;This is a sample of text-with-dash incorrectly word breaking&lt;/Text&gt;
  &lt;/TouchableOpacity&gt;
  </code></pre>
  
  <p>Restult looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/BsVMm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/BsVMm.png" alt="enter image description here"></a></p>
  
  <p>But I want it to end up like this (<strong>text-with-dash</strong> on a seperate line):</p>
  
  <p><a href="https://i.stack.imgur.com/MDBEb.png" rel="noreferrer"><img src="https://i.stack.imgur.com/MDBEb.png" alt="enter image description here"></a></p>
  
  <p>The issue is I get the strings from an online CMS and want a flexbox styling solution to this problem. There might be situation where a string-with-dash could end up in a single line so in those instances I don't want a word wrap of cause.</p>