ListView always scrolls back to the top in react-native

Question

I am using react-native for a iOS mobile app where I am using ListView to display a list of alarms. I have created my own reusable list view component called ComponentListView in which I can pass in the component that I want to render in each row and the data for the list view. If I have a lot of alarms and I scroll down to see the alarms in the end, it always scrolls back to the top (please see sample app below on rnplay with symptoms) and hence I can't operate on the alarms in the end. I think it may have something to do with how I have created the ComponentListView component because if I just use a simple ListView component, it works as expected but I need to use ComponentListView component since I have many different screens where I have to display a list with different component and it simplifies my work.

I have created a sample app on rnplay which shows these symptoms. Please run on iOS. Here AlarmList is using ComponentListView to show a list of alarms and AlarmSummary is the component displayed in each row.

Sample app on rnplay

I try to debug it using some console log statements in the render method of the ComponentListView to check if the component is getting re-rendered again and again on scrolling but that doesn't seem to be the case. I also tried to debug in Chrome debugger but I am kind of out of ideas and not sure how/where to debug.

Please let me know if you have any pointers to solve the problem.

Answer 1

Give flex: 1 attribute to the sceneContainer also, like:

sceneContainer: {
  flex: 1,
  marginTop: 60
},

Working here: https://rnplay.org/apps/TL9N9g

Answer 2

For simple clarity: you need to set the height of the ListView itself OR set the height of the container/parent element using an explicit "height" value or by setting "flex" in the style.

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

---

<View>
   <ListView style={{height:300}} />
</View>