search

pavlelekic / react-native-gridview

A React Native component that renders a grid of items. It uses ListView under the hood.
MIT License
17 stars 4 forks source link

renderHeader only occupies one grid cell instead of full width #1

Open peacechen opened 7 years ago

peacechen commented 7 years ago

When passing in prop renderHeader={this.renderHeader} to GridView, it sizes the header as though it's a cell. I expected the header (and footer) to take up the full width of the ListView.

Also, thanks for sharing this handy library.

pavlelekic commented 7 years ago

You're welcome ;) I'll have to try it out over the weekend, I'm pretty busy now, but have you tried {flex: 1} on the header?

pavlelekic commented 7 years ago

Also, do you have an example code I can see?

peacechen commented 7 years ago

I did try flex:1 on the header but still the same behavior. Eventually I had to hard-code the width of the header component to the width of the screen which wasn't ideal. Another deal-breaker is that the underlying ListView wouldn't scroll if the header is present with multiple columns. Tried to resolve it by setting flex in the parent View, the GridView, align-self start, etc, all to no avail.

I then recreated this directly with the native ListView so it appears to be a bug with RN. Eventually I had to wrap the header and ListView (or GridView) in a parent ScrollView to keep the header from fouling up the ListView. This bug doesn't happen with a single-column ListView.

I don't have the code in front of me right now, but it's pretty simple to recreate. Add the header prop to the GridView like this:


<GridView
  ...
  renderHeader={() => return <View style={{flex:1}}><Text>Header</Text></View>}
  ...
/>