The magic of Layout Animations in Reanimated (React Native)

Рет қаралды 28,944

Күн бұрын

In this tutorial we’ll learn how to handle the new feature of Reanimated 2: Layout Animations. In order to do it we're going to create from scratch a reusable animated list with a staggered effect at the first render.
My React Native animations course: www.reanimate.dev
Learn more about React Native: www.reactiive.io
Support me on Patreon: / reactiive 🤓
Follow me on Twitter: / reactiive_
Source code: github.com/enzomanuelmangano/...
Layout Animations Docs: docs.swmansion.com/react-nati...
Great KZfaq Content on Layout Animations:
- eveningkid: • Layout Animations - Re...
- William Candillon: • Unboxing Expo SDK 44
Chapters:
00:00 Introduction
00:45 Setup the code boilerplate
11:05 Entering animation (FadeIn)
12:20 Exiting animation (FadeOut)
14:10 Fixing the Layout issue
15:15 The staggered effect

Пікірлер: 58

@Reactiive 2 жыл бұрын

What's up mobile devs? This time the code to be written for the boilerplate took a little longer. Despite this, I still preferred to start the tutorial from scratch. If you want to start directly from LayoutAnimations -> 11:05

@fooked1 Жыл бұрын

You're really an amazing instructor and React Native dev. Your videos have been very helpful. Thank you.

@real7876 Жыл бұрын

React native developer digging into reanimated recently -- Genuinely enjoy your straight to the point tutorial! Keep up with your great work :)

@felipemelendez5741 Жыл бұрын

Your React Native tutorials are excellent, please make more, I am building awesome things with your guidance 😎

@arshie1536 2 жыл бұрын

You videos are simply awesome and very much easy to understand. I just can't wait for your next video each time a new one comes up.

@Reactiive 2 жыл бұрын

Hi Arshie, glad you liked it!

@code-island 2 жыл бұрын

Thank you for this awesome content

@AkshatKumawat 2 жыл бұрын

Awesome content as always 💯

@HalesEnchanted 2 жыл бұрын

Been looking for a tutorial just like this. I couldn't click play fast enough. Thank you so much!

@Reactiive 2 жыл бұрын

Hi Haley, thank you very much for your support! 🚀

@Sarev_ 2 жыл бұрын

This is so cool! I've been looking for a long time for someone to finally explain it just like you did. Thank You!

@Reactiive 2 жыл бұрын

Thank you Sarev, feel free to checkout my other videos 😁

@raffaelescala646 2 жыл бұрын

No one has ever offered such quality content for free 🔥

@olp9667 Жыл бұрын

Thanks mate, you helped me a lot in understanding Reanimated with your tutorial :)

@jimi6699 2 жыл бұрын

Good job! Very nice instruction for reanimanted 2, thank you !

@deepanshu.770 2 жыл бұрын

Awesomely explained ❤️ Take us further in this reanimated journey

@Reactiive 2 жыл бұрын

Thank you very much! 🤓

@apurbaghosh8554 Жыл бұрын

Awesome channel !!! Keep posting react native stuff love your videos!! Also which keyboard do you use the sound is so soothing

@aliinceoglu6076 2 жыл бұрын

As always amazing content 💪 It would be nice if you can make a series about making responsive and performant charts!

@ddikodroid 2 жыл бұрын

excellent as always!

@Reactiive 2 жыл бұрын

Hi Diko, thanks for your continued support 😁

@_marouane7034 2 жыл бұрын

Thank you for this great and helpful containte , I have a suggestion for a video : selecting an item in a list with long press and change his position with swiping of course with animating the changes

@haseebqureshi2291 Жыл бұрын

Amazing content 🔥

@fabriziadicristo5777 2 жыл бұрын

Great video, thanks sir😀

@arupde6320 2 жыл бұрын

superb . continue .

@arnolddevmode9603 2 жыл бұрын

i love it :) subscribed

@jorgezozaya5049 2 жыл бұрын

Thanks for the great content! I would like to know what theme are you using for Visual Studio.

@Norfeldt Жыл бұрын

Fantastic tutorial 🎉 really good work. Good pace and covering of special cases. (There currently 2022-10 is a bug in android which cause the header from react-navigation to overlay when using the entering prop from reanimated- just sharing since it took me some time to figure out)

@ramielwan48 2 жыл бұрын

Clear explanation as always. Here is a suggestion. I was struggling to find an accordion/dropdown component that has nice animation and was performant. Sometimes the dropdown has 100 elements and just animated the view by adding and removing the 100 elements was not very performant. If you could do such a tutorial that would be awesome

@saahiilshaikh5119 2 жыл бұрын

We need this one

@gajananmehta7215 2 жыл бұрын

Your all examples were amazing just one request please create separately display basics of all reanimated library and then may be to it's very clear for us to view all your reanimated examples

@albiummid Жыл бұрын

🔥 Just awesome 🎉🎉🎉

@amurfpv3492 2 жыл бұрын

Love your videos! How about making some custom animations like collapsable header of the FlatList/SectionList.

@lingarajsahoo3583 2 жыл бұрын

cool man ❤️

@zdzboss 2 жыл бұрын

Amazing

@YunsGeek 2 жыл бұрын

thank you brother 🌹 i have a small qst , im using scrollview but im getting a big lag when i use more than 4 components in the same scrollview ? is there any solution for this ?

@bhakti214 2 жыл бұрын

how do you animate the item inside a Flatlist component just like when you add the item quickly in the video? I've tried using layout animation, but it turns the item to start animate together. I want the animation start from the first item and continue to the next item. any idea?

@wahyusetiawan511 2 жыл бұрын

Can you do something like Collapsible/Accordion animation? That one will be very helpful. Thanks for the video btw, you're awesome!!!

@TheRonron1994 4 ай бұрын

Is it possible to change the exiting animation dynamically?

@shadic7858 Жыл бұрын

Could you do a tutorial to animate the layout of a flatlist with 2 columns?. I'm trying to animate it like the example shown on this video but i'm not getting it to work.

@levitica2017 Жыл бұрын

What's the purpose of defining initialMode as a useRef() instead of a useState()?

@lingarajsahoo3583 2 жыл бұрын

more animation video please 🥺

@quangbinhinh7538 Жыл бұрын

Hi. I just ran your code and I found out on Android, the last item of scroll view break into half and then disappear. Can you give solution to fix this ?

@riahiyassine7703 Жыл бұрын

Thank you for your support... My suggestion is to make react native app that can communicate with USB devices..read and write...if it's possible..I appreciate that from you...

@Linjerry-dr4jv Жыл бұрын

it has bug when you delete bottom item of scrollview

@ollieclark2808 2 жыл бұрын

Last item in list behaves strangely on Android (doesn't animate when deleted, and has strange animation when moving up if you delete a prior item), do you have any ideas for that? I've Googled it but can't find an answer.

@jakubkovarik9754 Жыл бұрын

It works when you set the ScrollViews contentContainerStyle such that it contains "paddingVertical: 100", the 100 being the height of the button. it moves the list a bit down but it will at least work... Strange bug

@kasraghasemi205 11 ай бұрын

Hmm, but the layout issue is still there. Just add more items to the list (like 15 items), scroll down and then delete some item there.

@deepanshu.770 2 жыл бұрын

What if we what to animated a component from height 0 to its desired height but without rerendering?

@Reactiive 2 жыл бұрын

I would avoid the use of Layout Animations for this use case. Instead you can simply create an "height" SharedValue and animate it with the "withTiming" function from reanimated. I think that the video related to the "Swipe to delete gesture" can help you 👀

@fukemy123 9 ай бұрын

Flatlist plz

@Tyantreides 2 жыл бұрын

Well the first 11 Minutes are not about the topic at all. Maybe you should build a sample application first and show the "magic" of layout animation after a quick recap what you build before. That would save peoples time to watching you build a standard scrollview list before even starting.