title: How to insert text and image in a TouchableOpacity?
body: <p>I have a login button and I would like to place a Login text at the center of the button and an image (scaling it properly) on the right edge of the button, far away from the text.</p>
  
  <p>Currently I am using an Icon from the Vector Icons library in the following way:</p>
  
  <pre><code>&lt;TouchableOpacity style={styles.buttonLoginTouchable} onPress={this.loginUser.bind(this)}&gt;
      &lt;View style={{ flexDirection: 'row' }}&gt;
          &lt;Text style={{ color: '#ffffff', fontWeight: '700', paddingLeft: '46%' }}&gt;Login&lt;/Text&gt;
          &lt;Icon name="arrow-right" color='#fff' size={15} style={{ paddingLeft: '33%' }} /&gt;
      &lt;/View&gt;
  &lt;/TouchableOpacity&gt;
  </code></pre>
  
  <p>Which is probably also not the best way to do it. Now I would like to replace the Icon with an Image, so I wrote instead the following code:</p>
  
  <pre><code>&lt;TouchableOpacity style={styles.buttonLoginTouchable} onPress={this.loginUser.bind(this)}&gt;
      &lt;View style={{ flexDirection: 'row' }}&gt;
          &lt;Text style={{ color: '#ffffff', fontWeight: '700', flex: 0.9 }}&gt;Login&lt;/Text&gt;
          &lt;Image source={require('../../common/arrow.png')} resizeMode='contain' style={{ height: 10 }} /&gt;
      &lt;/View&gt;
  &lt;/TouchableOpacity&gt;
  </code></pre>
  
  <p>This way the image scale and it is placed somehow on the right but it is not anymore horizontally aligned (and I can't understand why).</p>
  
  <p>Does anyone know the best way to achieve the style I am looking for?</p>