Building an Apple Wallet Clone with React Native Reanimated
6,182
Published 2024-03-29
This video is sponsored by App.js Conf - the best React Native conference.
Grab a ticket and let's meet in Poland, on 22-24th May: ti.to/appjs/2024/discount/notjustdevs10
🏷️ Use notjustdevs10 for 10% off
✅ Project Page: www.notjust.dev/projects/apple-wallet
✨ Asset Bundle: assets.notjust.dev/apple-wallet
💻 Source Code: github.com/notJust-dev/AppleWallet
❗Try our FREE 2-day Masterclass on notJust.Academy: assets.notjust.dev/masterclass/?utm_source=youtube…
📚 We'll design the User Interface from scratch, implement swipe gestures and add animations to our app using Reanimated. This video provides you with an excellent opportunity to learn about:
- Setting up your React Native environment
- Introduction to React Native Reanimated
- Designing the card interface
- Implementing swipe gestures
- Adding animation to card transitions
- Managing state with React hooks
- Testing and debugging
📚 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/?utm_source=youtube&utm_medium…
💡 Have an idea for a future tutorial? Share it on our Idea Board: github.com/orgs/notJust-dev/discussions
💬 Join the notJust Development gang and let's build together:
Twitter: twitter.com/VadimNotJustDev
Instagram: www.instagram.com/VadimNotJustDev
Facebook: www.facebook.com/notjustdev
LinkedIn: www.linkedin.com/in/vadimsavin
Discord: discord.gg/VpURUN2
Timecodes:
0:00 Intro
3:39 Setting Up a New Expo Project
12:11 Building the UI: Cards List Component
20:38 Rendering a List of Card Images
23:14 Implementing Scroll with Reanimated & Gesture Handler
30:18 Detecting Pan Gestures
37:40 Tracking Scroll Position
1:12:58 Stacking Cards on Scroll
1:24:10 Selecting Cards Animation
1:59:04 Outro
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 #applewallet #reactnative
All Comments (11)
-
Hi Vadim, this is fantastic! In fact, all the tutorials on your channel are a delight to follow. I was someone who wasn't that much interested in app development but this channel made me truly try my hands on some. Thanks & wish you even more success!
-
great topic, thanks 👍
-
Nice info,thanks :)
-
Good job 👍
-
im new to this all and also get babel war when setting up new apps what are they and how do i fix them if i need to
-
Did any of you had errors from the the way the card filenames have a space?
-
Please do include skia in your upcoming course
-
What is your VScode theme?
-
can you compile this into an app and make it available
-
tks for sharing :hand-pink-waving: keep it up
