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

Поделиться
HTML-код
  • Опубликовано: 25 июн 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 ...
    RUclips Clone App: • 🔴 RUclips 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

Комментарии • 66

  • @jhonestiwarrodriguezcorrea6663
    @jhonestiwarrodriguezcorrea6663 9 месяцев назад +2

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

  • @ErnestoBalanzar
    @ErnestoBalanzar 9 месяцев назад +1

    these videos are pure gold! thank you so much!

  • @chokeslam1996
    @chokeslam1996 9 месяцев назад

    These videos are so good! Well done!!

  • @GerardoBarriosA
    @GerardoBarriosA 8 месяцев назад

    Thanks for the tut... it was so helpful

  • @davidhombe2313
    @davidhombe2313 9 месяцев назад

    Amazing video my friend keep on !😍😍😍

  • @alexandrepeyrichout5053
    @alexandrepeyrichout5053 3 месяца назад +1

    Well done thanks mate

  • @manueldelacruz4709
    @manueldelacruz4709 4 месяца назад

    Great video master!!

  • @Victor-wh9bs
    @Victor-wh9bs 8 месяцев назад

    ThankU. great explanation.

  • @sunilkrishna2783
    @sunilkrishna2783 8 месяцев назад

    Amazing videos, great explanation

  • @surendharsmsn327
    @surendharsmsn327 Месяц назад

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

  • @inamulhasans9461
    @inamulhasans9461 9 месяцев назад

    Great 🎉

  • @ibrahimabayo6581
    @ibrahimabayo6581 8 месяцев назад

    Thank you

  • @hariprasatht9082
    @hariprasatht9082 9 месяцев назад

    thanks bro

  • @rinchararinchara
    @rinchararinchara 8 месяцев назад

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

  • @rajat-s-kale1771
    @rajat-s-kale1771 4 месяца назад

    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

  • @haidarDevDiary
    @haidarDevDiary 9 месяцев назад

    Animation ❤

  • @shahhussain5563
    @shahhussain5563 8 месяцев назад

    Please make a full series on React Reanimated.

  • @notsurprised1537
    @notsurprised1537 4 месяца назад

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

  • @wilsonbryne7
    @wilsonbryne7 9 месяцев назад

    ❤❤❤

  • @yuvrajsingh-vi7ow
    @yuvrajsingh-vi7ow 7 месяцев назад

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

  • @bayunugroho788
    @bayunugroho788 9 месяцев назад

    sir, can u make expo use TS?

  • @coctyg7209
    @coctyg7209 6 месяцев назад +1

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

  • @user-qu4he7bo6p
    @user-qu4he7bo6p 2 месяца назад

    is it responsive with keyoard opne?

  • @KerimKaraman28
    @KerimKaraman28 8 месяцев назад

    Hello sir, do you share your design somewhere?

  • @reck1esscxv
    @reck1esscxv 9 месяцев назад

    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 6 месяцев назад

      hi can you share me the code

  • @siddhantshelake2928
    @siddhantshelake2928 9 месяцев назад

    how to customize apps recent screen in android

  • @FaceMask-tx2vp
    @FaceMask-tx2vp 9 месяцев назад +2

    Kindly Redo it With React Native CLI Please

  • @top5deals
    @top5deals 9 месяцев назад

    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

    • @codewithnomi
      @codewithnomi  9 месяцев назад +1

      sure, will keep in mind next time

  • @thesportswonk1
    @thesportswonk1 4 месяца назад

    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 2 месяца назад

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

  • @chokeslam1996
    @chokeslam1996 9 месяцев назад

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

  • @AnkitKumar-cu9ic
    @AnkitKumar-cu9ic 3 месяца назад

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

  • @raja_zain2k
    @raja_zain2k 9 месяцев назад

    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  9 месяцев назад

      trying reanimating using useFocuse() hook

  • @AvinashSinh07
    @AvinashSinh07 8 месяцев назад

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

  • @cwcfunclock2709
    @cwcfunclock2709 7 месяцев назад

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

    • @codewithnomi
      @codewithnomi  7 месяцев назад

      ruclips.net/video/idPGWpVLHP0/видео.html

  • @Am-rr8hu
    @Am-rr8hu 9 месяцев назад

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

    • @codewithnomi
      @codewithnomi  9 месяцев назад

      ruclips.net/video/idPGWpVLHP0/видео.html

  • @bartoflo7381
    @bartoflo7381 5 месяцев назад

    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  5 месяцев назад

      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 5 месяцев назад

      @@codewithnomi Ok thanks you I am waiting for that

  • @Dihrybak
    @Dihrybak Месяц назад

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

    • @codewithnomi
      @codewithnomi  Месяц назад

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

  • @insane54812
    @insane54812 9 месяцев назад

    Sir tailwind is not working in 3.3.2 version also

    • @codewithnomi
      @codewithnomi  9 месяцев назад

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

    • @insane54812
      @insane54812 9 месяцев назад

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

  • @Bkbois
    @Bkbois 9 месяцев назад

    Can you expo router in your next project

  • @shivamjha.56
    @shivamjha.56 9 месяцев назад

    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  9 месяцев назад +1

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

  • @Aromatv4733
    @Aromatv4733 5 месяцев назад

    splash screen

  • @thecommenter5086
    @thecommenter5086 3 месяца назад

    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.

  • @user-pc5hz5zu2e
    @user-pc5hz5zu2e 4 месяца назад

    1545

  • @ubaidullahkhan7829
    @ubaidullahkhan7829 4 месяца назад +1

    bhai koi material to free de dety atleast images e

    • @codewithnomi
      @codewithnomi  4 месяца назад

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

  • @prakharsinha6915
    @prakharsinha6915 6 месяцев назад +4

    Please use CLI and not expo

    • @Ronaldo-de5tn
      @Ronaldo-de5tn 4 месяца назад

      Why what is reason behind it

    • @ibrahimkouma6751
      @ibrahimkouma6751 4 месяца назад +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 4 месяца назад

      @@ibrahimkouma6751 thanks for the insights!

  • @oberlordan6373
    @oberlordan6373 24 дня назад

    👎👎👎👎