How to style React Native FlatList data separately?

user_3590686 0
Viewed 1070

I have a standard React Native FlatList component that I need to style. I also have a ListHeaderComponent that should have its own separate styles.

My issue is that I need to style the data part of the FlatList without affecting the ListHeaderComponent.

I would hope to avoid a "hacky" solution, if possible. I have looked at the FlatList documentation and there are no props to achieve this.

Here is some code for reference

<FlatList
  data={DATA}
  renderItem={renderItem}
  keyExtractor={(item) => item.id}
  ListHeaderComponent={<Component />}
/>

Worst case, is there anything else I could use to achieve this? Using a ScrollView to wrap the FlatList obviously doesn't work. I need the FlatList just as much as I need the styles of the data.

react-native-flatlist react-native-ios react-native reactjs
1 Answers

I would style the FlatList component using the style prop for the list and use the ListHeaderComponentStyle prop to style the Header separately or overwrite the FlatList styling.

user_145394180
Related