Building an Apple Wallet Clone with React Native Reanimated
notJustā€¤dev notJustā€¤dev
110K subscribers
5,805 views
0

 Published On Streamed live on Mar 29, 2024

Let's build Apple Wallet using React Native, React Native Reanimated and Gesture Handler

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: https://ti.to/appjs/2024/discount/not...
šŸ·ļø Use notjustdevs10 for 10% off

āœ… Project Page: https://www.notjust.dev/projects/appl...
āœØ Asset Bundle: https://assets.notjust.dev/apple-wallet
šŸ’» Source Code: https://github.com/notJust-dev/AppleW...

ā—Try our FREE 2-day Masterclass on notJust.Academy: https://assets.notjust.dev/masterclas...

šŸ“š 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:
https://academy.notjust.dev/?utm_sour...

šŸ’” Have an idea for a future tutorial? Share it on our Idea Board: https://github.com/orgs/notJust-dev/d...

šŸ’¬ Join the notJust Development gang and let's build together:
Twitter: Ā Ā /Ā vadimnotjustdevĀ Ā 
Instagram: Ā Ā /Ā vadimnotjustdevĀ Ā 
Facebook: Ā Ā /Ā notjustdevĀ Ā 
LinkedIn: Ā Ā /Ā vadimsavinĀ Ā 
Discord: Ā Ā /Ā discordĀ Ā 

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

show more

Share/Embed