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