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 ?

Sample Buttons with Icons

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

score 57 · Accepted Answer · edited Jul 02 '17 at 01:56

57

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>

edited Jul 02 '17 at 01:56

Donald Duck

8,409
22
75
99

answered Jun 03 '15 at 19:24

Sean Zhao

1,506
12
12

4

I use TouchableOpacity like this: `{}} ` – Dan Apr 03 '16 at 23:21
For the react-native-vector-icons, it seems that the Icon does not manage the children. The Text element should be outside, just after the Icon and not inside. – jlguenego Jan 23 '22 at 11:22

score 12 · Answer 2 · answered May 26 '15 at 03:13

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>

Hey @msqar, it's been almost 2 years since I had tried again the above code. You can post an edit if you like ;) Back then it worked, now things can be different. — Piyush Chauhan, May 22 '17 at 04:40
Yea, im still struggling to make it look good T_T why something so simple is gets this hard? hahaha — msqar, May 22 '17 at 04:41

vhs · Answer 3 · 2019-12-02T00:08:41.690

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.

How to model a button with icons in react-native

3 Answers3