Unexpected margin/spaces above `ListHeaderComponent`

[Bryan Lumbantobing]

I have this code that uses FlatGrid component

<FlatGrid
  data={[1, 2, 3, 4]}
  renderItem={() => <Text>Hello world</Text>}
  style={{ backgroundColor: 'red' }}
  ListHeaderComponent={
    <Box>
      <Text fontSize="xl">HELLO HEADER</Text>
    </Box>
  }
  ListHeaderComponentStyle={{ backgroundColor: 'white' }}
  stickyHeaderIndices={[0]}
/>

It renders like this

not sure why that spaces were added. but it's not appear when i change it to FlatList

[saleel]

Oh true. There is a spacing (10 units default) that is applied the to the grid - between the items and outside. Internally this is a padding/margin at the top of container and ListHeaderComponents is getting rendered inside.

I will look in to this and see what can be done, without affecting other stuffs.

For now you can do a quick hack I suppose

ListHeaderComponentStyle={{ backgroundColor: 'red', marginTop: -10, marginBottom: 10 }}

Replace 10 with value you provide for spacing prop if you change it.