React Native Expandable ListView in Android iOS Example Tutorial

Expandable ListView is the common Multiple ListView structure used in hundreds of mobile applications. Expandable ListView is a expandable collapsible vertical listview structure used to show multiple category and sub category wise list structure. It is also known as two level vertical scrolling listview. It is differ from simple ListView because in simple ListView or FlatList we will only show single level items but in Expandable ListView we will show multiple level items. Currently there is no pure component available in react native to create Expandable ListView but using the custom component designing functionality we can easily create our own custom Expandable ListView. In this tutorial we would create Expandable ListView in Android iOS app example with tutorial.

Live screenshot of App:

React Native Expandable ListView in Android iOS Example Tutorial

Contents in this project React Native Expandable ListView in Android iOS Example Tutorial.

1. Import Alert, LayoutAnimation, StyleSheet, View, Text, ScrollView, UIManager, TouchableOpacity, Platform, Image component in your App.js file.

2. Create a class named as Expandable_ListView. This class would be our main custom Expandable ListView class.

3. Create constructor() in Expandable_ListView class. In the constructor we would make a State named as layout_Height and set the default height as 0 Zero.

4. Create componentWillReceiveProps() with nextProps parameter in Expandable_ListView class. In this method we would simply put a if condition on Item expand time and according to that set the layout_height state value. The componentWillReceiveProps method is used to re-compute the data when a prop value is changed in react native.

5. Create shouldComponentUpdate() inbuilt method with nextProps & nextState parameter in Expandable_ListView class. In this function we would compare the layout_height state value and according to that return true or false value. The shouldComponentUpdate() function is used to increase the app performance by disabling all the items re-rendering each time when user clicks a data. It will make sure the selected items data is loaded only not the complete List.

6. Create a function named as show_Selected_Category() with item parameter in Expandable_ListView class. This function is used to show the selected item of Expandable List View.

7. Now finally we would create the Expandable ListView header and items View in render’s return block in Expandable_ListView class.

8. Complete source code for Expandable_ListView class.

9. Create constructor() in your app’s main default App class. Here we would enable the layout animation.

10. Create a constant array named as array in app’s main App class. The array contain our main Expandable ListView items & at the last of array we would create a State named as AccordionData and store the array in this State.

11. Create a function named as update_Layout() with index parameter in main App class. In this method we first enable the layout animation and then update the layout with new items.

12. Finally we would call the Expandable_ListView class component in render’s return block in App class. We would call the custom component in ScrollView.

13. Creating Style.

14. Complete source code for App.js File :

Screenshots:


LIVE EXAMPLE :