How to model a button with icons in react-native - reactjs

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>

Answer 2

I managed to do it like this. I wonder if there is a better way.
var styles = StyleSheet.create({
btnClickContain: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'stretch',
alignSelf: 'stretch',
backgroundColor: '#009D6E',
borderRadius: 5,
padding: 5,
marginTop: 5,
marginBottom: 5,
},
btnContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'stretch',
alignSelf: 'stretch',
borderRadius: 10,
},
btnIcon: {
height: 25,
width: 25,
},
btnText: {
fontSize: 18,
color: '#FAFAFA',
marginLeft: 10,
marginTop: 2,
}
});
<TouchableHighlight
onPress={this.onBooking} style={styles.btnClickContain}
underlayColor='#042417'>
<View
style={styles.btnContainer}>
<Icon
name='fontawesome|facebook-square'
size={25}
color='#042'
style={styles.btnIcon}/>
<Text style={styles.btnText}>Sign In with Facebook</Text>
</View>
</TouchableHighlight>

Answer 3

Expo has a a Button component that does what you want, styling and all:
<FontAwesome.Button name="facebook" backgroundColor="#3b5998" onPress={...}>
Sign in with Facebook
</FontAwesome.Button>
<FontAwesome.Button name="twitter" backgroundColor="#1da1f2" onPress={...}>
Sign in with Twitter
</FontAwesome.Button>
What it looks like running in the iOS simulator:
If you're not using Expo, study the source and create a similar component.