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 add Dynamically Expand Collapse or SlideDown SlideUp functionality 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?

  • Use a state variable named expanded which is used to expand / collapse the View  component.
  • Then on button click just toggle the state variable  expanded to make View  component expand or collapse and using react native LayoutAnimation API the animation process will be handled.

So let’s get started…

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

Step – 2: Implement constructor  method.

Note: Most important statement is UIManager.setLayoutAnimationEnabledExperimental(true). On Android devices by default, Layout Animation doesn’t work. So we have to use this statement to make Layout Animation works on 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 render method.

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

Complete Source Code:

Step – 6: 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… 🙂

8 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.

  4. Hi!
    Thank you for this article. Android works fine, but I have some troubles with IOS, it doesn’t fully expand, onLayout function return 20 of text layout height. Any ideas ?

    • Hi Mag, thanks for your kind words. I have updated this tutorial. I have checked on my side and it’s working fine. Please check on your side and let me know if it’s working or not.

Leave a Reply

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