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

Created on 5 Feb 2015 · 3Comments · Source: facebook/react-native

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

screen shot 2015-02-05 at 1 43 05 pm

My code:

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

Anyone else seen this?

Locked

Source

jlongster

👍1

Most helpful comment

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

nick on 5 Feb 2015

👍3 🎉1

All 3 comments

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

nick on 5 Feb 2015

👍3 🎉1

You're right, that fixed it, thanks!

jlongster on 5 Feb 2015

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 :)