#2 Animated Login Screen - Professional Animations in React Native | Reanimated | Gesture Handler

แชร์
ฝัง
  • เผยแพร่เมื่อ 4 ม.ค. 2025

ความคิดเห็น • 59

  • @wanjohi
    @wanjohi 3 ปีที่แล้ว

    It's the eight wonder of the world looking at where Reanimated has come from.
    Most of this is is now implemented internally now, with even better performance in V2.
    As always thank you for your videos.

  • @aaronruiz816
    @aaronruiz816 4 ปีที่แล้ว +5

    I'm a UI/UX designer watching this to learn how animations get implemented after hand-off. This seems extremely complicated for a seemingly simple interaction. Is there not a more intuitive/approachable way to do this? Are there visual builders and animation editors that allow you to do this without writing so much code manually? If so, why aren't they industry standard??

  • @Emperorkovic
    @Emperorkovic 5 ปีที่แล้ว +4

    started adding this to my app. waiting for #3

  • @beckyc.4970
    @beckyc.4970 5 ปีที่แล้ว

    Hello, I really so grateful to do these videos!

  • @codesmart9044
    @codesmart9044 5 ปีที่แล้ว +1

    Sir please keep making this kind of videos this is so helpful i can't even express in word million thanks..

  • @ZiosNeon
    @ZiosNeon 4 ปีที่แล้ว +2

    Please help, how do i do it with functional components, i have it like this
    var Opacity = new Value(1);

    function onStateChange() {
    Animated.event([
    {
    nativeEvent: ({state}) =>
    Animated.block([
    Animated.cond(
    Animated.eq(state, State.END),set(Opacity,runTiming(new Clock(), 1, 0))
    )
    ])
    }
    ]);
    }
    when i tap it doesn't fade away, if i replace
    Animated.eq(state, State.END),set(Opacity,runTiming(new Clock(), 1, 0))
    for
    Animated.eq(state, State.END),set(Opacity.setvalue(0))
    it works but doesn't work when i use the clock.

    • @Sebas_Londo
      @Sebas_Londo 4 ปีที่แล้ว

      Pudiste solucionar??

  • @nguyenvuhuutri3637
    @nguyenvuhuutri3637 4 ปีที่แล้ว

    Must subscribe immediately! Awesome tutorial!

  • @tranlam2162
    @tranlam2162 4 ปีที่แล้ว

    is that runTiming different from Animated.timing() ? can i use Animated.timing() instead ? what the pros and cons between two ? please help me

  • @kevinjairlimaicopanchana131
    @kevinjairlimaicopanchana131 4 ปีที่แล้ว

    como ejecuto el emulador del telefono para ver el progreso en vivo

  • @atinpal8660
    @atinpal8660 5 ปีที่แล้ว +3

    Sir i don't know why or how but the button is not responding to my taps ... I have understood each and every part of the code and typed myself and when it didn't worked i even copied from the source ... But the animation isn't working

    • @pakistanmerijan1212
      @pakistanmerijan1212 5 ปีที่แล้ว +1

      Same question, doesn't seems to working for me on android

    • @pakistanmerijan1212
      @pakistanmerijan1212 5 ปีที่แล้ว +1

      Just confirmed, not working android but working on IOS

    • @ubannadan-ekeh7781
      @ubannadan-ekeh7781 5 ปีที่แล้ว +1

      see solution here - stackoverflow.com/questions/58015248/tapgesturehandler-not-triggering-onhandlerstatechange

    • @covidcoder
      @covidcoder 5 ปีที่แล้ว

      ​@@ubannadan-ekeh7781 you saved my hours thanks

    • @MarceloSilva-co2hm
      @MarceloSilva-co2hm 4 ปีที่แล้ว

      @@ubannadan-ekeh7781 where i have to put this fix?

  • @akarshs9552
    @akarshs9552 5 ปีที่แล้ว +2

    Can you make one video on animation on splash screen?

  • @TheRobotinator
    @TheRobotinator 5 ปีที่แล้ว

    Can you create the animation value in a parent component en give that value to a child component to use? My app doesn't start when I try this

  • @Nanda-ho5eh
    @Nanda-ho5eh 4 ปีที่แล้ว

    for Es 6 what can we do

  • @MISAKI-jd3iv
    @MISAKI-jd3iv 5 ปีที่แล้ว

    this video is so helpful! thank you and waiting for next videos :D

  • @victorighalo
    @victorighalo 5 ปีที่แล้ว

    I got this error Invariant Violation: Invariant Violation: Native driven events only support animated values contained inside `nativeEvent`.

  • @josephorji8331
    @josephorji8331 3 ปีที่แล้ว

    is there a way you can help? this doesn't work anymore

  • @tziortziskyprianou2725
    @tziortziskyprianou2725 5 ปีที่แล้ว +1

    awesome once again

  • @GoeHybrid
    @GoeHybrid 5 ปีที่แล้ว

    This is a very helpful video, thank you! Nevertheless, it raises the question, is there any way to make animations in react-native more concise?

  • @usupsuparma
    @usupsuparma 4 ปีที่แล้ว

    why doesn't work on new react-native-gesture-handler and react-native-reanimated?

    • @Bite-Size-Tech
      @Bite-Size-Tech 3 ปีที่แล้ว

      same here... stuck now... trying to find a work around

  • @aleks6331
    @aleks6331 5 ปีที่แล้ว

    Very nice!

  • @npaul1440
    @npaul1440 5 ปีที่แล้ว

    I like your videos really much

  • @Danilo1993456
    @Danilo1993456 5 ปีที่แล้ว +4

    Could You show this example without expo ? , please

    • @giu_codea
      @giu_codea 4 ปีที่แล้ว

      I made this video without expo (RN 0.61.5) and you should only install the react-native-gesture-handler and react-native-reanimated libraries as indicated in the documentation of both.

  • @andrisladuzans7607
    @andrisladuzans7607 4 ปีที่แล้ว

    how to do it in Functional Component?

  • @marciogrecioyt
    @marciogrecioyt 5 ปีที่แล้ว

    very nice!!!!!

  • @PeterAVazquez
    @PeterAVazquez 5 ปีที่แล้ว

    Great video tutorials! Are you available for hire on a per project basis?

    • @UnsureProgrammer
      @UnsureProgrammer  5 ปีที่แล้ว

      Thanks Peter you can dm me on Twitter @nathvarun

    • @PeterAVazquez
      @PeterAVazquez 5 ปีที่แล้ว

      @@UnsureProgrammer Thank you. I will do that for sure. Thank you for quick response!

  • @leolima8585
    @leolima8585 5 ปีที่แล้ว

    Why from 'expo' 'and not in from 'react-native'?
    I not like of the study with expo, emulator in virtual device or smartphone myself,
    note zero for video class

    • @giu_codea
      @giu_codea 4 ปีที่แล้ว

      I made this video without expo (RN 0.61.5) and you should only install the react-native-gesture-handler and react-native-reanimated libraries as indicated in the documentation of both.

  • @yafiecake
    @yafiecake 4 ปีที่แล้ว +2

    pls make a series for responsive react native app pls T^T

  • @atakpuikhide45
    @atakpuikhide45 5 ปีที่แล้ว

    Using it on my app too

  • @yusufbasori9841
    @yusufbasori9841 5 ปีที่แล้ว

    is it work for android?

    • @peacemaker4969
      @peacemaker4969 5 ปีที่แล้ว

      i tried with a device and didn't work

  • @fsociety692
    @fsociety692 4 ปีที่แล้ว

    bro need help about react native ?????????????/

  • @aminbashanfar1914
    @aminbashanfar1914 4 ปีที่แล้ว

    if you can explain more what you do is gonna be better because I feel that you are just making it works but don't know why, overall great job

    • @UnsureProgrammer
      @UnsureProgrammer  4 ปีที่แล้ว

      Hey amin. Thanks. Any specific parts you could point out that need more clarification ?

    • @aminbashanfar1914
      @aminbashanfar1914 4 ปีที่แล้ว

      @@UnsureProgrammer about the animated library and reanimated I didn't get how they work

    • @UnsureProgrammer
      @UnsureProgrammer  4 ปีที่แล้ว

      @@aminbashanfar1914 Yep it does have a learning curve and the docs aren't very beginner friendly. Maybe watching this will clear some more things up : th-cam.com/video/aoENL4gF9rE/w-d-xo.html

  • @viricel01
    @viricel01 5 ปีที่แล้ว

    🙏

  • @praveenpaulvijayan6282
    @praveenpaulvijayan6282 3 ปีที่แล้ว

    thanks i did not buy this course from udemy

  • @Unmaleable
    @Unmaleable 4 ปีที่แล้ว

    LOL man this does not work anymore. I will just read the documentation to find out issue. Thank you. I still like your videos!!

    • @darryl_young
      @darryl_young 4 ปีที่แล้ว

      Hey. Did you figure out how to get it working again? Please let me know if you did. Thanks!

    • @Unmaleable
      @Unmaleable 4 ปีที่แล้ว

      ​@@darryl_young Yes I figured it out which part is not working for you?

    • @giu_codea
      @giu_codea 4 ปีที่แล้ว +1

      I performed it today and it works perfectly

    • @Unmaleable
      @Unmaleable 4 ปีที่แล้ว

      @@giu_codea Oh. I did not build it exactly the same. I customized it but used the 3 extra for other components of the screen

    • @darryl_young
      @darryl_young 4 ปีที่แล้ว

      @@Unmaleable I figured it out but thanks anyway. Like you, I was customising it and had an issue with that.