title: How to model a button with icons in react-native
body: <p>I'm using <a href="https://github.com/corymsmith/react-native-icons" rel="noreferrer">react-native-icons</a> package to include icons with buttons. They have a sample code listed in <a href="https://github.com/corymsmith/react-native-icons/blob/master/Example/index.ios.js" rel="noreferrer">example folder</a>. I'm trying to achieve <code>onPress</code> on View but turns out react-native doesn't have <code>onPress</code> function for <code>&lt;View&gt;</code> component.</p>
  
  <p>I tried using <code>&lt;TouchableHighlight&gt;</code> but it can only have single child element in it not two like <code>&lt;Icon&gt;</code> and <code>&lt;Text&gt;</code> inside.</p>
  
  <p>I also tried using <code>&lt;Text&gt;</code> with <code>&lt;Icon&gt;</code> and <code>&lt;Text&gt;</code> inside but <code>&lt;Text&gt;</code> can only have <code>&lt;Text&gt;</code> elements inside.</p>
  
  <p>Has anyone have any luck achieving similar functionality ?</p>
  
  <p><img src="https://i.stack.imgur.com/Ceidd.png" alt="Sample Buttons with Icons"></p>
  
  <pre><code>&lt;View onPress={this.onBooking} 
    style={styles.button}&gt;
    &lt;Icon
      name='fontawesome|facebook-square'
      size={25}
      color='#3b5998'
      style={{height:25,width:25}}/&gt;
    &lt;Text style={styles.buttonText}&gt;Sign In with Facebook&lt;/Text&gt;
  &lt;/View&gt;
  </code></pre>