Building an Apple Wallet Clone with React Native Reanimated
Ғылым және технология
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: ti.to/appjs/2024/discount/not...
🏷️ Use notjustdevs10 for 10% off
✅ Project Page: www.notjust.dev/projects/appl...
✨ Asset Bundle: assets.notjust.dev/apple-wallet
💻 Source Code: github.com/notJust-dev/AppleW...
❗Try our FREE 2-day Masterclass on notJust.Academy: 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:
academy.notjust.dev/?...
💡 Have an idea for a future tutorial? Share it on our Idea Board: 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
Пікірлер: 15
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!
@notjustdev
Ай бұрын
Thank you very much. Hearing this message is the best reward for our work 🙌
great topic, thanks 👍
Nice info,thanks :)
Good job 👍
Did any of you had errors from the the way the card filenames have a space?
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
can you compile this into an app and make it available
@notjustdev
Ай бұрын
You can find the full source code of the app in the description
Please do include skia in your upcoming course
@veedjohnson
Ай бұрын
Reanimated is very powerful
What is your VScode theme?
tks for sharing keep it up