title: How to split a column in to two subrows in react native
body: <p>i have react native ui like this
  <a href="https://i.stack.imgur.com/KhT36.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KhT36.png" alt="enter image description here"></a></p>
  
  <p>my jsx for a component is </p>
  
  <pre><code>  &lt;View style={styleSheet.appItemStyle}&gt;
      &lt;View style={{flex:1}}&gt;
        &lt;Image style={styleSheet.appItemImageContainer} source={{uri: 'data:image/png;base64,'+item.icon}}/&gt;
      &lt;/View&gt;
      &lt;View style={{flex:3, flexWrap: 'wrap'}}&gt;
  
            &lt;Text style={styleSheet.appItemTextStyle}&gt;{item.appName}&lt;/Text&gt;
            &lt;Text style={{fontSize: 12, color: "#000"}}&gt;{item.packageName}&lt;/Text&gt;
  
      &lt;/View&gt;
  
      &lt;View style={{flex:1, alignContent: "center"}}&gt;
  
          &lt;Text style={{fontSize: 15, color:'orange'}} onPress=""&gt;COPY&lt;/Text&gt;
  
    &lt;/View&gt;
    &lt;/View&gt;
  </code></pre>
  
  <p>the problem with this ui is , the package name of the app is shown in another app row, 
  for example, in the picture gmail package name is shown in settings suggestion app name, how can i split a column in to two rows, so that my second text stay on the same row instead of new row? i want the element of list view similar to the below screenshot, i want the title and text to be on same row, how can i solve this problem? I have just placed two text elements in a single row, but they tend to appear on next row, why this happens?</p>
  
  <p><a href="https://i.stack.imgur.com/qJ6hh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qJ6hh.png" alt="enter image description here"></a></p>