React-native ListView not showing all content, bounces back at bottom (IOS)

Question

This is the code that I use to display a list of items returned from a JSON Api in a ListView.

render(){ var listHeight  = this.state.itemCount ? ((this.state.itemCount) * 115 ) : 0;
        var itemsHeight = 460;

        itemsListView = (<ListView bounces={true} style={{height: itemsHeight}} contentContainerStyle={{height: listHeight}}
            dataSource={this.state.dataSource}
            renderRow={this.renderRow.bind(this)} automaticallyAdjustContentInsets={false} initialListSize={4} />); }

However, the ListView component will not allow me to view the last one or two item(s). (trims more content when the device is in landscape orientation)

The renderRow method returns rows of height 115 as shown below:

return (
<TouchableHighlight onPress={() => this.rowPressed(rowData)}
    style={{height: 115}}>...</TouchableHighlight>

What is the correct way of setting ListView style and contentContainerStyle to display all rows in both device orientations?

Samuli Hakoniemi Samuli Hakoniemi · Accepted Answer · 2015-10-19T08:49:26

Edit: I noticed your question is about the problem when orientation is changed or it's in landscape. This answer probably won't fix that issue. But I leave it here for now, if it helps.

I had similar issue with ListView where the bottom items weren't fully displayed. I just set the height of scrollable area to device height and subtracting the heights of header and other stuff on top.

Like this:

const {
  Dimensions,
  ListView,
  StyleSheet
} = React;

const Viewport = Dimensions.get('window');

...

render() {
  return (
    <ListView ... style={styles.listView} />
  )
}

...

let styles = StyleSheet.create({
  listView: {
    height: Viewport.height
  }
});

Also style flex: 1 could fix your problem, so you can try that at first.

React-native ListView not showing all content, bounces back at bottom (IOS)

2 Answers