Bottom Sheet Modal UI Template (React Native)

React Native में एक साफ़ “bottom sheet modal” बनाने का मतलब है: एक panel जो नीचे से ऊपर आए, drag से अलग heights पर रुके, aur drag-down ya backdrop tap से बंद हो जाए। इसके ज़रूरी हिस्से हैं handle, snap points, backdrop aur safe-area handling। एक ready template का सबसे तेज़ free रास्ता है VP0 से एक मिलता-जुलता native design चुनना और link copy करके Cursor ya Claude Code से code बनाना।

bottom sheet कब use करें

bottom sheet तब अच्छा है जब action हल्का हो aur पीछे का context न टूटे: filters, sort, share, quick details ya एक छोटा form। इससे user को लगता है कि वह उसी screen पर है। भारी, full-attention task (जैसे multi-step checkout) के लिए full-screen modal बेहतर रहता है। Apple के Human Interface Guidelines में sheets का यही फ़र्क समझाया गया है।

एक अच्छे bottom sheet के हिस्से

• handle: ऊपर एक छोटी grabber रेखा, जो बताए कि इसे drag किया जा सकता है।
• snap points: peek, half aur full जैसी साफ़ heights, gesture से बीच में रुके।
• backdrop: पीछे हल्का dim, tap करने पर sheet बंद।
• drag-to-dismiss: नीचे drag करने पर smooth बंद, velocity के हिसाब से।
• safe area aur keyboard: notch aur home indicator का सम्मान, keyboard खुलने पर content न छिपे।

इसके लिए सबसे common रास्ता है gorhom react-native-bottom-sheet, जो Reanimated पर gesture-driven, smooth animation देता है।

snap points एक नज़र में

नीचे आम snap points aur उनका इस्तेमाल है।

Snap point	कब
Peek	झलक, जैसे map पर जगह की summary
Half	filters, share, quick details
Full	लंबा form ya पूरी list

एक practical उदाहरण

मान लीजिए एक grocery app में filters का sheet चाहिए। VP0 में एक bottom sheet design चुनिए, link copy करके Cursor से React Native code बनाइए: gorhom sheet में handle, snap points (half aur full), backdrop tap-to-close, aur drag-to-dismiss। अंदर filters का form रखिए, keyboard खुलने पर content ऊपर खिसके। हर state साफ़ रखिए, खाली filters aur slow apply भी। animation Reanimated से smooth aur UI-thread पर रखिए ताकि कभी jank न हो।

sheet के अंदर scroll

अगर sheet के अंदर एक लंबी list ya form है, तो आम ScrollView/FlatList का scroll aur sheet का drag आपस में लड़ते हैं: user scroll करना चाहे तो sheet नीचे खिसक जाता है। इसका हल है library का अपना scroll component इस्तेमाल करना (जैसे gorhom का BottomSheetFlatList ya BottomSheetScrollView), जो gesture को सही बाँटता है। list ऊपर पहुँचने पर नीचे drag sheet को बंद करे, बीच में drag list को scroll करे। इससे scroll aur dismiss दोनों natural लगते हैं aur कोई gesture conflict नहीं होता।

accessibility aur keyboard

sheet हमेशा आसानी से बंद होना चाहिए: drag-down, backdrop tap aur एक close button, तीनों रास्ते दीजिए। focus sheet के अंदर सही रखिए ताकि screen reader भटके नहीं। tap targets कम-से-कम 44 pt रखिए। reduce-motion on हो तो slide animation घटाइए। आम तौर पर apps की day-1 retention सिर्फ़ 25% होती है, aur एक jank भरा ya न बंद होने वाला sheet user को तुरंत भगा देता है। keyboard-safe layout का तरीका keyboard safe area avoiding UI (React Native) में, aur gesture list pattern swipe-to-delete list item UI में देखिए।

आम गलतियाँ

सबसे आम गलती है sheet को बंद करने का साफ़ रास्ता न देना, drag, backdrop aur close, तीनों रखिए। दूसरी गलती है safe area को नज़रअंदाज़ करना, content home indicator के नीचे छिप जाता है। तीसरी गलती है keyboard खुलने पर sheet का content ढक जाना, layout ऊपर खिसकाइए। चौथी गलती है JS thread पर भारी animation, इससे jank आता है, Reanimated से UI-thread पर रखिए।

मुख्य बातें

• bottom sheet हल्के, context-preserving actions के लिए है; भारी task full modal में।
• ज़रूरी हिस्से: handle, snap points, backdrop, drag-to-dismiss aur safe-area/keyboard।
• हमेशा dismissible aur accessible रखिए; 44 pt targets aur reduce-motion का सम्मान।
• VP0 free है: एक design लेकर gorhom + Reanimated पर अपना sheet बनाइए।

आगे पढ़िए: एक chat screen में input के ऊपर actions का sheet कैसे बैठे, देखिए ChatGPT API wrapper chatbot mobile UI।

अक्सर पूछे जाने वाले सवाल

React Native bottom sheet modal free में कैसे बनाएँ?

VP0 से शुरू कीजिए। एक bottom sheet वाला native design चुनिए, link copy करके Cursor ya Claude Code से React Native code बनाइए, gorhom bottom-sheet aur Reanimated पर। यह free aur native है, इसलिए पहला और सबसे अच्छा starting point है।

bottom sheet कब use करें, full modal कब?

जब action हल्का हो aur context न टूटे, जैसे filters, share, ya quick details, तब bottom sheet अच्छा है। भारी, full-attention task के लिए full-screen modal बेहतर रहता है।

bottom sheet में सबसे ज़रूरी क्या है?

एक handle, साफ़ snap points (peek/half/full), drag-to-dismiss, backdrop, aur safe-area तथा keyboard handling। sheet हमेशा आसानी से बंद होना चाहिए।

bottom sheet को accessible कैसे बनाएँ?

dismiss का साफ़ रास्ता दीजिए (drag, backdrop tap, close button), focus sheet के अंदर सही रखिए, tap targets कम-से-कम 44 pt, aur reduce-motion on हो तो animation घटाइए।