How to model a button with icons in react-native

Question

I'm using react-native-icons package to include icons with buttons. They have a sample code listed in example folder. I'm trying to achieve onPress on View but turns out react-native doesn't have onPress function for <View> component.

I tried using <TouchableHighlight> but it can only have single child element in it not two like <Icon> and <Text> inside.

I also tried using <Text> with <Icon> and <Text> inside but <Text> can only have <Text> elements inside.

Has anyone have any luck achieving similar functionality ?

<View onPress={this.onBooking} 
  style={styles.button}>
  <Icon
    name='fontawesome|facebook-square'
    size={25}
    color='#3b5998'
    style={{height:25,width:25}}/>
  <Text style={styles.buttonText}>Sign In with Facebook</Text>
</View>

Answer 1

If you are using react-native-icons module, you can try wrap both your icon and text in a view, then use TouchableHighlight on top of it. Something like:

<TouchableHighlight onPress={()=>{}}>
     <View>
         <Icon ... />
         <Text ... />
     </View>
 </TouchableHighlight>

But it will be very easy if you use a relative new module react-native-vector-icons. You can do like:

<Icon name="facebook" style={styles.icon}>
   <Text style={styles.text}>Login with Facebook</Text>
</Icon>