singular-particular-space/skills/react-native-skills/rules/ui-pressable.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
Use Pressable Instead of Touchable Components	LOW	modern API, more flexible	ui, pressable, touchable, gestures

Use Pressable Instead of Touchable Components

Never use TouchableOpacity or TouchableHighlight. Use Pressable from react-native or react-native-gesture-handler instead.

Incorrect (legacy Touchable components):

import { TouchableOpacity } from 'react-native'

function MyButton({ onPress }: { onPress: () => void }) {
  return (
    <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
      <Text>Press me</Text>
    </TouchableOpacity>
  )
}

Correct (Pressable):

import { Pressable } from 'react-native'

function MyButton({ onPress }: { onPress: () => void }) {
  return (
    <Pressable onPress={onPress}>
      <Text>Press me</Text>
    </Pressable>
  )
}

Correct (Pressable from gesture handler for lists):

import { Pressable } from 'react-native-gesture-handler'

function ListItem({ onPress }: { onPress: () => void }) {
  return (
    <Pressable onPress={onPress}>
      <Text>Item</Text>
    </Pressable>
  )
}

Use react-native-gesture-handler Pressable inside scrollable lists for better gesture coordination, as long as you are using the ScrollView from react-native-gesture-handler as well.

For animated press states (scale, opacity changes): Use GestureDetector with Reanimated shared values instead of Pressable's style callback. See the animation-gesture-detector-press rule.