React-native: Padding at the top of a list view

[jlongster]

I'm rendering a ListView and it has padding at the top that I can't get rid of:

My code:

    return ListView({
      style: { flex: 1, borderWidth: 1, borderColor: 'red', paddingTop: 0 },
      renderRow: this.renderRow,
      dataSource: source
    });

Anyone else seen this?

[nick]

You may have to add automaticallyAdjustContentInsets={false}. Anyone know why this is true by default?

[jlongster]

You're right, that fixed it, thanks!

[vjeux]

In iOS, the navigation (top) and tabs (bottom) are semi-transparent. This means that the content behind it (like a scrollview) should overlap the top and bottom, but have additional padding to be the size of the top/bottom bars. In iOS there's a concept of top/bottomLayoutGuide that trickles down. automaticallyAdjustContentInsets enables the automatic addition of padding based on those guides.

The integration with the layout and React in general is not very well thought out, so we added this attribute. It's something that needs work but is not trivial :)