oblador / react-native-vector-icons

Customizable Icons for React Native with support for image source and full styling.
https://oblador.github.io/react-native-vector-icons/
MIT License
17.44k stars 2.12k forks source link

Support `hitSlop` prop for pressable icons. (?) #1301

Open chrisbobbe opened 3 years ago

chrisbobbe commented 3 years ago

E.g., if I'm using Material Design, icons should be 24dp square, while touch targets should be at least 48dp square.

Icon components already take an onPress prop.

Without being able to give the icon component a hitSlop prop of 12dp on all sides (or any value), I have to wrap the component with, e.g., a Pressable or a TouchableHighlight component that I can pass hitSlop to, along with onPress. It's mildly cumbersome, and I'm not using Icon.Button because its interface ("A convenience component for creating buttons with [text, and] an icon on the left side") isn't really what I'm looking for (it comes with some default color and layout styles that go beyond the idea of just a "pressable icon").

Since icon components are implemented with Text, and Text components don't take a hitSlop prop, possibly the answer is that...React Native should either remove Text's onPress prop, or let Text take hitSlop. 🙂

But I wanted to post this here in case the maintainers wanted to give their thoughts on the question.

chrisbobbe commented 3 years ago

Without being able to give the icon component a hitSlop prop of 24dp (or any value), I have to wrap the component with, e.g., a Pressable or a TouchableHighlight component that I can pass hitSlop to, along with onPress

And perhaps I should just do this. I could make a convenience component of my own, that does this.