I have built a v0.1 solution using just the list item component, and I have set the event handler for each component to the desired screen I want to navigate to:
While this solution works, it isn't easy to work with, especially when styles need to be updated or new screen navigations need to be added to the list. Moreover, I will be building more mobile applications where such a list navigation feature will be required.
I haven't seen a lot of posts talking about this layout, although it is quite a standard layout and common in a lot of mobile applications.
If anyone has a better solution or has developed this solution using the collections components available, can you please share your knowledge or suggestions?
Great questions, I definitely want to see what other community members have to say on this
From my experience, the 'List Collection" component is great for a predefined number of options, as it maps over an an array of data. Making it preferable for large numbers of options that have a standard display set up.
For more flexible listing, using the "List Item" component gives users greater control over each item but every option much be made independently which is much more time consuming and tedious.
It sounds like for your use case you plan to have 5-6+ options displayed together in a standardized format (with mapping for the icons added in) and the "List Collection" seems like the best fit as mobile unfortunately does not have custom component functionality.
If you have suggestions on how the "List Collection" component can better handle applying style updates or make it easier to add new screen navigation event handling let me know and I can make a feature request for these!