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.

Redintegration

Answer 1

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

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

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

Therapy

Thanks, your answer fixed the problem but I am still don't understand completely how not having flex: 1 caused the scroll to not work properly. I understand that flex: 1 will allow the container to use all the available space. If I don't have flex: 1 it will only use required space. Is it because not having flex: 1 was causing the container to go out of bounds and hence scroll was not actually required? Do you mind shedding some light on it if you have some more insights? – Redintegration

@VarunGupta , from docs: In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes easy to debug. , link: facebook.github.io/react-native/releases/0.25/docs/… – Therapy

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>

Refractory