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>
1.8 KiB
1.8 KiB
title, impact, impactDescription, tags
| title | impact | impactDescription | tags |
|---|---|---|---|
| Use Native Modals Over JS-Based Bottom Sheets | HIGH | native performance, gestures, accessibility | 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):
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):
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):
// 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.