Building an Apple Wallet Clone with React Native Reanimated

แชร์
ฝัง
  • เผยแพร่เมื่อ 27 พ.ค. 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: 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

  • @asharamegowda
    @asharamegowda หลายเดือนก่อน

    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
      @notjustdev  หลายเดือนก่อน

      Thank you very much. Hearing this message is the best reward for our work 🙌

  • @frankdearr2772
    @frankdearr2772 หลายเดือนก่อน

    great topic, thanks 👍

  • @Bianchi77
    @Bianchi77 หลายเดือนก่อน

    Nice info,thanks :)

  • @masterj1081
    @masterj1081 หลายเดือนก่อน

    Good job 👍

  • @Dabayare
    @Dabayare หลายเดือนก่อน

    Did any of you had errors from the the way the card filenames have a space?

  • @pirateben
    @pirateben หลายเดือนก่อน

    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

  • @luhsteppa8392
    @luhsteppa8392 หลายเดือนก่อน

    can you compile this into an app and make it available

    • @notjustdev
      @notjustdev  หลายเดือนก่อน

      You can find the full source code of the app in the description

  • @nehat786
    @nehat786 2 หลายเดือนก่อน

    Please do include skia in your upcoming course

    • @veedjohnson
      @veedjohnson หลายเดือนก่อน

      Reanimated is very powerful

  • @minidragonlady
    @minidragonlady หลายเดือนก่อน

    What is your VScode theme?

  • @vinhandev
    @vinhandev หลายเดือนก่อน

    tks for sharing keep it up