React-native ListView does not display all content, bounces back (IOS)

Question

This is the code that I use to display a list of items returned from Api JSON in 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 items (s). (crop 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 to set the ListView and contentContainerStyle style to display all rows in both device orientations?

Answer 1

Edit: I noticed that your question is about a problem when the orientation changes or it is in the landscape. This answer probably will not solve this problem. But I leave it now if it helps.

I had a similar problem with ListView where the bottom elements were not fully displayed. I simply set the height of the scrollable area to the height of the device and subtracted the heights of the header and other things from above .

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 flex: 1 style can fix your problem, so you can try this first.

Answer 2

will not quite answer the question, but it may help some .. I set the top, left, right, but not the bottom, and this caused the scrollview to have full height, so you need to scroll.