Тёмный

Tinder Swiping - “Can it be done in React Native?” 

William Candillon
Подписаться 102 тыс.
Просмотров 36 тыс.
50% 1

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

 

25 окт 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 98   
@zen-ventzi-marinov
@zen-ventzi-marinov 5 лет назад
Love how you're so blown away by the UI and pay no attention to the chicks. A true professional, beautiful.
@wcandillon
@wcandillon 5 лет назад
Haha thank you, I always try 😅
@yaminnather521
@yaminnather521 3 года назад
Don't disrespect the chicks man come on😑
@cicd
@cicd 5 лет назад
Best of RU-vid in terms of advanced react native animations... This is gold.
@wcandillon
@wcandillon 5 лет назад
Thank you, really appreciate it 🙌🏻
@AndresHernandez-ex8rw
@AndresHernandez-ex8rw 6 лет назад
You should do an advanced course of react native , I am very interested in this. 🤩
@wcandillon
@wcandillon 6 лет назад
Andres Hernandez what kind of content in particular are you interested in?
@AndresHernandez-ex8rw
@AndresHernandez-ex8rw 6 лет назад
@@wcandillon I have basic knowledge in `react native`, but I do not understand well the animations, or effects that you can do for a better user experience. Create advanced interfacez, not just boxes with styles. Your videos are very good in this aspect ... I would like to start from the basics to something more advanced.
@mxin
@mxin 6 лет назад
It will be good if you build a production-ready advanced app from the beginning to end
@dimejifaluyi1759
@dimejifaluyi1759 5 лет назад
@@wcandillon I second this. No course out there creates realworld react native app from start to finish with nice UI and animations. I would pay for this.
@souzaramon1348
@souzaramon1348 5 лет назад
@@wcandillon I always break my projects, because gradle stuff, if your course explain the environment concepts, and how dont break things as hell, i just istant buy it
@asheykamp
@asheykamp 5 лет назад
This is really great and helpful. Something that might make it more helpful is a little cleaner code with helper functions, or entire javascript libraries where concerns are separated into different files. Sometimes it was hard to follow along and felt overwhelming when you got into the 100+ lines of code territory.
@paulnettrac1393
@paulnettrac1393 6 лет назад
Nice brother, keep up the good work, you are the most buff programmer I ever saw.
@fabriziobertoglio7342
@fabriziobertoglio7342 5 лет назад
you are an awesome developer !
@wcandillon
@wcandillon 5 лет назад
Thank you, really appreciate it 🙌🏻
@임창수-c7c
@임창수-c7c 5 лет назад
I hope you're going to build other parts of this app too! It's super awesome. Thank you!! If you're going to make a course, plz let us know. I'm definitely going to buy that.
@wcandillon
@wcandillon 5 лет назад
Yes the Tinder app is definitely gonna be revisited again the near future and I'm starting to prepare a React Native course on declarative gestures and animations :)
@wcandillon
@wcandillon 5 лет назад
Thank you for your support! The course is available at start-react-native.dev
@athleticflow758
@athleticflow758 6 лет назад
I love your videos!!! Keep going. Great work!! 🙏🏼
@naishe
@naishe 4 года назад
Hey William, it seems like the code as in this video does not work when start implementing spring functionality. (The spring does not work) I had a look into the repo looks like the Profiles.js has a different flavor of spring and it seems like it does not use velocity. Also, there is a confusing part with velocity `const finalTranslateX = add(translationX, multiply(0.2, velocityX));` Wonder why you needed to swap out the spring function with the new one.
@wcandillon
@wcandillon 4 года назад
You will fix this tutorial much better I think: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-omNyqZKpDIw.html
@naishe
@naishe 4 года назад
@@wcandillon I think I am stuck with Reanimated/Gesture Handler version 1.x, all thanks to React Navigation. :) Which, I think, is hardwired with those libraries.
@pannihto7588
@pannihto7588 4 года назад
Wow, that's some heavy stuff right there
@johnericsanchezsuarez5840
@johnericsanchezsuarez5840 3 года назад
Hi William! First, thank you for your videos, you are really doing a great service 🙌 I want to know if all your videos using reanimated could be follow using the new reanimated 2 or there are some considerations to handle with ? I have to do implement very quickly a tinder-like swiper and i started using the library "react-native-snap-carousel" but it was very awful to achieve this behavior and a lot of android related problems. Thank you! i hope you can answer me :)
@rrahman-h6n
@rrahman-h6n 5 лет назад
Hey William, Awesome tutorial 💖💖💖. Everyday i am learning something new form you. 😃😃. do you have any plan to complete this app? anyway thank you so much for your effort.
@wcandillon
@wcandillon 5 лет назад
I absolutely do! Thank you for your support. To see this video now, it makes me cringe a bit how poorly I implemented it. I was just learning reanimated back them. We will revisit Tinder soon for sure.
@rrahman-h6n
@rrahman-h6n 5 лет назад
@@wcandillon I am very glad to hear that 😄😄😄
@someonlinevideos
@someonlinevideos 5 лет назад
William Candillon I’ll search, but have you revisited this for the remaining animations?? Thanks so much. I plan to make a Tinder for developers (NOT FOR HOOKINH UP) but for finding people that are interested in the same topics to write code with for fun! Would be cool to have that info animation you showed at the beginning for well, info!
@이준형-j7r
@이준형-j7r 5 лет назад
Any plans on custom bottom tab bar or FAB animation? Looking forward to it!
@Deplyn
@Deplyn 4 года назад
It is perfect! but it has a small flaw. When you try to change quickly to another item you have to wait about 2 seconds for the swiper to be activated.
@jasetify
@jasetify 6 лет назад
Hello William, thanks for these insightful React videos. Would you be able to make a video about your Atom editor, how you have setup everything and generally the way you navigate in your Editor? Also installed packages and configuration fo those would be ultra helpful. I am trying to switch from IntelliJ Idea to Atom for React. Thanks in advance and keep up the great videos!
@wcandillon
@wcandillon 6 лет назад
jasetify thanks a lot! I just switched to vscode so I’m quite new
@wcandillon
@wcandillon 6 лет назад
jasetify the theme is palenight operator, and I do find useful to have snippets for boiler compenents
@floodyboy5307
@floodyboy5307 5 лет назад
Super awesome ✌🏼
@wcandillon
@wcandillon 5 лет назад
Thank you 🙋🏼‍♂️
@hariii5898
@hariii5898 5 лет назад
I love your video, btw what do you think about tools like avocode, builderx and framerx ? Which one do you prefer to use ?
@richutrapbands
@richutrapbands 4 года назад
you're the goat bro ty
@Nikku08
@Nikku08 4 года назад
After adding init method I am getting error in android only, Error is " Attempt to invoke virtual method 'boolean java.lang.double.equals(java.lang.Object)' on a null object reference"
@tafelito
@tafelito 6 лет назад
Nicely done! Another one you can try to replicate is the Flipboard app animation, that would be cool if you can do it
@wcandillon
@wcandillon 6 лет назад
Jonathan Tafel woah super 😍 great suggestion thks! you mean the animation to switch categories with the 3d rotate right?
@tafelito
@tafelito 6 лет назад
@@wcandillon Yes! the 3d vertical "Flip"
@kylegillen
@kylegillen 5 лет назад
+1 would love to see this.
@wcandillon
@wcandillon 5 лет назад
@@kylegillen It's happeing next week: twitter.com/wcandillon/status/1097108275202543616 :)
@wcandillon
@wcandillon 5 лет назад
Thank you man, it's happening: twitter.com/wcandillon/status/1097108275202543616
@braScene
@braScene 6 лет назад
Hey Cand, if just finished with this episode, and everything works perfectly except some kind of delay (around 3 seconds) after I swipe one image, so before I can swipe another one I have to wait 3-4 seconds, do you have the same issue? What could be causing this? I've also checked the console.log of 'isLiked' and it really prints with the same delay. (Edited: can this be related somehow with Clocks?)
@wcandillon
@wcandillon 6 лет назад
Well done! I have the same issue, we need to update the source code for the spring animation to stop ealier: github.com/kmagiera/react-native-reanimated/issues/132
@braScene
@braScene 6 лет назад
@@wcandillon I would like to help but... If this anything means to you: while I was developing an iOS app in Swift, I was using the Guillotine menu, and I had to modify its UI and animation so I was playing with animation parameters and have very similar result, after animation was ended (to my eye) it was still bouncing in very tiny portions and caused bad UX, so probably issue is the same here, even I don't know how are you making this in reanimated :) However, I'm glad I didn't mess something xD
@wcandillon
@wcandillon 6 лет назад
I fixed this issue and also fixing some other UX improvements on this tinder example, will keep you posted.
@AndrewKatasonov
@AndrewKatasonov 5 лет назад
@@wcandillon thanks a lot for this awesome video. I'm playing with the source code for this project from Github and I too see a delay of 1-2 sec before the next swipe is possible and the removed card re-appearing for a fraction of a second. Could it be that the code on Github (github.com/wcandillon/can-it-be-done-in-react-native/blob/master/tinder-swiping/components/Profiles.js) is not the latest one (last modified 22nd of Nov 2018)? I have tried playing with restDisplacementThreshold but couldn't get rid of this nasty issue. I'm also curious why would the removed card re-appear briefly. Trying it on a physical iPhone X so performance is not an issue.
@ntrpnr
@ntrpnr 5 лет назад
Since the link for the suggested solution is dead, I solved it the following way: Change the condition before calling swipped to neq(snapPoint, 0). To prevent multiple trigger of the swipped function, add a debounce in this function to make sure it does not fire before a certain amount of time (like 500ms) has passed.
@임창수-c7c
@임창수-c7c 5 лет назад
I wonder why a new card which appear by swiping doesn't move for like a second. I guess it might because i'm running it on an emulator or some bugs? I'm not sure so. When a console log appears, then it starts to move. Object { "likes": true }.
@wcandillon
@wcandillon 5 лет назад
This is because the spring animation is not finished no? Is your code based on the video our on the latest version of the code on Github?
@임창수-c7c
@임창수-c7c 5 лет назад
@@wcandillon I cloned your git repository(can-it-be-done-in-react-native) and just tested it on my cellphone, galaxy8. It still doesn't move for one or two seconds. I just wanted to let you know!
@wcandillon
@wcandillon 5 лет назад
@@임창수-c7c Thank you so much for letting me know and sorry for the inconvenience. I have a new video coming up regarding the Tinder swipe in one week or so, I will look into more closely then. Thank you for you patience.
@임창수-c7c
@임창수-c7c 5 лет назад
@@wcandillon No problem! I'm just so grateful for you and all the contents.
@Thunder-dp7du
@Thunder-dp7du 6 лет назад
Alway Amazing
@wcandillon
@wcandillon 6 лет назад
Woah thks 🙌🏻
@jmmyers8214
@jmmyers8214 6 лет назад
awesome, kinda random but can you do a video on what would be the best way to structure a real-time chat project in RN such as WhatsApp using RN w/ Redux & Redux saga?
@wcandillon
@wcandillon 6 лет назад
JM Myers it’s a bit outside my current scope of focus at the moment but maybe later, thank for the suggestion, they really help!
@jmmyers8214
@jmmyers8214 6 лет назад
@@wcandillon thanks for the reply, keep up with the videos! love this series!
@midnyght
@midnyght 4 года назад
Hey William, first of all thank you so much for all your videos I love them all! Regarding this one, do you think you could update it at some point? It doesn't seem to load/work anymore... Thank you so much!
@mohamadhasan6765
@mohamadhasan6765 4 года назад
Are you sure it doesn't work?
@midnyght
@midnyght 4 года назад
@@mohamadhasan6765 Nope, maybe i was wrong somewhere. Are you able load it on expo.io or make it work?
@akshatjain2222
@akshatjain2222 6 лет назад
Hi William , great videos and immense knowledge youre sharing here . Can you please do one for Crypto Tracker App. Ive been looking for it everywhere and cannot find the proper solution to it . Im sure you can do a quick video of using RN with API calls and rendering graphs . Pretty please . Thanks
@wcandillon
@wcandillon 6 лет назад
Is there an example from an existing crypto app you would like me to look at?
@akshatjain2222
@akshatjain2222 6 лет назад
@@wcandillon Sure , you can have a look at Hodler ? Merci 😃
@wcandillon
@wcandillon 6 лет назад
didn't find it, do you have a link for me?
@akshatjain2222
@akshatjain2222 6 лет назад
@@wcandillon play.google.com/store/apps/details?id=io.jackqack.hodler&hl=en_IE because its only available on Android i guess :(
@southredmondtoxik1885
@southredmondtoxik1885 Год назад
Can we do with expo also?
@hassamyahya3983
@hassamyahya3983 5 лет назад
I am using react-native-cli ... how can i convert expo project into react-native cli??????
@TheRemarkableImages
@TheRemarkableImages 6 лет назад
do you recommend using expo or expoKit ?
@wcandillon
@wcandillon 6 лет назад
Cal Vin expo and of course if you need to detach, then expoKit. even detached, I’m strongly recommending expo
@sweLogan
@sweLogan 6 лет назад
Love it, but plz fix the mic. Do not know how is set up but remove it from the table.
@wcandillon
@wcandillon 6 лет назад
Krister Johansson what do you mean exactly? 🤔
@annakush4665
@annakush4665 6 лет назад
terrific
@soulmansaul
@soulmansaul 6 лет назад
Parfait.
@mibio1852
@mibio1852 5 лет назад
How can I contact you bro?
@wcandillon
@wcandillon 5 лет назад
wcandillon@gmail.com
@Lucas-dd8kf
@Lucas-dd8kf 5 лет назад
tu va en faire en français aussi ?
@DanDeReTo
@DanDeReTo 6 лет назад
Did you get matched? Lol
@wcandillon
@wcandillon 6 лет назад
DanDeReTo 0 matches! 😱
@wcandillon
@wcandillon 6 лет назад
now at least we can build our own dating app where we are the only guys that people can match 😀
@DanDeReTo
@DanDeReTo 6 лет назад
@@wcandillon You should show them your react native skills.. that will win them over :D
@wellerson1833
@wellerson1833 6 лет назад
Theme it vscode?
@wcandillon
@wcandillon 6 лет назад
Wellerson Moreira Palenight Operator
@surajgurung6744
@surajgurung6744 6 лет назад
Can u please do video for wordpress rest api with react natuve for news articles app or ecommerce app
@wcandillon
@wcandillon 6 лет назад
There are no plans for that at the moment, unfortunately.
Далее
Китайка и Красивые Глаза😂😆
00:20
NSURLProtocol: How I Stole an App For My Wedding
56:25
Inspired by MKBHD | Built with Flutter - Panels App
24:24
Liquid Swipe - “Can it be done in React Native?”
49:03
React Native vs Flutter - Which should you use?
22:31
The Most Important Design Pattern in React
35:04
Просмотров 88 тыс.
Китайка и Красивые Глаза😂😆
00:20