Swipe-to-Delete List Item UI in React Native (Free)

दरअसल swipe-to-delete list item UI बनाते समय सबसे ज़रूरी बात है: list के किसी item को बाएँ/दाएँ swipe करने पर साफ़ action (delete, archive) दिखे, gesture smooth लगे, और गलती से delete न हो जाए। यह एक छोटा सा pattern है पर हर अच्छी list वाली app में काम आता है: inbox, notes, cart, tasks। इस micro-interaction को सही बनाना सीखकर अपनी हर list बेहतर की जा सकती है, और VP0 इसे free design से शुरू करना आसान बनाता है।

अच्छा swipe action क्यों मायने रखता है

swipe-to-delete तेज़ है, पर ख़तरा यह है कि user गलती से कुछ delete कर दे। इसलिए delete को साफ़ रंग (लाल) और icon दीजिए, और delete के बाद एक ‘undo’ का छोटा रास्ता रखिए ताकि गलती सुधर सके। ऐसी lists दोनों themes में दिखती हैं, और एक survey में करीब 82% users ने dark mode पसंद बताया, इसलिए swipe background और icons दोनों themes में साफ़ रखिए। Apple की gesture guidance भी कहती है कि destructive actions साफ़ और सोच-समझकर रखिए। structure से यही साफ़गी और सुरक्षा सीखनी है।

VP0 से swipe list item की बात करें तो

VP0 एक free iOS / React Native design library है। तरीका सीधा है: एक list design चुनिए, link copy कीजिए और Cursor या Claude Code से code बनाइए। हर list item को एक Swipeable में रखिए (react-native-gesture-handler के Swipeable या Reanimated से), बाएँ swipe पर delete (लाल), दाएँ पर archive जैसा action। swipe smooth और थोड़ा resistance के साथ हो, पूरी तरह खींचने पर ही action चले या button tap पर। delete के बाद एक toast में ‘undo’। फिर colours अपने कर दीजिए।

swipe-to-delete के core हिस्से

नीचे इस micro-interaction के ज़रूरी हिस्से और हर हिस्से में सीखने लायक बात है।

हिस्सा	सीखने लायक बात
Swipe gesture	smooth, थोड़ा resistance
Delete action	लाल, साफ़ icon
Secondary action	archive/pin दाएँ swipe
Undo	delete के बाद छोटा रास्ता
States	खाली list भी साफ़ दिखे

एक practical उदाहरण

मान लीजिए एक notes या inbox list में swipe-to-delete चाहिए। VP0 से एक list design चुनिए, link copy करके Cursor से React Native code बनाइए: हर item को Swipeable में रखिए, बाएँ swipe पर एक लाल delete button, पूरा खींचने पर delete, और एक toast में ‘undo’ (कुछ सेकंड)। दाएँ swipe पर archive। animation हल्की और भरोसेमंद रखिए। ऐसी list वाली एक असली जगह है mock test का review section, उसका context Testbook SSC mock test timer UI में देखें, और list के खाली होने पर क्या दिखाएँ इसके लिए empty state illustrations mobile app देखें।

कुछ बातें इस pattern को सच में बेहतर बनाती हैं। destructive (delete) को कभी सिर्फ़ हल्के swipe पर मत चलाइए, या तो पूरा खींचना पड़े या button tap, ताकि गलती न हो। हर swipe action का साफ़ icon और रंग रखिए ताकि user बिना सोचे समझे। accessibility के लिए swipe के साथ-साथ एक सामान्य button रास्ता भी रखिए (long-press menu), क्योंकि सब swipe आराम से नहीं कर पाते। swipe खुलने पर एक हल्का haptic feedback दीजिए ताकि user को साफ़ पता चले कि action तैयार है, यह छोटी सी बात अनुभव को काफ़ी polished बनाती है। और delete के बाद undo देना भरोसा बढ़ाता है। चूँकि आप design से शुरू कर रहे हैं, इन बातों को साफ़-साफ़ जोड़ना आसान रहता है।

आम गलतियाँ

सबसे आम गलती है हल्के से swipe पर ही delete कर देना, जिससे गलती से data उड़े; पूरा खींचना या tap ज़रूरी रखिए। दूसरी गलती है undo न देना, delete के बाद सुधार का रास्ता रखिए। तीसरी गलती है delete को साफ़ रंग/icon न देना, उसे लाल और स्पष्ट रखिए। चौथी गलती है सिर्फ़ swipe रखना और कोई दूसरा रास्ता न देना, accessibility के लिए button/menu भी रखिए। पाँचवीं गलती है भारी, अटकती animation, उसे smooth रखिए।

आख़िर में, एक अच्छे swipe-to-delete की कामयाबी तेज़ी और सुरक्षा के संतुलन में है। structure सीखकर, undo और accessibility के साथ, VP0 से free design लेकर अपनी list में smooth, सुरक्षित swipe actions जोड़े जा सकते हैं, जो पूरी तरह आपके अपने हों।

मुख्य बातें

• swipe-to-delete की जान तेज़ी और सुरक्षा का संतुलन है: साफ़ delete पर undo का रास्ता।
• एक survey में करीब 82% users ने dark mode पसंद बताया, इसलिए swipe background/icons दोनों themes में साफ़ रखिए।
• destructive action पूरा खींचने या tap पर चलाइए, और accessibility के लिए button/menu रास्ता भी दीजिए।
• VP0 free है: एक list design लेकर अपने items में swipe actions बनाइए।

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

swipe-to-delete list item UI को लेकर सबसे ज़्यादा यही पूछा जाता है: free कैसे बनाएँ, गलती से delete कैसे रोकें, और किससे बनाएँ। छोटा सा निचोड़: structure सीखिए, VP0 से free design लेकर react-native-gesture-handler के Swipeable से smooth swipe actions बनाइए, delete को लाल और पूरा-खींचने पर रखिए, undo दीजिए, accessibility के लिए button/menu भी रखिए, और एक मौलिक, सुरक्षित list interaction तैयार कीजिए।