Mind blowing animation in React Native and Expo with Animated API

[@ahmedam77]

WOW! I shouted "WOW" loudly once you changed the bg color, and the magic appeared!

[@johnyepthomi892]

Any concept explained this way, with incremental introduction of code vs explanation is a winner.

[@Tabish_Abbasi]

😊

[@artmosphereID]

wow thanks man, my friend shows me this kind of animation using flutter, and he really underestimate RN. Now i can flex it to him ahahahah

[@Tabish_Abbasi]

😊

[@Tabish_Abbasi]

😂

[@lostlost8164]

Complicated Animation simply done, Nice job Catalin

[@CatalinMironDev]

I’m glad that you liked it!

[@amanmittal5875]

Welcome back ! That animation is so dope, thanks for teaching us 🔥🔥🔥

[@CatalinMironDev]

Thanks Aman 🤗

[@charlohink4505]

This guy can animate anything

[@KaushikMahadevan]

you won my subscription with this animation haha, thanks a lot for putting this together

[@rafaelrocha1788]

Hi! Brazil here! As I'm learning react-native with expo, I ended up falling for your video, which by the way is sensational, congratulations.

[@TheRealMikeD]

Very helpful, thank you! I have seen code examples of animation before, but watching you as you code and seeing how things change as your code changes makes it easier to understand.

[@AndreMorke]

Great! Now i have an imagination of what's possible with animations in RN. Thanx a lot!

[@CatalinMironDev]

Imm glad that you found it useful. Thanks Andre ✌️

[@JaredBeach94]

This is great, man. I already had a good handle on animations, but this is next level and still somehow simple

[@CatalinMironDev]

Thanks Jared, for more cool animations you should check my Patreon page, you’ll not be disappointed ✌️

[@JackSparrah]

This was fantastic! Thank you. Very clear explanation, and super creative too!

[@CatalinMironDev]

I’m glad you liked it! Thanks Jack ✌️

[@Tabish_Abbasi]

​@@CatalinMironDev 👍

[@Tabish_Abbasi]

😂

[@riturajranjan2072]

How did percentage values in tranform translateX work in your code? It's asking for a number value in mine

[@spydergs07]

That is AWESOME! Thank you for the tutorial!

[@tomastamagnone3417]

So nice animation and really well explained. You won a new sub haha

[@CatalinMironDev]

Awesome, thank you Tama! ✌️

[@TamilLatest]

Awesome tutorial! Looking forward to completing your other ones too.

[@dilhando]

Now that I saw it i must use it.

[@MaxWilliam]

Dude, that was good! Really good!! I'm gonna now try to use animations like this in a screen/page change.

[@Tabish_Abbasi]

😊

[@Tabish_Abbasi]

😊

[@rockNbrain]

Great job dude!

[@vigneshwaraneswaramoorthi4117]

Really a cool example

[@rviswa2]

you are absolutely awesome...you'll reach more subscribers soon

[@CatalinMironDev]

Thank you so much for showing your support 🤗✌️

[@lakshmeeshat7445]

Wow initially it was looking very complicated, in actual its very simple, that's awesome.

[@CatalinMironDev]

Thank you! Cheers!

[@shashikantsharma3551]

Great work bro. 👍

[@mindhorizon90]

This Guy Is Just Amazing . He Deserves More Subscribers. i killed that subscribe button , Keep It Up Man 🔥

[@CatalinMironDev]

Wow, thanks for showing your support Yadav. Thanks a lot ✌️

[@alibarznji2000]

I love this channel

[@djsnooppyzatdepoet7568]

Wow! Thank you Sir

[@kkhezami]

Thanks a lot for this tutorial, very helpful!

[@CatalinMironDev]

I’m glad that you liked it. Thanks Khouloud ✌️

[@GoRHoM92]

well done mate !! you nailed it 🔥🔥🔥

[@CatalinMironDev]

Thanks a lot! 🙏

[@egyptsphinx9393]

Mindblowing is your animation 👌

[@CatalinMironDev]

🤯 thanks Egy!

[@darshitjain5965]

Woah! Loved it 🔥

[@CatalinMironDev]

Thanks Darshit 🔥

[@iamshadmirza]

Looks so good. I'm gonna try something with this.

[@CatalinMironDev]

Please do and share the results! Thanks Mohd! ✌️

[@royalrazor8046]

Wow, nice dude

[@youssefmuhamad3213]

Awesome explanation, thanks for the knowledge

[@CatalinMironDev]

Glad it was helpful! Thanks Youssef ✌️

[@heatrazer]

Thank you so much for your clear explanations! You helped me so much :D

[@CatalinMironDev]

You’re welcome Haret ✌️

[@alexalannunes]

Really really really awesome . Fantastic. Very good. You have my like and subscription. I activated notifications too

[@CatalinMironDev]

Thank you! I’m glad you liked it. There’s a new video published in case you want to learn more :)

[@catchfish2057]

Nice one. Thank you

[@rohaanansari3116]

Hey I just love your work and i just subscribed you with a bell notifications your content is soo soo valuable thanks for the content and plz do a video on this complete project as you have in your final project please it would mean a lot to me by the way THANKS MAN!!!! you are DOPE 🔥

[@Ankitkumar-vw1zz]

broooooo this is awesome

[@CatalinMironDev]

I’m glad you found it useful. Thanks Ankit! ✌️

[@seifeddine3735]

how can you set translateX to a percentage instead of a number ??? it does not work for me ???

[@zaharaquresh5670]

pls let me know if you found a solution to this

[@denisardelean8067]

Thank you bro! Great job!

[@CatalinMironDev]

Thank you Denis ✌️

[@PierreTeyssedre]

very good! Thx for that!

[@CatalinMironDev]

Glad you liked it Pierre!

[@georgembajiaku4567]

Awesome work sir.. I want to implement this in a RN project, but I want to use text. Any advice? Can I interpolate views or components in the output range array, or how can I go about changing the content based on the interpolate values. Thanks again!

[@compton8301]

Thank you very much.

[@marcelomarenduarte]

thank you friend!!!

[@farzam-ng6hi]

Keep up u are grate

[@emresahiner8372]

Perfect ❤️🙏🏻🎉

[@CatalinMironDev]

Thank you Emre!

[@testingemail5292]

good work

[@yunus5949]

*nice* I like that

[@damyHarbi]

I get an error in React Native for Android it says BackgroundColor is not supported by native animated module, how did you do that animation?

[@offlimitsbots]

i love it

[@muneebahmed7616]

this is really amazing! love your work! How can I use this with React Navigation?

[@ItsDaiko]

I get the error: Invariant Violation: Transform with key of "translateX" must be a number: {"translateX":"0%"} Any idea how to fix this?

[@co-canada-2-canada]

Wonderful explanation. (Y)

[@CatalinMironDev]

Glad it was helpful! Thanks Pavan!

[@scharrmah]

awesome

[@CatalinMironDev]

Thanks!

[@saalimkhan4133]

Freakin' awsm

[@floodyboy5307]

Woow 😍👍🏼

[@CatalinMironDev]

Thanks a lot! 🙏

[@RafaleKilleR]

Thanks for the video, really interesting! Is the 0.001 value in the color input range really needed? 🤔

[@CatalinMironDev]

The whole point is to have the same color in [0, 0.5] range, but you are right, this is not needed. Great suggestion! Thanks!

[@oct8bit]

Keep it up 5 star

[@CatalinMironDev]

Thanks 🙏

[@shriganeshholebagil631]

Can you do Samsung's One UI animation of the settings screen? On the scroll, the settings text fades away and the scrollable part sticks to the top and on the scroll back the animation reverses.

[@CatalinMironDev]

In my last video I’m doing the sticky footer + custom animation, inspired by Medium article. Check it out and let me know if this helped you. Thanks Shriganesh ✌️

[@shriganeshholebagil631]

@@CatalinMironDev You can show the demo using pan gesture handler, that would be awesome.

[@killerzucca2]

u can this animation in moti? and compare please

[@dericbytes]

Cool

[@CatalinMironDev]

Thanks Deric ✌️

[@Ihabkhattab]

I do really like everything: the animation, the technique and your clear explanation, well done. I just didn't get why you make `useNativeDriver` `false` ?

[@CatalinMironDev]

Hi Ihab, useNativeDriver can be used only for transforms and opacity and in my example I was interpolating colors as well.

[@Ihabkhattab]

@@CatalinMironDev got it. Thanks 🙏

[@jolly7506]

nice!

[@CatalinMironDev]

Thanks Erik

[@rehanansari-tq9wx]

❤️❤️❤️

[@takanumi339]

plase answer me , do i have to do multiple projects with js or jump direcly to do them with react what do you think bro

[@fernandopineda2414]

I recommend to do nothing but one big project in vanilla JavaScript, HTML and CSS. Then, when you're done, do the same project (if you want) in React. JSX sintax is pretty similar to HTML, and you'll use CSS as well

[@CatalinMironDev]

I highly recommend to start using JavaScript, HTML and CSS. React is JavaScript so as long as you know JavaScript, building apps eith React should be that hard, but first it’s better to understand the concepts behind JavaScript IMO.

[@neonvideos1]

Wow change of background! where are you now miron? Not in romania i guess lol

[@CatalinMironDev]

:) I'm in Prague, Czech Republic for 2.5 years now :)

[@arvindsingh_n23]

Can u please help making react native fully functional audio and video player?

[@CreativeJE]

hey please make the full part with gesture handler

[@CatalinMironDev]

Yees, I’ll do it.

[@abdremo]

🤙🏽💪🏿💪🏿

[@alexalannunes]

Why do you use React.useRef(new Animated.Value(0)) ?

[@CatalinMironDev]

Because I don’t want to directly mutate the animated value. React.useRef returns a mutable value and it’s persistent during component lifecycle. Here are the docs with examples: reactnative.dev/docs/animated

[@alexalannunes]

@@CatalinMironDev thanks bro😁. So can I use animatedValue.setValue() with useRef? Or this isn't recommended use setValue?

[@prkesuu5470]

Hey thanks for this.Can u provide full scratch project that is on react native node js for beginners.

[@CatalinMironDev]

Hi, I already created this kind of project. You can check my series from this playlist: kzbin.info/aero/PLQocKVqyqZDQrUU7zUfFogbAO0ynvQK2j. Thanks!

[@prkesuu5470]

@@CatalinMironDev ok thanks

[@markdoyle8918]

Really nice, could you show us how to do it in reanimated also? 😍

[@CatalinMironDev]

I can do it. It should be the same Animated.Value starting from 0. I’ll add this in my future videos 👍

[@sarithass323]

Hi i am new to react native ,is this code worked in react native cli also

[@CatalinMironDev]

Yes, the code works using react native cli. Thanks Saritha ✌️

[@sarithass323]

Code was perfectly working in ios but in android emulator getting error like "Project with path ':unimodules-core' could not be found in project ':unimodules_react-native-adapter". any suggestions plz

[@pinkfloyd9160]

Who's here after Reddit ;-)😃😃

[@in-loco2667]

How to go to another page when the animation is finished

[@CatalinMironDev]

If you follow-up the GitHub link from the description, there's an implementation of this slider with multiple slides and you can see how to move from a slide to another. Please let me know if you need any help with it. Thanks!

[@mad-mak]

did anyone figure out how to implement this on android?

[@codingwithlaraveller]

why do you use light theme, aww that hurt 💔

[@CatalinMironDev]

I switched to a dark one and hopefully you like it. Thanks for sharing your feedback Abdullah ✌️

[@codingwithlaraveller]

@@CatalinMironDev that's so nice of you. I like your videos a lot, easy to understand and implement. Keep up the good work. 👌

[@dancristian3673]

you could have explained from scratch not started code . could not get it yet.

[@kanishkvijaywargiya1340]

Please try to create in React Native cli...This will help more in production app development.

[@sorgutentarer]

"mind blowing"

[@fernandorojo6311]

Dude, fire video. Short and great. I wonder how this would look with reanimated. If anyone wants an expo snack, here it is (using the git repo): snack.expo.io/@git/github.com/catalinmiron/react-native-dot-inversion

[@JEsterCW]

Ffs use dark mode man, my eyes cant see shit on the white bg. How u dare to even do that ._.

[@kresnofatihimani8402]

awesome

[@lovepreetsingh_8316]

Thanks man

[@CatalinMironDev]

You're welcome!