Displaying Multiple Contents

[ghost]

I'm trying to display a ListView of parent categories and multiple subcategories for each parent category, and displaying them out in expanded view is waste of screen space, so I came across your component and thought was neat, but it seems like react-native-accordion only allows to display one content per header.

I have data formatted in the following way.

{[
'Restaurant': ['Hamburgers', 'Pizza', 'Chicken', 'Sushi']
...
]}

With react-native-accordion, is there a way to make 'Restaurant' be the header of the accordion and be expanded for view of the sub-categories?

[naoufal]

Hi @jhprks,

An accordion should support this. You should be able to pass any element as the content of an accordion.

So you would be able to build a listview, containing your ['Hamburgers', 'Pizza', 'Chicken', 'Sushi'] array and pass it as the content.

Your accordion would look something like:

--------------------------------- 
| <Element>Restaurant</Element> | header
--------------------------------- 
| <Element>Hamburgers</Element> | content
| <Element>Pizza</Element>      |
| <Element>Chicken</Element>    |
| <Element>Sushi</Element>      |
---------------------------------

I hope that answers your question. Let me know how that works out for you.

[ghost]

My initial attempt actually assigned 'Restaurant' header to every sub-category, this led the ListView to show 4 duplicates of 'Restaurant' and when I clicked the first 'Restaurant' header, it expanded to show 'Hamburgers', and second 'Restaurant' header expanded to show 'Pizza', and so and so forth. Instead of going through the list of sub-categories one-by-one inside the renderRow function, I may have to group the sub-categories from outside the renderRow function and bring it in whenever I need to assign the group of sub-categories to a header, I'm trying to see how I can approach this with react-native-accordion.

[naoufal]

Yeah that's how I would approach it.

Build out your subcategories outside of the renderRow and pass it in as the content of your accordion.

[naoufal]

Closing this since it's more of a question than an issue.

Hope it all worked out.