React Native Animated Accordion Collapsible Expandable iOS Android Tutorial

Accordion Panels is animated panels with Collapsible and Expandable functionality. Accordion panels are automatically controlled by itself and if user clicks on single panel then it will smoothly slide down and open itself but if you have clicked on any closed panel then it will first close the already open panel and then open the clicked panel using animation. We are using React Native’s Layout Animation to to open and close the panel. So in this tutorial we would going to implement Animated Accordion Collapsible Expandable Panel iOS Android Example Tutorial.

What we are doing in this project:

We are creating our own custom component to make animated Accordion effect now all we have to do is pass the data from the below class using Array and the data would automatically filled inside the Accordion.

To know how exactly it will work on your device see the below live screenshot:

Contents in this project React Native Animated Accordion Collapsible Expandable Panel iOS Android Example Tutorial:

1. Import Platform, LayoutAnimation, StyleSheet, View, Text, ScrollView, UIManager and TouchableOpacity component in your project.

2. Create a New class named as Accordion_Panel , This class is our custom Accordion class and used to render the complete Accordion Panel on device screen.

3. Create constructor() method in Accordion_Panel class with a State named as updated_Height. The updated_Height state is used to manage the height of the Accordion according to content present inside it.

4. Create componentWillReceiveProps() inbuilt life cycle method inside the Accordion_Panel class.  Using this method we would check the newly updated height of Accordion and updating the state. If you wish to study all the React Native life cycle methods then read our this tutorial.

5. Creating react’s own shouldComponentUpdate() method inside the Accordion_Panel class. Using this method we would improve our application experience and increasing its memory management power so it can be run more smoothly on your device with thousands of items inside it. It will stop our application from lagging or hanging with more data present condition. This method returns Boolean value.

6. Create the complete view of Accordion_Panel class in render’s return block . We are creating our own props this.props.onClickFunction , this.props.item.title and this.props.item.body inside the design layout. We would pass the props value from our next main class .

7. Complete source code for Accordion_Panel class.

8. Creating our main class named as App . This would be our Main default export class.

9. Creating constructor() inside the App class and put the Layout Animation enable method. This method would enable the layout animation effect in your current project. No we would make a constant Array with 10 items and inside this we would set the default Accordion panel opening status and Accordion Title and Accordion body text. After that finally we would make a State named as AccordionData and set the Array inside the state.

10. Create a function named as update_Layout inside the App class. We would call this function on Accordion item title clicked event. Using this function we would expand and collapse the Accordion panel and update the State value.

11. Create the Root view inside render’s return block and call the Accordion_Panel class with Array data. We would call the Accordion_Panel class inside a ScrollView component.

12. Creating Style.

13. Complete source code for App.js File :

Screenshot: