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 :

24 Comments

  1. hi sir excellent tutorial , i am same work but using visibility true and false , you are doing a great work

  2. i try’ed your tutorial ( React Native Infinite List FlatList Pagination)
    on that the list is not found stopping at the end ). please provide a solution for this. can you possible to provide a tutorial on automatic loading infinite flat list view (by eliminating button) . i fount more example but none of them are working properly . thank you for support

  3. Hello Brother,
    Thank you! very nice example it’s saved my day.

  4. Hello Sir,
    Hope you are doing well!

    I am using this code and it’s working fine. I want to use this in a different way. what I want ->
    I need to to use this as parent-child list with checkbox means –
    parent checkbox 1
    -child checkbox 1
    -child checkbox 2
    -child checkbox 3
    -child checkbox 4
    parent checkbox 2
    -child checkbox 1
    -child checkbox 2
    -child checkbox 3
    -child checkbox 4

    I have used checkbox instead of text. Now issue is how to manage the checked values from the array?

  5. Greeting Admin,

    Can we retrieve the list of data in array from database eg. mysql? If can, how? As for the example it has been listed in the code.

  6. Yes, you are right, sir. JSON Expandable ListView.

  7. And I don’t know how to do it sir. Can you show me some example

  8. Thank you very much Sir .

  9. Hi Sir.. Ty For your Clean Tutorial, i have an issue if i use
    ” this.props.navigation.navigate(”)” in ”
    show_Selected_Category ” from class ExpandableListView i get an issue cannot read property ‘navigate’ of undefined.

    how to fix this one…

    show_Selected_Category = (item) => {
    this.props.navigation.navigate(‘Main’);
    }

  10. bhautik dobariya

    i also have issue with i have to open another screen when i select sub category help me…….

  11. Hi,

    I am wondering if it is possible (for sure it is possible :D) to do a multi-select on the embedded list, so the part that can be hidden (the collapsable part).

    p.s. instead of .map() I used FlatList. Your tutorial is pretty awesome, maybe you can add FlatList so people can implement that too?

    Thanks in advance!

  12. Hi admin , thank you for the great tutorial I am facing an issue while I have added a picker inside the header , the value of the picker is not updating the value until I expand it Can you help me out with this asap .

Leave a Reply

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