/react-native-skills

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.