f5792c40be
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
78 lines
1.8 KiB
Markdown
78 lines
1.8 KiB
Markdown
---
|
|
title: Use Native Modals Over JS-Based Bottom Sheets
|
|
impact: HIGH
|
|
impactDescription: native performance, gestures, accessibility
|
|
tags: modals, bottom-sheet, native, react-navigation
|
|
---
|
|
|
|
## Use Native Modals Over JS-Based Bottom Sheets
|
|
|
|
Use native `<Modal>` with `presentationStyle="formSheet"` or React Navigation
|
|
v7's native form sheet instead of JS-based bottom sheet libraries. Native modals
|
|
have built-in gestures, accessibility, and better performance. Rely on native UI
|
|
for low-level primitives.
|
|
|
|
**Incorrect (JS-based bottom sheet):**
|
|
|
|
```tsx
|
|
import BottomSheet from 'custom-js-bottom-sheet'
|
|
|
|
function MyScreen() {
|
|
const sheetRef = useRef<BottomSheet>(null)
|
|
|
|
return (
|
|
<View style={{ flex: 1 }}>
|
|
<Button onPress={() => sheetRef.current?.expand()} title='Open' />
|
|
<BottomSheet ref={sheetRef} snapPoints={['50%', '90%']}>
|
|
<View>
|
|
<Text>Sheet content</Text>
|
|
</View>
|
|
</BottomSheet>
|
|
</View>
|
|
)
|
|
}
|
|
```
|
|
|
|
**Correct (native Modal with formSheet):**
|
|
|
|
```tsx
|
|
import { Modal, View, Text, Button } from 'react-native'
|
|
|
|
function MyScreen() {
|
|
const [visible, setVisible] = useState(false)
|
|
|
|
return (
|
|
<View style={{ flex: 1 }}>
|
|
<Button onPress={() => setVisible(true)} title='Open' />
|
|
<Modal
|
|
visible={visible}
|
|
presentationStyle='formSheet'
|
|
animationType='slide'
|
|
onRequestClose={() => setVisible(false)}
|
|
>
|
|
<View>
|
|
<Text>Sheet content</Text>
|
|
</View>
|
|
</Modal>
|
|
</View>
|
|
)
|
|
}
|
|
```
|
|
|
|
**Correct (React Navigation v7 native form sheet):**
|
|
|
|
```tsx
|
|
// In your navigator
|
|
<Stack.Screen
|
|
name='Details'
|
|
component={DetailsScreen}
|
|
options={{
|
|
presentation: 'formSheet',
|
|
sheetAllowedDetents: 'fitToContents',
|
|
}}
|
|
/>
|
|
```
|
|
|
|
Native modals provide swipe-to-dismiss, proper keyboard avoidance, and
|
|
accessibility out of the box.
|