How to model a button with icons in a reactor

Question

I use the react-native-icons package to include button icons. They have sample code provided in the sample folder . I am trying to achieve onPress in a view, but it turns out that response-native does not have an onPress function for the <View> component.

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

I also tried using <Text> with <Icon> and <Text> inside, but <Text> can only contain <Text> .

Is anyone really lucky with 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 use the react-native-icons module, you can try wrapping both icons and text in a view, and then use TouchableHighlight on top of This. Sort of:

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

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

 <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>