ListView in React Native: Something You Should Know

ListView is a core React Native Component, designed specifically to render a vertically scrolling list of data in your mobile app. We use the ListView component in our app, Secure Data Kit, in order to show users a list of their projects, and the surveys that those projects contain. The idea of how it works is fairly simple. Basically you populate a dataSource object with a data blob, and when the ListView component renders, it passes each piece of the data blob into its own row, along with any other props required. The row then renders as you would expect. Unless it doesn't. We ran into an issue where not all of the surveys were being rendered (each would be a row in the list). Because of the way that our application is programmed, this came across as a bug where the animated spinner, which was intended to spin while the survey data was being downloaded and rendered, would spin forever. After a lot of digging into the issue, it was discovered that the ListView component comes out of the box with a default value of ten for the property initialListSize. This default value wasn't explained in the official React Native documentation, which made this harder to fix than it should have been. I ended up finding a Stack overflow post that explained what was happening. By adding the prop initialListSize with a value much higher than ten, our application began to perform as expected, by rendering each row from the dataSource correctly. I hope this fact can help someone else who is scratching their head right now, wondering why all of the data that they just downloaded into their app is not rendering in a nice, neat list.