React Native Countdown Timer Animation with FlatList and Animated API

Поділитися
Вставка
  • Опубліковано 5 лис 2024

КОМЕНТАРІ • 88

  • @TheCodingOdyssey
    @TheCodingOdyssey 3 роки тому +1

    Hello from another romanian guy and thanks for this video. Studying React Native for my job at the moment.

    • @CatalinMironDev
      @CatalinMironDev  3 роки тому

      Hi 🇷🇴 I’m glad that you choose my channel to learn React Native animations . Thanks ✌️

    • @TheCodingOdyssey
      @TheCodingOdyssey 3 роки тому

      @@CatalinMironDev perfect videos to learn from.

  • @oliver1231033
    @oliver1231033 3 роки тому

    The TextInput trick is really useful since useState don’t really work with animation that well, solved one of my problem thank you

  • @sujatagunale7079
    @sujatagunale7079 3 роки тому +4

    As always, masterpiece .. Your "My way of doing" thing is totally the best .. Please don't stop uploading videos , keep us animated with your knowledge 😍❤️

    • @CatalinMironDev
      @CatalinMironDev  3 роки тому

      Thanks a lot Sujata for showing your appreciation, it means a lot to me. Thanks ✌️

    • @sujatagunale7079
      @sujatagunale7079 3 роки тому

      @@CatalinMironDev You deserves more than that .. I'm glad I found you 😅 .. Now, I can be a good React Native Developer .. Thank you ♥️

  • @PlaysMaker
    @PlaysMaker 3 роки тому +1

    Dude, you are just amazing. I watched your tutorial like a addictive TV series. Great job, keep up the good work and thanks a lot.

  • @tusharraj9785
    @tusharraj9785 3 роки тому +3

    You are a Wonderful React Native Tutor on UA-cam....Thank you so much :)

    • @CatalinMironDev
      @CatalinMironDev  3 роки тому +1

      Wow, thank you and you're very welcome Tushar ✌️

  • @artmosphereID
    @artmosphereID 3 роки тому +7

    Hi Miron, can you make a fundamental and basic tutorial for Animated API? or Animated API from react-native-reanimated? such as making timing function, spring etc...
    I really need those tutorial since the react-native-reanimated documentation seems too advance for me :D
    I like your tutorial because you're using JS and your english pronounciation are easier to understand, bcs im not a native english XD

  • @dibayuin7859
    @dibayuin7859 3 роки тому +1

    I saw your tweet, who's the person who hates you ? we need to blame them, because you're the best 😎

    • @CatalinMironDev
      @CatalinMironDev  3 роки тому

      haahaha, I'm not going to blame or point to a particular person, but whoever it is, that person knows :)

  • @thailonlucasart
    @thailonlucasart 3 роки тому

    I'M IN LOVE WITH YOUR CHANNEL!

  • @ariyaman90
    @ariyaman90 3 роки тому

    I do enjoy it. very well... Please make more animated tuts

  • @herbertpimentel
    @herbertpimentel Рік тому

    Absolutely amazing content ❤

  • @Eddysapata
    @Eddysapata 3 роки тому

    I tried each and every step but there was a problem in inputtext padding it was not actually overlapping with the flatlist value so i have given marginTop:-10 explicitly.
    Rest worked great.
    Thanks for the tutorial.. :) :)

  • @tusharkhetariya4275
    @tusharkhetariya4275 3 роки тому

    You are doing too much good ✌️🔥🔥
    i wanted to learn pan responder so of you can please make few videos for this topic may be it can help 💯

  • @anastely6144
    @anastely6144 3 роки тому

    Thank You Catalin, It's a very awesome tutorial I learned a lot, keep going as usual 🔥🔥🔥

  • @fotios4902
    @fotios4902 2 роки тому

    Liked before watching it, bro!

  • @joaoperin8313
    @joaoperin8313 3 роки тому

    Thank you very much! I will try to use in my project

  • @ImVuCms
    @ImVuCms 3 роки тому

    Thanks, I will help me a lot for resolving text value animation

  • @상준상
    @상준상 3 роки тому +1

    Thank a lot, by the way is it possible make camera filters which is kind of beauty filter before take a photo like default. For example the app called B612 or SNOW?
    Really want to learn how to build this up!

  • @rockNbrain
    @rockNbrain Рік тому

    This dude is awesome

  • @jonathanporzio1931
    @jonathanporzio1931 Рік тому

    Great like usual, thanks Miron

  • @zabipakdel6004
    @zabipakdel6004 3 роки тому

    Wooow that was very good I'm really enjoyed

  • @shatyajeet
    @shatyajeet 3 роки тому

    You are the absolute best!

  • @HemalRathod
    @HemalRathod 3 роки тому

    Wonderful learning by you.

  • @spmobile97
    @spmobile97 3 роки тому

    Could you do bottom sheet using animated??? Your videos are awesome

  • @bedirhanaygul805
    @bedirhanaygul805 3 роки тому

    great content like always man thank you for your time and effort 👏👏💯💯💯💯

  • @jupunsupun
    @jupunsupun 3 роки тому

    I'm a beginner. this is not beginner-friendly. bcoz u are starting somewhere. please try to make a full tutorial. time doesn't matter. and change your font style it will improve your channel. thank you

  • @ahmadmajde5341
    @ahmadmajde5341 3 роки тому

    it's very very very niceeeeee ,
    thanks catalin

  • @sagarkamble7810
    @sagarkamble7810 2 роки тому +1

    i want to display total 7 item in one row with less width, here we are showing only 3, so how can we do that...???

  • @zacdemi
    @zacdemi 3 роки тому

    Great video. Thank you.

  • @sukhvsin2
    @sukhvsin2 3 роки тому

    Bro, you are Awesome ❤

  • @AndreiKashkan
    @AndreiKashkan 3 роки тому

    Awesome as usual!

  • @govindbagla3599
    @govindbagla3599 2 роки тому

    I want to show number list in vertical mode with same animation, can you please tell me how can I do that?

  • @gabrielaleme2460
    @gabrielaleme2460 3 роки тому

    Will you consider using flutter?

  • @mohdsajidshaikh4291
    @mohdsajidshaikh4291 3 роки тому

    Thanks.
    I want to pause countdown and resume again from there so how to paused timer when some props changes in parent component

    • @CatalinMironDev
      @CatalinMironDev  3 роки тому +1

      Pause and resume is something that I’ll cover in my upcoming course for Instagram stories in React Native.

    • @mohdsajidshaikh4291
      @mohdsajidshaikh4291 3 роки тому

      @@CatalinMironDev waiting for that

  • @renao_
    @renao_ 2 роки тому

    thank you a lot for this

  • @Flipkurama
    @Flipkurama 3 роки тому

    Awesome as always. Hey do you have any courses happening?

    • @CatalinMironDev
      @CatalinMironDev  3 роки тому

      Thanks a lot Filipe. I’m not sure about the course, I took some days off and I was pretty lazy lately. Hopefully this will be release in the near future. Thanks ✌️

  • @gururajmoger8649
    @gururajmoger8649 3 роки тому +1

    Pls create a music app with ylight music 👌

  • @adarshjaiswal7334
    @adarshjaiswal7334 3 роки тому

    Always with a bang 🔥

  • @PraveenKumar-jf7bu
    @PraveenKumar-jf7bu 3 роки тому

    Great video brother 👍

  • @lucianohorta5976
    @lucianohorta5976 3 роки тому

    Awesome

  • @farrukhatabekov595
    @farrukhatabekov595 3 роки тому

    wonderful

  • @rn-mania
    @rn-mania 2 роки тому

    Top content !!!!

  • @principe.borodin
    @principe.borodin 3 роки тому

    Fantastic, awesome.

  • @nadeemkhan-yu4wf
    @nadeemkhan-yu4wf 3 роки тому

    as brilliant as ever.

  • @Fervillanuevas
    @Fervillanuevas 3 роки тому

    Awesome bro!

  • @inderjeet3090
    @inderjeet3090 Рік тому

    can anyone help me out to implement same timer selected but direction should be vertical

  • @yagorodi
    @yagorodi 3 роки тому

    what is the font you are using?

  • @eminence_
    @eminence_ 3 роки тому

    Budget version of William. Nothing wrong with that :D

    • @CatalinMironDev
      @CatalinMironDev  3 роки тому +1

      What do you mean? Could you please share more? Thanks ✌️

  • @trantuyen9549
    @trantuyen9549 3 роки тому

    Your tutorials is awesome. Can you explain below code, it really hard to understand
    useEffect(() => {
    const listener = textInputAnimation.addListener(({value}) => {
    inputRef?.current?.setNativeProps({
    text: Math.ceil(value).toString(),
    });
    });
    return () => {
    textInputAnimation.removeListener(listener);
    textInputAnimation.removeAllListeners();
    };
    });

  • @kymzTech
    @kymzTech 3 роки тому +1

    please wat the name of your background music

    • @CatalinMironDev
      @CatalinMironDev  3 роки тому

      UA-cam is responsible for providing such beautiful songs. I don’t know the names tho. Thanks ✌️

  • @maxippacheco
    @maxippacheco 3 роки тому

    Can anyone explain me how snapToInterval works? I didn't catch it

  • @mogorhom
    @mogorhom 3 роки тому

    Noice 🔥

  • @oguzhanturker8903
    @oguzhanturker8903 3 роки тому

    Waiting for reanimated2 vids

  • @HasanAli-vp6ci
    @HasanAli-vp6ci 3 роки тому

    Whenever you start, please start from scratch..this will be helpful to us as lot of code is already written on your vs code,so it's kinda hard sometimes to understand

    • @CatalinMironDev
      @CatalinMironDev  3 роки тому +1

      Thanks for sharing your feedback. I will try to do it in the future! Also, the starter code link is in the description, you can pause the video, grab it, add it into your IDE and resume the video. We will have the same starting point. Thanks again for this feedback Hasan ✌️

  • @ghulamzainab7786
    @ghulamzainab7786 3 роки тому

    hey everybody , any best react native course? please share link

  • @frontendfalcons3286
    @frontendfalcons3286 3 роки тому

    Hey , make a course on React native , yours would rock on udemy 🔥💯

    • @CatalinMironDev
      @CatalinMironDev  3 роки тому +1

      Maybe one day! Thanks for the suggestion. Meanwhile, if you'd like to support me and have access to some private source code, you can become a Patreon: www.patreon.com/bePatron?u=20582060. Thanks ✌️

  • @Marshal-786
    @Marshal-786 3 роки тому

    please make tutorial in react native cli.

    • @CatalinMironDev
      @CatalinMironDev  3 роки тому

      Why? I mean what would be the difference? Thanks Bilal!

  • @TheSalaho1
    @TheSalaho1 3 роки тому

    you gotta start from scratch, I like your content, but I'm so lazy to figure out how to get where you start from!

    • @CatalinMironDev
      @CatalinMironDev  3 роки тому

      Noted! I also shared the starter code, the link is in the description. Thanks! ✌️

  • @kymzTech
    @kymzTech 3 роки тому

    and also please to your flat list deocumention for bounce

    • @CatalinMironDev
      @CatalinMironDev  3 роки тому

      You can check it yourself on ReactNative docs. Its basically avoiding extra bounce/jumpiness at the start or end of the list while scrolling. Thanks! ✌️

    • @kymzTech
      @kymzTech 3 роки тому

      @@CatalinMironDev I can't find the bonce animation part in the documentation

    • @CatalinMironDev
      @CatalinMironDev  3 роки тому

      @@kymzTech Did you at least try to search for it inside the documentation? Here's the link: reactnative.dev/docs/scrollview#bounces.

    • @kymzTech
      @kymzTech 3 роки тому

      Tnx

  • @francescociulla
    @francescociulla 3 роки тому

    Great video!