Geek Answers Handbook

React Native: ListView does not display all rows

I am trying to display a list of strings in a React Native ListView , but it only displays entries that fit in one screen, i.e. I can not scroll down to see more lines.

Here are the styles:

 styles = StyleSheet.create({ container: { flex: 1, marginTop: 60 }, rowContainer: { flexDirection: 'row', justifyContent: 'space-around' } })

Listview

 return ( <View style={styles.container}> {this.getHeader()} <ListView dataSource = {this.state.dataSource} renderRow = {this.renderRow.bind(this)}/> </View> )

Row:

 return ( <View style={styles.rowContainer}> <Text>{text}</Text> </View> )

What am I doing wrong?

+5
source share
5 answers

The ListView contains an internal ScrollView, so it should work as is. On the simulator, scroll it by clicking and dragging the mouse.

Why don't you show the full code, maybe some screenshots?

+1
source

I had the same problem and found that a Listview with a View wrapper on the outside would make the ListView invisible. A workaround will remove the View wrapper:

 return ( <ListView dataSource = {this.state.dataSource} renderRow = {this.renderRow.bind(this)}/> )
+4
source

I will post this here, despite the fact that the OP has already found a b / c solution, that the ListView will not scroll, and it was not b / c, I tried to scroll, and not use the mouse to simulate swiping, I am currently using React -Native v0.1.7 .

It turned out that the reason my ListView would not scroll and would not reveal other rows that were not originally displayed on the screen was because it did not have a fixed height. By giving him a fixed height, this problem is solved. Finding out how to determine which value to use for height was not easy.

In addition to the ListView, the page also had a heading at the top of the page with a fixed height. I wanted the ListView to occupy the remaining height. Here, either my ability to use the limited Reagent-Native implementation of FlexBox did not help me, or it was implemented. However, I was unable to get the ListView to fill the rest of the space and be able to scroll it correctly.

What I did was require the package Dimensions const Dimensions = require('Dimensions'); and then set the variable for the device window sizes const windowDims = Dimensions.get('window'); . As soon as I did this, I was able to determine the height of the remaining space and apply this line to the ListView style: <ListView style={{height: windowDims.height - 125}} ... /> , where 125 is the height of the title.

+4
source

List layout and other scrollable content. This solved my scrolling issue.

+2
source

What worked for me was to follow this answer: fooobar.com/questions/1217112 / ...

In principle, I had

 <View> <ListView/> </View>

And it was that the <View> component was getting a height of 0. Therefore, I needed to update it to:

 <View style={{ flex: 1 }}> <ListView/> </View>

Thus, the <View> gets its height based on the content.

+2
source

More articles:


All Articles