Style the container of React Native's FlatList items separate from the header / footer?

Question

I have a FlatList using the ListHeaderComponent and ListFooterComponent.

Is there a way to style a container of the items (which come from the data prop), but not include the header and footer with in?

https://snack.expo.io/@jamesweblondon/bold-pretzel

import React from "react";
import { View, Text, FlatList } from "react-native";

const exampleData = [...Array(20)].map((d, index) => ({
  key: `item-${index}`,
  label: index,
  backgroundColor: `rgb(${Math.floor(Math.random() * 255)}, ${
    index * 5
  }, ${132})`,
}));

const Example = () => {
  const renderItem = ({ item }) => {
    return (
      <View
        style={{
          flexDirection: "row",
          width: "100%",
          backgroundColor: item.backgroundColor,
        }}
      >
        <Text
          style={{
            fontWeight: "bold",
            color: "white",
            fontSize: 32,
            height: 100,
          }}
        >
          {item.label}
        </Text>
      </View>
    );
  };

  return (
    <View style={{ flex: 1 }}>
      <FlatList
        data={exampleData}
        renderItem={renderItem}
        keyExtractor={(item) => item.key}
        ListHeaderComponent={
          <View
            style={{
              backgroundColor: "grey",
              height: 200,
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <Text>Before list</Text>
          </View>
        }
        ListFooterComponent={
          <View
            style={{
              backgroundColor: "grey",
              height: 200,
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <Text>After list</Text>
          </View>
        }
      />
      <View
        style={{
          backgroundColor: "gold",
          height: 200,
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Text>Footer</Text>
      </View>
    </View>
  );
};

export default Example;

Currently it looks like this:

Id like an element allowing me to wrap data so I can add padding, border, etc:

Answer 1

You can use columnWrapperStyle prop instead of contentContainerStyle prop of FlatList. This will help you to make styling of the wrapper of the components generated from the data.

For demo just add border property and you will see this will only apply styles to the container of items and not to ListHeaderComponent and ListFooterComponent Example

<FlatList
    ....
    columnWrapperStyle={{borderWidth: 1, borderColor: 'red'}}
/>

Note: Please make sure as the name of the prop suggests, the style will be applied to each colum. Also if this prop does not work for you then consider using numColumns prop of FlatList first then apply style with columnWrapperStyle