🔴 Login & SignUp UI in React Native Reanimated | React Native Projects | Beginners Tutorial

Sdílet
Vložit
  • čas přidán 12. 06. 2024
  • Hello everyone 👋, today we are going to make an Onboarding UI with cool animations with the help of react native reanimated 3.0. You will learn about adding cool animations in your react native app. Make sure you like this video and subscribe the channel for more react native videos.
    🚀 Source Code: links.codewithnomi.com/signIn...
    🏞️ Assets: drive.google.com/uc?export=do...
    Add TailwindCSS in React Native : • Add Tailwind CSS In Yo...
    Add Navigation in React Native : • Food Delivery App with...
    If you appreciate my work and you would like to support my channel: www.buymeacoffee.com/syednoman
    🚨 more videos on react native:
    Food Recipe App : • 🔴 Build Food Recipe Ap...
    Movie App : • 🔴 Build Movie App Usin...
    Onboarding UI with Lottie Animations: • 🔴 Onboarding UI with L...
    AI Voice Assistant with ChatGPT & DALL-E : • 🔴 Build a React Native...
    Travel App UI : • 🔴 Travel App UI | Reac...
    Weather App : • 🔴 Build Weather App Us...
    Coffee App UI : • 🔴 Coffee App UI - Reac...
    Food Delivery App : • 🔴 Build Food Delivery ...
    CZcams Clone App: • 🔴 CZcams Clone - Reac...
    Login | SignUp UI : • 🔴 Login | SignUp UI - ...
    Fast Food App : • 🔴 Fast Food App UI - R...
    App Store UI : • 🔴 App Store UI - React...
    Fruit Shop UI : • 🔴 Fruit Shop UI - Reac...
    Firebase Authentication React Native: • React Native Firebase ...
    Food Delivery App : • Food Delivery App with...
    Learn React Native: • Build Expensify App Wi...
    Learn Reactjs: • Modern React For Begin...
    #expo #reactnative #tailwindcss #javascript #programming #typescript #speedcode #coding #design #appdevelopment #reactjs #ui #uiux #reactnavigation #reactnativetutorial #react #animation #reactjs #navigation #navigationbar #uidesign #mobiledevelopment #iosdeveloper #buildinpublic #opensource #reactnativeapp #reactjstutorial #typescript
    react native animations
    animations in react native
    react native tutorial
    react native app
    react native tutorial for beginners
    react native project
    react native course
    react native login
    react native login ui
    react native signup
    react native onboarding
    react native apps
    react native animations
    reanimated 3.0
    animations
    ios app
    ▬▬▬▬ Contents of this video ▬▬▬▬▬▬▬▬▬▬
    00:00 - Intro
    00:44 - Create App
    03:35 - Add Tailwindss
    06:19 - Add Navigation
    08:20 - Login UI
    14:16 - Add Animations
    18:40 - SignUp UI
    19:56 - Final Demo

Komentáře • 66

  • @jhonestiwarrodriguezcorrea6663
    @jhonestiwarrodriguezcorrea6663 Před 9 měsíci +1

    Great, congratulations, these animations add a luxurious experience. 👏🏽

  • @ErnestoBalanzar
    @ErnestoBalanzar Před 9 měsíci

    these videos are pure gold! thank you so much!

  • @chokeslam1996
    @chokeslam1996 Před 9 měsíci

    These videos are so good! Well done!!

  • @alexandrepeyrichout5053
    @alexandrepeyrichout5053 Před 2 měsíci +1

    Well done thanks mate

  • @GerardoBarriosA
    @GerardoBarriosA Před 7 měsíci

    Thanks for the tut... it was so helpful

  • @manueldelacruz4709
    @manueldelacruz4709 Před 4 měsíci

    Great video master!!

  • @Victor-wh9bs
    @Victor-wh9bs Před 8 měsíci

    ThankU. great explanation.

  • @davidhombe2313
    @davidhombe2313 Před 9 měsíci

    Amazing video my friend keep on !😍😍😍

  • @sunilkrishna2783
    @sunilkrishna2783 Před 7 měsíci

    Amazing videos, great explanation

  • @surendharsmsn327
    @surendharsmsn327 Před měsícem

    Very good CZcams channel for react native tutorials. Thank you sir

  • @ibrahimabayo6581
    @ibrahimabayo6581 Před 8 měsíci

    Thank you

  • @inamulhasans9461
    @inamulhasans9461 Před 9 měsíci

    Great 🎉

  • @hariprasatht9082
    @hariprasatht9082 Před 8 měsíci

    thanks bro

  • @rinchararinchara
    @rinchararinchara Před 8 měsíci

    @codewithnomi I tried the same way you have done, but the tailwind property is not working in my app.

  • @notsurprised1537
    @notsurprised1537 Před 3 měsíci

    Had an issue while using tailwind to style the main view container.
    For some reason the image didn’t display properly on my screen

  • @shahhussain5563
    @shahhussain5563 Před 7 měsíci

    Please make a full series on React Reanimated.

  • @yuvrajsingh-vi7ow
    @yuvrajsingh-vi7ow Před 7 měsíci

    after seting up tailwindcss libe by line, this className is not working, basically no error but doesn't reflecting any changes pleaae help

  • @rajat-s-kale1771
    @rajat-s-kale1771 Před 4 měsíci

    awesome video and also make a video on how to deploy apps on playstore and app store , it will make more impact on your channel also , coz you explain things in much easier way thats y

  • @wilsonbryne7
    @wilsonbryne7 Před 9 měsíci

    ❤❤❤

  • @user-qu4he7bo6p
    @user-qu4he7bo6p Před měsícem

    is it responsive with keyoard opne?

  • @bayunugroho788
    @bayunugroho788 Před 9 měsíci

    sir, can u make expo use TS?

  • @haidarDevDiary
    @haidarDevDiary Před 9 měsíci

    Animation ❤

  • @reck1esscxv
    @reck1esscxv Před 9 měsíci

    Hello, I'm building this one on android. I've followed the entire instructions and everything works fine. The only issue I had is the slide transition in the Navigation, it doesn't complete the animation. May I have an idea on what could be the problem?

    • @phurba895
      @phurba895 Před 6 měsíci

      hi can you share me the code

  • @coctyg7209
    @coctyg7209 Před 6 měsíci +1

    Haven't tried yet, but i think it will mess the whole design when you open the keyboard

  • @KerimKaraman28
    @KerimKaraman28 Před 8 měsíci

    Hello sir, do you share your design somewhere?

  • @siddhantshelake2928
    @siddhantshelake2928 Před 8 měsíci

    how to customize apps recent screen in android

  • @top5deals
    @top5deals Před 9 měsíci

    I almost done everything everything is fine but when i click on the input text so all the elements are collapse just in android
    ALso use every thing like the Keyboard avoiding tool

  • @chokeslam1996
    @chokeslam1996 Před 9 měsíci

    Great video! Have you Would you ever been able to create an Instagram story clone?

  • @FaceMask-tx2vp
    @FaceMask-tx2vp Před 9 měsíci +2

    Kindly Redo it With React Native CLI Please

  • @thesportswonk1
    @thesportswonk1 Před 4 měsíci

    Hi, I'm facing issue that when I back to previous screen, animation doesn't work. can you please help to resolve it.

    • @diogoveiga5341
      @diogoveiga5341 Před 2 měsíci

      i am also having this problem, did you manage to fix it?

  • @raja_zain2k
    @raja_zain2k Před 9 měsíci

    When I navigate further and comeback to this screen, there is no animation.Nomi Bhai how can i make sure animation happens everytime i navigate to login screen?

    • @codewithnomi
      @codewithnomi  Před 9 měsíci

      trying reanimating using useFocuse() hook

  • @AnkitKumar-cu9ic
    @AnkitKumar-cu9ic Před 3 měsíci

    Why you charged for the source code ? It would be better for us if you can give it as openly.

  • @AvinashSinh07
    @AvinashSinh07 Před 8 měsíci

    where to find this kind of background images for login and signup forms

  • @bartoflo7381
    @bartoflo7381 Před 5 měsíci

    When I click on an input it does not focus on the input in question (so I do not see what I enter with the keyboard) and it moves the elements of my screen, can you explain to me how to solve this problem please :)

    • @codewithnomi
      @codewithnomi  Před 5 měsíci

      This issue is related to the keyboard avoiding view, I'm working on a video series where I'll explain how to fix this 😉

    • @bartoflo7381
      @bartoflo7381 Před 5 měsíci

      @@codewithnomi Ok thanks you I am waiting for that

  • @Am-rr8hu
    @Am-rr8hu Před 9 měsíci

    Can you do video how to use Firebase for login and signup in react native

    • @codewithnomi
      @codewithnomi  Před 9 měsíci

      czcams.com/video/idPGWpVLHP0/video.html

  • @cwcfunclock2709
    @cwcfunclock2709 Před 7 měsíci

    Can you show us how to do authentication with Login and Sign up?

    • @codewithnomi
      @codewithnomi  Před 7 měsíci

      czcams.com/video/idPGWpVLHP0/video.html

  • @Dihrybak
    @Dihrybak Před 22 dny

    Do u have account on fiver ? I’m looking for someone to build my project ..

    • @codewithnomi
      @codewithnomi  Před 22 dny

      You can contact me here: codewithnomi.dev@gmail.com

  • @insane54812
    @insane54812 Před 9 měsíci

    Sir tailwind is not working in 3.3.2 version also

    • @codewithnomi
      @codewithnomi  Před 9 měsíci

      its working perfectly fine as you can see in the video 🤨

    • @insane54812
      @insane54812 Před 9 měsíci

      @@codewithnomi sir in my system it is not working 😮‍💨

  • @Bkbois
    @Bkbois Před 9 měsíci

    Can you expo router in your next project

  • @shivamjha.56
    @shivamjha.56 Před 9 měsíci

    Hi bro i have a doubt i have created a cli weather app in react native , i want to publish it , but it takes money on playstore to publish it , i want the recruiter to see it live , just like we have netlify and vercel in react js , is there any same thing in react native where i can publish my app for free and share link so that it can be viewed by recruiters

    • @codewithnomi
      @codewithnomi  Před 9 měsíci +1

      just build the apk, upload it somewhere and share the file link.
      you can save it on google drive 😉

  • @Aromatv4733
    @Aromatv4733 Před 5 měsíci

    splash screen

  • @user-pc5hz5zu2e
    @user-pc5hz5zu2e Před 4 měsíci

    1545

  • @ubaidullahkhan7829
    @ubaidullahkhan7829 Před 3 měsíci +1

    bhai koi material to free de dety atleast images e

    • @codewithnomi
      @codewithnomi  Před 3 měsíci

      I've added the assets in the video description, thanks for pointing it out 😉

  • @thecommenter5086
    @thecommenter5086 Před 2 měsíci

    Bro change your title to react native using Tailwind.
    Not only 'react native ' , because if you use tailwind then it is no longer react native.

  • @prakharsinha6915
    @prakharsinha6915 Před 6 měsíci +4

    Please use CLI and not expo

    • @Ronaldo-de5tn
      @Ronaldo-de5tn Před 3 měsíci

      Why what is reason behind it

    • @ibrahimkouma6751
      @ibrahimkouma6751 Před 3 měsíci +3

      What is wrong with Expo? Expo is stable and does everything that React Native CLI does. People tend to say weird things about Expo without even trying. We have our application fully built with Expo, with over 50k MAU, and everything is working fine. No issues; the team is super productive.

    • @prakharsinha6915
      @prakharsinha6915 Před 3 měsíci

      @@ibrahimkouma6751 thanks for the insights!

  • @oberlordan6373
    @oberlordan6373 Před 11 dny

    👎👎👎👎