title: React-Native bulleted lists using flex-wrap
body: <p>I'm trying to create a bulleted list that looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/Z6UdF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Z6UdF.png" alt="enter image description here"></a></p>
  
  <p>But I'm ending up with this instead:</p>
  
  <p><a href="https://i.stack.imgur.com/jk7tD.png" rel="noreferrer"><img src="https://i.stack.imgur.com/jk7tD.png" alt="enter image description here"></a></p>
  
  <p>React-native doesn't seem to like my use of nested flex boxes.  But I'm not sure how to express the need for all 3 line elements (bullet, bolded text and normal text) to be displayed inline and to wrap to the next line when necessary.</p>
  
  <p>Here is my react-native code:</p>
  
  <pre><code>var styles = StyleSheet.create({
      textWrapper: {
          flexWrap: 'wrap',
          alignItems: 'flex-start',
          flexDirection: 'row',
      },
      textBlock: {
          flexWrap: 'wrap',
          alignItems: 'flex-start',
          flexDirection: 'row'
          position: 'absolute',
          left: 10
      },
      boldText: {
          fontWeight: 'bold',
      },
      normalText: {
      }
  });
  
  &lt;View style={ styles.textWrapper }&gt;
      &lt;Text&gt;{'\u2022'}&lt;/Text&gt;
      &lt;View style={ styles.textBlock }&gt;
          &lt;Text style={ styles.boldText }&gt;{categoryName + ':'}&lt;/Text&gt;
          &lt;Text style={ styles.normalText }&gt;{value}&lt;/Text&gt;
      &lt;/View&gt;
  &lt;/View&gt;
  </code></pre>