Cursor rule

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