Difference between Touchables from react-native and react-native-gesture-handler

by

Both of react-native and react-native-gesture-handler provide Touchables (TouchableOpacity, TouchableHighlight, etc).

What is the difference between the Touchables from both packages?
Any detailed explanation would be appreciated.

14 thoughts on “Difference between Touchables from react-native and react-native-gesture-handler”

  1. In a practical egsample TouchableOpacity from RNGH can be used in loop and we will be able to identify each object in a loop uniquely(for eg:to get keyId of an element in a loop) but we use the other touchableOpacity from react-native this cant be done

    in this code snippet each time slot card can be uniquly identified and everytime selected function is called it will be populated by a different value(this touchableOpacity is imported from RNGC)

    <FlatGrid
      itemDimension={80}
      data={timeslots}
      spacing={8}
      renderItem={({ item }) => (
        <View >
            <TouchableOpacity onPress={()=>{selected(item);}}>
        <TimeslotCard name={item.slot} />
        </TouchableOpacity>
        </View> )}
/>
    Reply

  2. I think the description on their docs is very useful:

    Gesture Handler library provides an implementation of RN’s touchable
    components that are based on native buttons and does not rely on JS
    responder system utilized by RN. Our touchable implementation follows
    the same API and aims to be a drop-in replacement for touchables
    available in React Native.

    The motivation for using RNGH touchables as a replacement for these
    imported from React Native is to follow built-in native behavior more
    closely by utilizing platform native touch system instead of relying
    on the JS responder system. These touchables and their feedback
    behavior are deeply integrated with native gesture ecosystem and could
    be connected with other native components (e.g. ScrollView) and
    Gesture Handlers easily and in a more predictable way, which follows
    native apps’ behavior.

    https://docs.swmansion.com/react-native-gesture-handler/docs/component-touchables

    So if you are on the native side (not web) it’s better to use Touchables from RNGH. Maybe they will include the new pressable component from RN soon.

    Reply

  3. Your answer let me to get rid of bugs with Flatlist and TouchableWithoutFeedback usage simultaneously. When I used TouchableWithoutFeedback with onLongPressed sometimes it did not detect long pressed. Then I changed import from react-native to RNGH and it is fixed. So I recommend using RNGH when you need to use TouchableWithoutFeedback inside a Flatlist in RN.

    Reply

Leave a Comment