CODEWITHSUNDEEP
javascriptreact-native
michael
michael

Reputation: 4173

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

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.

Upvotes: 18

Views: 11542

Answers (3)

Archimedes Trajano
Archimedes Trajano

Reputation: 41750

One key difference between React Native Gesture Handler's Touchables vs the React Native versions is that React Native Gesture Handler's Touchables do not nest correctly. So if you have a "card" that has actions but also a touch anywhere else for default behaviour. You will get into issues.

One advantage of RNGH is ther TapGesture allow for better detection of scrolling through "cards" so it does not trigger animations while swiping. Pressable classifies this as unstable_pressDelay and is not available in Expo as of SDK 42.

In addition the API between React Native Gesture Handler vs the Touchables are not 1:1. There's a few nuances that are only highlighted when you're using TypeScript.

So for better future proofing, it's actually better to stick with React Native's Pressable API for typical behaviours. However, if you need some specific low level control or non-standard gestures like swiping then use RNGH.

Upvotes: 6

navaneeth001
navaneeth001

Reputation: 99

In a practical example, TouchableOpacity from RNGH can be used in a 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> )}
/>

Upvotes: 1

Arbnor
Arbnor

Reputation: 2362

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.

Upvotes: 11

Related Questions