CODEWITHSUNDEEP
react-native
kasperite
kasperite

Reputation: 2478

TouchOpacity does not cover whole menu link

I just started using react-native so sorry if it's a trivial question.

I'm trying to create a sidebar with multiple links in it. The sidebar works fine but the issue is with the links themselves. Below is the jsx for the link. 

  <TouchableOpacity style={MenuItemStyles.ItemWrapper} onPress={this.props.onPress}>
    <View style={MenuItemStyles.itemIcon}>
      <Icon
        name={this.props.iconName}
        size={this.props.size || 30}
        color={Colours.LightGrey}
        />
    </View>
    <Text style={MenuItemStyles.itemLabel}>
      {this.props.label}
    </Text>
  </TouchableOpacity>

And the style:

const MenuItemStyles = StyleSheet.create({
  ItemWrapper: {
    flexDirection: 'row',
    alignSelf: 'stretch',
    marginTop: 10,
    width: 100,
    marginBottom: 10
  },
  itemIcon: {
    alignItems: 'center',
    alignSelf: 'center',
    width: 80,
  },
  itemLabel: {
    color: '#000000',
    fontSize: 20,
    fontFamily: 'sans-serif-light',
    textAlign: 'center',
    marginLeft: 5,
  }
});

The link contains an icon(Material style), follows by the label. The onPress event is registered correctly. However the click area size is very small ie onPress only triggers when pressing on the icon, not the label. I would assume TouchableOpacity covers all nested component?Can I control how wide TouchableOpacity cover?

Thanks

Upvotes: 2

Views: 472

Answers (1)

Maxwelll
Maxwelll

Reputation: 2212

Wrap your <TouchableOpacity/>component in view that has the style you are curenttly assigning on TouchableOpacity like this <View style={MenuItemStyles.ItemWrapper}>

and by adding flex:1 on the <TouchableOpacity/> component it will inherit the size of the <View>

heres a working example of what I think you are trying to accomplish with the solution above implemented:

https://rnplay.org/apps/SW983Q

Upvotes: 1

Related Questions