React Native Create Animated Accordion Panels using Layout Animation Tutorial

Hi Guys, Welcome again in another very interesting tutorial of React native and this is Animated Accordion Panels and Ya I know you heard about Accordion Panels in HTML. It’s very basic, commonly used control in HTML but today, I am going to create same Animated Accordion Panels in react native and believe me You will enjoy it.

In brief, what I am doing in Animated Accordion Panels using Layout Animation tutorial?

  • First of all, I will create two components( Accordion and App in my case ), First one defines the Accordion panel and another one is used to render that Accordion panel multiple times with different data for each panel.
  • And on click on Panel header expand the panel body with nice Layout Animation.

So, let’s get started…

Step – 1: As usual, Import all required components from react , react-native  packages.

Implement Code for Accordion Component:

Step – 2: Implement constructor  method.

Step – 3: Implement componentWillReceiveProps  method..

Explanation:

  • componentWillReceiveProps  method is a react component life cycle method and is used to notify that new Props are received for this component in which componentWillReceiveProps  method is implemented.
  • So in this method, I am checking the new received expanded prop value and if it’s true then set null  to the modifiedState  variable in order to Expand the Panel or if it’s false then set 0 to modifiedState  variable in order to Collapse the panel.

Step – 4: Implement shouldComponentUpdate  method.

Explanation:

  • This is the very important and powerful method of react component life cycle.
  • Basically, shouldComponentUpdate  life cycle method is used to improve the performance of react / react native app.
  • This method always return a Boolean value (true / false). By default, behind the scenes this method always return true and it’s OK in most of the cases but sometimes and in some cases such as If our have app thousands of items such as in this tutorial I am using 100 items in ScrollView  component then always returning true may harm your app performance. So, comment out the shouldComponentUpdate  method, re-run the code, see the difference and let me know through comments, what you feel about your app performance before and after applying the shouldComponentUpdate  method. I will make a complete detailed tutorial on shouldComponentUpdate life cycle method, so stay in touch.

Step – 5: Implement render  method.

Implement Code for App Component:

Step – 6: Implement constructor  method.

Step – 7: Implement changeLayout  method.

Step – 8: Implement render  method.

Step – 9: Implement custom styles for all required components.

Complete Source Code:


Enjoy Guys and have fun…

Leave a Reply

Your email address will not be published. Required fields are marked *