DMobi Soft

We're mobile development team. Our mission is make your idea become real :)

May7 , 05:08

React Native’s LayoutAnimation is Awesome

If you are developing with ReactNative and have not tried LayoutAnimation yet, you are missing out. Coming to ReactNative as an iOS developer, I was worried about losing the convenience of CoreAnimation. UIView animations are so nice; set the desired vie

If you are developing with ReactNative and have not tried LayoutAnimation yet, you are missing out.

Coming to ReactNative as an iOS developer, I was worried about losing the convenience of CoreAnimation. UIView animations are so nice; set the desired view properties and go. ReactNative’s Animated API works similarly, but requires a state property for each desired animation. For complex views this gets messy fast.

Enter LayoutAnimation. Don’t let the slim documentation scare you. It’s amazing.

For n number of layout changes in your view, one line does it all. Set your state, allow your view to re-render, and LayoutAnimation handles all interpolation for you. For large and complex views, this is POWERFUL.

 

In this example, I have a complex view with three possible states. Heights, widths, and item counts are rendered based on the state `index`, determined by which button is selected.

The state changing code without any animation is below.

Now, lets spice it up by adding a fancy LayoutAnimation. Only one line is necessary.

LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);

This will apply the `spring`animation preset to any layout changes that occur during the next render cycle.

 

LayoutAnimation comes with three presets:

  • easeInEaseOut
  • linear
  • spring

Or you can roll your own. A couple examples of custom LayoutAnimations are shown below. It also helps to study the source code to see what all is possible.

 

LayoutAnimation works by identifying views by their unique key, computing their expected position, and relying on the underlying native framework (CoreAnimation on iOS) to animate the change. Frame changes are animated as long as the view keeps the same key between state changes. Opacity and Scale are the only additional properties supported, but it is possible to add a few more such as backgroundColor and transformations.

Note: I haven’t dug through the Android source code, so it might differ slightly there.

TLDR: LayoutAnimation is definitely worth recognition as a huge upside to React Native. Try it out and you’ll see.

Bài Viết Liên Quan

Coding Style

MobiSocial Team coding style :)

Thật không thể in được! Unbelieve!! Chỉ sau một đêm ra mắt "Chạy ngay đi" Sơn Tùng MTP đạt 7...

Choáng với sức nóng của Chạy ngay đi đã cán mốc 7 triệu View chỉ sau vài tiếng đồng hô ra mắt. Đây có lẽ là MV V POP hót nhất mọi...

Mùa thu giấu anh sau những tán cây héo úa

Mùa thu đã về cùng hương vị ngòn ngọt của hoa sữa, khiến mọi thứ dường như bình yên hơn. Đã tự dặn lòng thôi chẳng chờ đợi nữa nhưng khi những...

5 ways we improved our React Native app

A real world scenario of enhancing performances