Тёмный

Swipeable Guesture Handlers // React Native & Firebase Todo App // Part #6 

DesignIntoCode
Подписаться 17 тыс.
Просмотров 13 тыс.
50% 1

Get notified about my upcoming Instagram clone course! www.instaclone... - In the final video of this series, we will be implementing swipeable gesture handlers to add swipe to delete functionality to each todo!
💥 Save TIME with a custom TEXT component!
/ custom-reusable-47843654
If you enjoyed this video please consider supporting me on Patreon! / designintocode
💾Source Code
bit.ly/2RKDKfe
Part #1 - Setting up and Displaying Lists // • Setting Up and Display...
Part #2 - Modal for Adding Lists + Color Picker // • List Modal & Color Pic...
Part #3 - Passing Props to the Todo Modal // • Passing Props to the T...
Part #4 - Updating State + Adding/Creating Tasks // • Updating State & Addin...
Part #5 - Connecting with Firebase Cloud Firestore // • Firebase Setup & Conne...
Part #6 - Swipeable Gesture Handlers // • Swipeable Guesture Han...
❤️ Subscribe for awesome videos! bit.ly/2KZU1ds
✅Building a React Native + Firebase Social App
• React Native + Firebas...
✅Taking Designs and Turning them Into Code
• Music Player screen UI...
✅Awesome React Native Videos!
• React Native LOGIN SCR...
Follow me!
Twitter: bit.ly/2MdnXBX
Software Used:
VSCode, React Native, Expo
#reactnative #reactnativeui #reactfirebase

Опубликовано:

 

10 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 82   
@DesignIntoCode
@DesignIntoCode 4 года назад
I have a course coming out on building an Instagram clone from scratch using React Native & Firebase, make sure you sign up to get discounts, release date info and sample chapters! www.instaclone.app
@DesignIntoCode
@DesignIntoCode 4 года назад
Hey I hope everyone enjoyed this series! Please leave a like if you did! Let me know your suggestions on what you'd like to see in the next series!
@mohammedsulthana9305
@mohammedsulthana9305 4 года назад
1.Course subscription app with payment gateway 2. Loan app with payment gateway 3. Food booking app with live tracking and payments
@mohammedsulthana9305
@mohammedsulthana9305 4 года назад
Anyway thanku for this awesome series ❤️
@fazalrehman4090
@fazalrehman4090 4 года назад
Instagram or Twitter or any food delivery app clone
@leonardogomes7677
@leonardogomes7677 4 года назад
How to delete the lists?
@brenohenrique3507
@brenohenrique3507 4 года назад
Update e delete lists? Not implements
@unknownman1
@unknownman1 4 года назад
*First of all I wanna thank u for this amazing project. I'm using this as my final year minor project. I'm testing this project on my android phone and I've fixed all swipeable issues with delete icon and added deletion option for main todos. If you want I can create a short video for your followers who are finding difficulty with Android* Thanks
@thesage86
@thesage86 4 года назад
Did u create a video for deleting main todos? if yes can u share the link please?
@gurpreetbains9196
@gurpreetbains9196 3 года назад
hello unknown mam i am also using this in my final year project can you send me the apk and source code of android version , I would be very thankful of you
@Denis-fc2sv
@Denis-fc2sv 4 года назад
Great content! Please keep doing it! It's really helps.
@KeevinMitchell
@KeevinMitchell 4 года назад
Absolutely Awesome!!
@fayekalvirahmanjaki9897
@fayekalvirahmanjaki9897 3 года назад
Hi @DesignIntoCode . please help me in some thing. I followed your steps until now but when i try to define firebase inside 'componentDidMount' it said 'cant find variable firebase'. it fixed after i used var/const before firebase. but on 2:30 while addin addList and updateList i get the same error 'cant find variable firebase'. what should i do? please help
@CSCoreDecoded
@CSCoreDecoded 3 года назад
wow awesome, i loved it !!!
@alexvan1346
@alexvan1346 4 года назад
this is a cool one! works good on iphone. creates new users automatically on the database side as well! tried testing on android with gf phone through expo app. delete swipe didn't work. also, lots of warnings. did not have a chance to look at them in detail.
@larslpshorts5655
@larslpshorts5655 4 месяца назад
how do i add login with E-Mail and Password?
@infernodeep
@infernodeep 4 года назад
Great tutorial!! Loved it. One thing didn't work for me. Swipeable did not work inside Modal. Any suggestions?
@user-vk6te2eb4p
@user-vk6te2eb4p 4 года назад
thanks!!
@lukmansefriyanto6545
@lukmansefriyanto6545 4 года назад
sir why my swipeable not work on android??
@_aarav87
@_aarav87 4 года назад
Same problem here. Do you have any solution?
@scaj3104
@scaj3104 4 года назад
Are there any apps you have created? Could you please let me know?
@caioricciuti
@caioricciuti 4 года назад
deleteList = (item) => { let list = this.props.list; this.state.lists.splice(item, 1); this.props.updateList(list); }; I'm trying to delete lists, but I can't... what im doing wrong? Thanks, awesome content!
@arshadmohamed7818
@arshadmohamed7818 4 года назад
Yes u can delete list add this method to Fire.js deleteList(list){ let ref = this.ref; ref.doc(list.id).delete() } this method in App.js deleteList = list => { firebase.deleteList(list); }; and pass it to TodoList renderList = list => { return }; in todolist on Touchable Opacity u can do this onLongPress={() => this.props.deleteList(list) so once any todolist is long pressed it will be deleted Hope this helps
@leonardogomes803
@leonardogomes803 4 года назад
@@arshadmohamed7818 Arshad, where the renderList in the TodoList component will be passed?
@caioricciuti
@caioricciuti 4 года назад
@@arshadmohamed7818 Great solution I just implemented and works! Thanks for your time!
@arshadazaad3573
@arshadazaad3573 4 года назад
@@caioricciuti Great. No problem
@arshadazaad3573
@arshadazaad3573 4 года назад
@@leonardogomes803 u don't have to pass render List follow each step above and it will work Sorry for the late reply
@muthukumar8009
@muthukumar8009 4 года назад
want more content on cross platform and animation. much appreciated.
@alfonsolasa2495
@alfonsolasa2495 4 года назад
Great video! Can you make a video explaining interpolate plis? Thanks!!
@muthukumar8009
@muthukumar8009 4 года назад
Great Stuff, Loved it. Are there more updates coming on this? such as deleting the list overall, edit the list name or edit the todo name.
@DesignIntoCode
@DesignIntoCode 4 года назад
This is the final video, I left those things out so you’d be able to work through them yourself :)
@EmreKaradumanTV
@EmreKaradumanTV 4 года назад
What is the VS Code theme name?
@exlntsoftwarellc4287
@exlntsoftwarellc4287 4 года назад
@DesignIntoCode - Great videos and series, I have learned so much!! I am trying to implement the swipeable exactly like you did in your video. But its not working at all on my android emulator. The swipe is not working at all. I found a lot of GitHub issues listed for this, so not sure if those apply or is something I am missing?
@DesignIntoCode
@DesignIntoCode 4 года назад
It does seem like swipeable isn’t working correctly on android. I use mainly iOS, so I don’t have a lot of experience with it to tell you why, but if you find some GitHub issues/solutions, use those!
@exlntsoftwarellc4287
@exlntsoftwarellc4287 4 года назад
@@DesignIntoCode Thanks for the prompt reply! Yeah there is an open issue on GITHUB. The suggested fixes did not work for me. I implemented a simple icon delete button on each row of my list.
@DesignIntoCode
@DesignIntoCode 4 года назад
I’ve found that basically everything in react native works with iOS, but a lot of things to work the same or correctly in android, and you’ll need to use some kind of workaround. An icon is a great alternative!
@XDataScience
@XDataScience 3 года назад
@@exlntsoftwarellc4287 can you tell me how you did it
@filipemarques2470
@filipemarques2470 4 года назад
Hey, thanks for all your tutorials! =) I'm having a problem in this one. The swipeable gestures are not working on android. Any guess? Thanks
@DesignIntoCode
@DesignIntoCode 4 года назад
What’s not working?
@filipemarques2470
@filipemarques2470 4 года назад
@@DesignIntoCode The swipeable gestures. The text doesn't swipe and show the button. Everything are working fine on Ios.
@nivekdreamman3834
@nivekdreamman3834 4 года назад
@@filipemarques2470 I have the same prob. I thought i made a mistake but no. Any solution please?
@georgeluisferminmartinez341
@georgeluisferminmartinez341 4 года назад
I'm having the same issue here, isn't working with the modal in android, any solutions?
@leonardogomes803
@leonardogomes803 4 года назад
Did anyone get it? Not working here
@noamkanonich1678
@noamkanonich1678 4 года назад
Great video. Two comments: 1. It will be awesome if you will show us how to delete not just a todo but also a whole list. 2. There is a possibility that the swipeable guesture are not working on android ? Thanks! You are awesome!
@DesignIntoCode
@DesignIntoCode 4 года назад
Why no try to tackle the first one yourself as a learning project?
@arshadmohamed7818
@arshadmohamed7818 4 года назад
Yes u can delete list add this method to Fire.js deleteList(list){ let ref = this.ref; ref.doc(list.id).delete() } this method in App.js deleteList = list => { firebase.deleteList(list); }; and pass it to TodoList renderList = list => { return }; in todolist on Touchable Opacity u can do this onLongPress={() => this.props.deleteList(list) so once any todolist is long pressed it will be deleted Hope this helps
@ChloeeeWardie
@ChloeeeWardie 3 года назад
@@arshadmohamed7818 hii this doesn’t work for me
@gabriellramos6643
@gabriellramos6643 2 года назад
@@arshadmohamed7818 God!!
@henrymosqueradev
@henrymosqueradev 4 года назад
Puedes crear tus app con componentes funcionales.
@leonardogomes7677
@leonardogomes7677 4 года назад
How to delete the lists? AWESOME series
@DesignIntoCode
@DesignIntoCode 4 года назад
Pretty much the same way you delete todos, just pass in the list id instead of the todo id
@leonardogomes7677
@leonardogomes7677 4 года назад
@@DesignIntoCode Great!
@arshadmohamed7818
@arshadmohamed7818 4 года назад
Yes u can delete list add this method to Fire.js deleteList(list){ let ref = this.ref; ref.doc(list.id).delete() } this method in App.js deleteList = list => { firebase.deleteList(list); }; and pass it to TodoList renderList = list => { return }; in todolist on Touchable Opacity u can do this onLongPress={() => this.props.deleteList(list) so once any todolist is long pressed it will be deleted Hope this helps
@leonardogomes7677
@leonardogomes7677 4 года назад
@@arshadmohamed7818 Thanks! I will try it. Thanks A lot!!!!!!
@arshadazaad3573
@arshadazaad3573 4 года назад
@@leonardogomes7677 Np
@maftuhsangiba2401
@maftuhsangiba2401 4 года назад
need tutorial to delete the todo list
@unknownman1
@unknownman1 4 года назад
actually it is not that difficult. Just take the id and filter out those ids which don't match the existing or selected id into a new array
Далее
Neumorphism (Soft UI) in React Native
16:08
Просмотров 32 тыс.
Hotel View - Travel App UI with React Native #1
42:24
React Native FlatList Animations
17:22
Просмотров 146 тыс.
React Native Gestures
28:46
Просмотров 37 тыс.
Using ASYNC STORAGE w/React Native & Expo
10:45
Просмотров 32 тыс.