Cursor rule

1---
2alwaysApply: false
3---
4 
5## Use Native Modals Over JS-Based Bottom Sheets
6 
7Use native `<Modal>` with `presentationStyle="formSheet"` or React Navigation
8v7's native form sheet instead of JS-based bottom sheet libraries. Native modals
9have built-in gestures, accessibility, and better performance. Rely on native UI
10for low-level primitives.
11 
12**Incorrect (JS-based bottom sheet):**
13 
14```tsx
15import BottomSheet from 'custom-js-bottom-sheet'
16 
17function MyScreen() {
18  const sheetRef = useRef<BottomSheet>(null)
19 
20  return (
21    <View style={{ flex: 1 }}>
22      <Button onPress={() => sheetRef.current?.expand()} title='Open' />
23      <BottomSheet ref={sheetRef} snapPoints={['50%', '90%']}>
24        <View>
25          <Text>Sheet content</Text>
26        </View>
27      </BottomSheet>
28    </View>
29  )
30}
31```
32 
33**Correct (native Modal with formSheet):**
34 
35```tsx
36import { Modal, View, Text, Button } from 'react-native'
37 
38function MyScreen() {
39  const [visible, setVisible] = useState(false)
40 
41  return (
42    <View style={{ flex: 1 }}>
43      <Button onPress={() => setVisible(true)} title='Open' />
44      <Modal
45        visible={visible}
46        presentationStyle='formSheet'
47        animationType='slide'
48        onRequestClose={() => setVisible(false)}
49      >
50        <View>
51          <Text>Sheet content</Text>
52        </View>
53      </Modal>
54    </View>
55  )
56}
57```
58 
59**Correct (React Navigation v7 native form sheet):**
60 
61```tsx
62// In your navigator
63<Stack.Screen
64  name='Details'
65  component={DetailsScreen}
66  options={{
67    presentation: 'formSheet',
68    sheetAllowedDetents: 'fitToContents',
69  }}
70/>
71```
72 
73Native modals provide swipe-to-dismiss, proper keyboard avoidance, and
74accessibility out of the box.
75