1---
2title: Use Pressable Instead of Touchable Components
3impact: LOW
4impactDescription: modern API, more flexible
5tags: ui, pressable, touchable, gestures
6---
7 
8## Use Pressable Instead of Touchable Components
9 
10Never use `TouchableOpacity` or `TouchableHighlight`. Use `Pressable` from
11`react-native` or `react-native-gesture-handler` instead.
12 
13**Incorrect (legacy Touchable components):**
14 
15```tsx
16import { TouchableOpacity } from 'react-native'
17 
18function MyButton({ onPress }: { onPress: () => void }) {
19  return (
20    <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
21      <Text>Press me</Text>
22    </TouchableOpacity>
23  )
24}
25```
26 
27**Correct (Pressable):**
28 
29```tsx
30import { Pressable } from 'react-native'
31 
32function MyButton({ onPress }: { onPress: () => void }) {
33  return (
34    <Pressable onPress={onPress}>
35      <Text>Press me</Text>
36    </Pressable>
37  )
38}
39```
40 
41**Correct (Pressable from gesture handler for lists):**
42 
43```tsx
44import { Pressable } from 'react-native-gesture-handler'
45 
46function ListItem({ onPress }: { onPress: () => void }) {
47  return (
48    <Pressable onPress={onPress}>
49      <Text>Item</Text>
50    </Pressable>
51  )
52}
53```
54 
55Use `react-native-gesture-handler` Pressable inside scrollable lists for better
56gesture coordination, as long as you are using the ScrollView from
57`react-native-gesture-handler` as well.
58 
59**For animated press states (scale, opacity changes):** Use `GestureDetector`
60with Reanimated shared values instead of Pressable's style callback. See the
61`animation-gesture-detector-press` rule.
62