React Native Dynamically Expand Collapse or SlideDown SlideUp View using LayoutAnimation Tutorial

Dynamically Expand Collapse or SlideDown SlideUp of a View is very common and basic requirement in today’s any website, mobile app. Through this tutorial, I am going to explain you how we can do Dynamically Expand Collapse or SlideDown SlideUp a View on button click using React native LayoutAnimation API.

In brief, what I am doing in Dynamically Expand Collapse or SlideDown SlideUp View using LayoutAnimation tutorial?

  • Using a Parent View component with height: 0 initially.
  • Also using a Text component wrapped by the Parent View component and get Text component’s actual height with onLayout  function.
  • To Expand the Parent View component just replace the Parent View component’s height with Text component’s height and to collapse the Parent View component just replace the Parent View Component’s height back to 0 and I am using a React native LayoutAnimation API which will take care of all animation process.

So let’s get started…

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

Step – 2: Implement constructor  method.

Explanation:

  • onLayoutHeight  state variable is used to hold the actual height of the Text component.
  • modifiedHeight  state variable is used to hold the modifiedHeight for Parent View component. This modifiedHeight  state variable will be toggled between onLayoutHeight and 0 or using this modifiedHeight state variable we will Dynamically Expand Collapse or SlideDown SlideUp Parent View component.
  • expanded  state variable is used to enable the toggle functionality on Button click.
Note: The another most important statement is UIManager.setLayoutAnimationEnabledExperimental(true)  . On Android devices by default, Layout Animation doesn’t work. So we have to use this statement only for android devices.

Step – 3: Implement changeLayout  custom method which is used to Dynamically Expand Collapse or SlideDown SlideUp Parent View component and apply Layout Animation for next layout.

Explanation:

  • configureNext  method of LayoutAnimation  API is used to schedule animation which would be executed when new layout happens.

Step – 4: Implement getViewHeight( height )  custom method which is used to get the Text component’s actual height.

Step – 5: Implement render method.

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

Complete Source Code:

Step – 7: As usual execute react-native run-ios  to run app in iOS devices and / or execute react-native run-android  to run app in Android devices.

  • iOS Screenshots:

  • Android Screenshots:

Good luck and Enjoy Guys… 🙂

6 Comments

  1. Hi very good and work for me thanks, but when i implementing this in a map function when i onPress everything are collapse but i want to collapse one by one, can you help me??

    • Thanks Arnel and
      Yes when you apply map function in the existing code then at a time all panels will be expand and collapsed simultaneously even when you click a single button because in your existing code you are using only one state variables for all panels then if you want to expand and collapse any particular panel then all remaining panels will expand and collapsed simultaneously because all panels are sharing single copy of state variables. You have to use separate state variables for each panel. To perform this task you have to divide your code into two components. First component is responsible to create panel for each item with its own separate state variables and in other component create instances of the first component using map function.

  2. Woah! I’m really digging the template/theme of this blog. It’s simple, yet effective. A lot of times it’s challenging to get that “perfect balance” between usability and visual appearance. I must say you’ve done a very good job with this. Additionally, the blog loads extremely fast for me on Firefox. Outstanding Blog!

  3. i implemented this code. But when I click to expand it doesn’t take the full height of the text view.
    Don’t know the reason. Any help will be thankful.

Leave a Reply

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