Tinder Swipe Animation in React Native and Expo | DEVember Day 6

Day 6 of #DEVember is all about exploring exciting animations with React Native and Expo using Reanimated. Today, we're replicating the iconic Tinder Swipe Animation! We'll design the User Interface for the Tinder-like app, building smooth swipe animations, and customizing them using the powerful Reanimated library!
🌟DEVember Day 6: www.notjust.dev/projects/deve...
If you have ideas of features, topics or apps you would like me to cover during #DEVember, you can submit them on our 💡Idea Board:
github.com/notJust-dev/DEVemb...
📚 Today's Agenda:
- Designing the Tinder UI in React Native
- Building the Basic Swipe Animation
- Advanced Techniques with Reanimated
- Customizing the Swipe Animation
- Handling User Interaction and Gestures
- Integrating the Animation with App Logic
- Recap and Q&A
❗Try our FREE 4-day Masterclass on notJust.Academy:
assets.notjust.dev/masterclas...
📚 Enroll NOW in The Full-Stack Mobile Developer course and don’t miss out on your chance to become a 6-figure dev! Check out what our successful students are saying about their experience:
academy.notjust.dev/?...
💬 Join the notJust Development gang and let's build together:
Twitter: / vadimnotjustdev
Instagram: / vadimnotjustdev
Facebook: / notjustdev
LinkedIn: / vadimsavin
Discord: / discord
Disclaimer: This build is for educational purposes only. All views, opinions, and technology choices expressed in this video are my own and do not represent the views, opinions, or technology choices of any entity I have been, am now, or will be affiliated with.
#notjustdev #ReactNative

[@novaardiansyah6254]

Catalyn, you are very brilliant in my opinion. It's extraordinary when you compile program code using only your head and not a machine. Truly brilliant, I salute your broad way of thinking.

[@harryviennot5114]

Great video, this is exactly what I needed ! Thank you so much

[@notjustdev]

You're so welcome!

[@moutairoubastouabdel5342]

thank you Great video from west africa Benin republic

[@notjustdev]

Appreciate it!

[@perrousky]

thank you both so much!

[@amani_art]

This is great. Any repo link? I would love to explore this further. Thanks in advance

[@sahiljaidka6657]

Does it not remove the element from state after swipe left or right?

[@sahiljaidka6657]

I am updating the state
setCars((prevCars) => {
if (prevCars) {
const newCars = [...prevCars];
newCars.splice(index, 1);
return newCars;
}
return prevCars;
});
this seem right?

[@sahiljaidka6657]

ran your code on iPad to double check we are translating X it to -500 or 500 so for larger screens that's a problem, this always stays in the DOM, isn't that wrong?

[@zenobiusztasak8604]

I love this lagging

[@oneafrodev]

didn't enjoy it at all

[@helloadhaL]

wtf is wrong with thw source code bro

[@notjustdev]

What do you mean? Here it is: github.com/notJust-dev/DEVember/tree/day6-end