Rendering sections in flatlist/sectionlist from one data set - react-native

Question

I have some JSON data that looks like this:
{
"distance":"1",
"name":"whatever",
"listPriority":"1",
}
I'm passing this into a Flatlist:
<FlatList
key={'my-list'}
data={JSON}
renderItem={this.renderCard}
keyExtractor={(item, index) => index.toString()}
/>
What I want to do is section off the data based on list priority, so all items with a value for listPriority key of 1 would show under my section header that says "These are items for 1", and a value of listPriority key of 2 would have a section header that says "Section header 2", and so forth.
I.e. resulting in something like this:
List Priority 1
item in the list
item in the list
List Priority 2
item in the list
item in the list
List Priority 3
item in the list
item in the list
How can I get sections into my Flatlist?
Sectionlist seems to be only if you are passing in separate data sets for each manually entered section.

Answer 1

It would seem that you could use the SectionList component, that would give you the headers and (if you want) them being sticky, which is a nice to have behaviour.
So you just need to create an array of objects that follow the needed format for the component to work properly.
<SectionList
renderItem={({item}) => someFunctionHere(item)/<SomeComponent item={item}>}
sections={sections}
keyExtractor={(item, index) => index.toString()}
/>
Define sections to be an array of format:
[
{
title: "List priority 1",
data: [{"distance":"1", "listPriority": "1"...}, ...]
},
{
title: "List priority 2",
data: [{"distance":"20", "listPriority": "2"...}, ...]
},
...
]
So again, just format your data (most probably within the componentDidMount hook) and when then data is formatted you can include it into the state and eventually feeding it into the SectionList component so that it will re-render