Introduction to Animated API (React Native)

What's up mobile devs? In this tutorial we’ll learn how to recreate from scratch the first animation that I did on this channel but... this time we're going to use the React Native Animated APIs!
Learn more about React Native: www.reactiive.io
Support me on Patreon: / reactiive 🤓
Follow me on Twitter: / reactiive_
Source code: github.com/enzomanuelmangano/...
Where's actually "Introduction to Reanimated 2" ?
Here's the answer: • Introduction to React ...
The main concepts we'll explore are:
- Animated Values
- Timing, Spring, Repeat Animations
- useNativeDriver
Chapters:
00:00 Introduction
01:00 Setup
01:53 Timing animations
04:24 useNativeDriver
06:54 Spring Animations
08:30 Interpolate
12:14 Sequence and Parallel
13:50 Loop

[@fabriziadicristo5777]

Interesting comparison! Thanks sir💪

[@gajananmehta7215]

Your all videos are amazing i learn so much new things, keep making such amazing animation videos👍

[@abdelalimhassouna9573]

It was indeed very clear and smooth tut. Thank you

[@tharathrbt7968]

Great tutorial, short, hit the point ☺️

[@Veluc1f3r]

Great tutorial! Thank you! Animated namespace is starting to make sense! How would you approach animating between background colors?

[@andikarangga1632]

great, easy to understand for me. thank you

[@lrajoo11]

Super helpful. Thank you!

[@DrNabeel20]

thanks! great job hope for more 🔥

[@maximilianoInfinito]

Great Tutorial and example, thankyou

[@ludwigvillalba1886]

Cool. Thanks for sharing!

[@voldemore6300]

Great video!! Keep producing videos for beginner😊

[@aliinceoglu6076]

I am really grateful for your tutorials. Thank you! What theme are you using? It looks great :)

[@Reactiive]

Hi Ali thanks for the feedback. Here's the info on my vscode theme setup: - vscode theme “Tokyo Night" ( marketplace.visualstudio.com/items?itemName=enkia.tokyo-night ); - palenight icons ( marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme-icons ).

[@khalidkhan5308]

Please do make more and more tutorials 👌

[@daljeetsingh5127]

Thank for amazing video

[@mma-dost]

Great thanks keep making more animation videos and react native tutorials .🙏🙏✅✅🚀🚀

[@khanhduy3364]

amazing video

[@YunsGeek]

thanks sir 🌹 i have a probleme with inverted flatlist im trying to make chat so when i use flatlist to display messages it works fine but when i invert the flatlist since theessages are from down to up the flatlist lagging in android device i did nkt find any solution every thing is fine every child have a key ... i hope you can help me , thanks again ❤

[@codingmaster5224]

Thank you 🌹🌹❤️❤️❤️❤️❤️

[@tekashinakamura8719]

Please make more videos sir

[@abhidadhaniya5701]

Awesome theme of vscode and what is the name of it?

[@johnmaverick3068]

Thanks

[@eminzeynalov3395]

thanks for the great lessons. You can show how to install reanimated from scratch? there are difficulties in installation.

[@Norfeldt]

It can be a 3 step process if you already have compiled. 1. 'expo install react-native-reanimated' 2. Add the plugin string to babel.config as described in the expo docs for reanimated 3. Do 'yarn start -c' to clear the previous compiled cache (this was often the missing step for me)

[@learnandlearn849]

Thanks for making amazing aimations. Can you make an Video for Ios style picker custome picker that will work on both android and Ios platform may be helpful

[@valeriotorroni1602]

Credo che sei italiano o sbaglio comunque bellisimo video anche per chi ha esperienza nel linguaggio React Native.

[@networksx333]

Transform with key of '"rotate" must be a string: {"rotate":3.141592653589793} How to solve?

[@tyle233]

had the same problem but I ended up using template strings here is my solution: rotate: progress.interpolate( { inputRange: [0.5 , 1], outputRange: [`${Math.PI}deg` , `${2* Math.PI}deg`], } ),

[@networksx333]

@@tyle233 Thank You😇

[@tyle233]

actually i dont think this solution works but it only clears the string error, i am also only now realizing this when i had to reverse the animation the square is still tilted

[@christianfaustinorio8671]

idk if this is late but i think just use deg instead 1 pi = 180 deg and 2 pi = 360 deg

[@MrGonzo-lh9bo]

are you italian?

[@Reactiive]

Well... I love Pasta, Pizza and React Native 🇮🇹

[@christianalexandernonis2260]

Italiano? Sembra dall’accento

[@arupde6320]

plz be regular man .

[@cjgokuhomes10]

either provide cc to your videos or stop making already.

[@sebastianwolfgang8189]

Man with all due respect this is so bad explained that it hurts to see, get your ideas cleared before you make a video