[FlatList] Rows aren't rendered until scroll

[michalraska]

Hi,
I have list view which displays partially local and partially remote data. Local data are initial for ListView.DataSource. This datasource is set in state of my custom component which wraps ListView and passed in render method to ListView. When are remote data received, new datasource is cloned by cloneWithRowsAndSections method and set to state of custom component. Problem is that are re-rendered only already displayed rows and new rows are rendered after scroll.

Is it bug or how I should to force rendering of ListView? With react-native 0.5 it worked but after upgrade to 0.6 it behaves as described above.

[Furizaa]

+1
Encountering exactly the same problem. Worked with 0.5 but broke with 0.6.

[ide]

This should be fixed in 0.7

[yamill]

I was experience the same exact problem.

cloneWithRows works fine. but cloneWithRowsandSections doesn't.

[sahrens]

Are you seeing cloneWithRowsandSections not working with 0.7?

Also, you might want to try setting initialListSize to a larger number - that might help as a workaround if things aren't fixed in 0.7 for you.

[michalraska]

Bigger initialListSize does not help and 0.7 I have not tried yet because vendors dependency. As it will be possible I let you know about 0.7 if somebody will not be quicker :)

[coderdave]

Having the same issue with cloneWithRows in version 0.6, was working in 0.5.

[yamill]

Haven't tried it in 0.7. Will give it a try. I know that I also had tried setting the initialListSize to a higher number previously and didn't help.

[Shimaa-Hassan]

worked in 0.7

[coderdave]

Also not working in 0.7.1

[ghislaindj]

Having the same issue with cloneWithRows in version 0.7.1

[michalraska]

For me it works well in 0.7.1.

[yamill]

Does not work in 0.8.0.

Still using cloneWithRows instead of cloneWithRowsAndSections

[coderdave]

cloneWithRows works for you yamill? Doesn't for me in 0.8.0.

[yamill]

@coderdave actually cloneWithRows doesn't work for me either. my mistake.

[yamill]

@sahrens @ide @michalraska my scrollY prop was not getting updated. I was basically trying to pass the scroll offset to my component, like so:

    renderRow: function (rowData, sectionID, rowID) {
          return (
            <Row
            key={rowData.id} data={rowData} scrollY={this.state.contentOffset}
             />
          )
    });

But fixing this line allowed me to receive the scrollY prop to my component successfully. I wonder if this change fixes all others issues?

react-native/Libraries/CustomComponents/ListView/ListView.js

Lines 342 to 343 in 757d6d2

	var shouldUpdateRow = rowCount >= this.state.prevRenderedRowsCount &&
	dataSource.rowShouldUpdate(sectionIdx, rowIdx);

I changed it from:

var shouldUpdateRow = rowCount >= this.state.prevRenderedRowsCount && dataSource.rowShouldUpdate(sectionIdx, rowIdx);

to

var shouldUpdateRow = true;

[christopherdro]

I've noticed this on 0.11.0-rc as well.

Here are two examples that can reproduce the issue.

Rows: https://rnplay.org/apps/d3DM6A
Rows + Sections: https://rnplay.org/apps/xnyaYw

The temporary solution that I came up with was to scroll the ListView 1pt when it mounts.

let listViewScrollView = this.refs.listView.getScrollResponder();
listViewScrollView.scrollTo(1);

You can uncomment this section inside the example on rnplay.org for testing.

[jaygarcia]

Silly question. Could this have anything to do with using NavigatorIOS? I've had some issues w/ rendering, padding, etc all when a list view was rendered as a child of NavigatorIOS.

[christopherdro]

@jaygarcia I don't think so since the example's don't make use of NavigatorIOS. Also, in my own project I'm using Navigator instead of NavigatorIOS.

[Intellicode]

+1 for me, I'm currently encountering this behaviour when using Navigator. I'm on 0.11 and I use cloneWithRows.

[Intellicode]

As workaround, I had to use @christopherdro's solution, but I would need to scroll it sufficiently much to get my items rendered (they are big).

Interestingly, the work around is related to the workaround for this bug: #1878 so my final code is:

    listViewScrollView.scrollWithoutAnimationTo(80);
    listViewScrollView.scrollWithoutAnimationTo(-80);

[Intellicode]

ok, using the code mentioned above, I got some bizarre bugs in nested ScrollViews: After mounting, an onScroll event was triggered which repositioned my initial scroll offset on those views.

[s4y]

Still a bug in 0.12.0. Here's the view hierarchy:

[amccloud]

Same issues as @Sidnicious on 0.11.0. My app has had this issue since an early version of react-native. Everything works as expected if I move the ListView out of the Navigator hierarchy.

[gre]

I am experiencing the same issue using 0.13.0-rc

[cancan101]

I have this issue in 0.13.1 with only this:

    constructor(props) {
        super(props);
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {dataSource: ds.cloneWithRows(Array.apply(null, {length: 100}).map(Number.call, Number))};
    }
    render() {
        return (
    <ListView
        style={{paddingTop: 20, flex: 1}}
        dataSource={this.state.dataSource}
        renderRow={(rowData) => <Text>{rowData}</Text>}
    />
    )

[jasonmerino]

For me this problem just showed up when upgrading from 0.14.2 to 0.16.0-rc. The fix that worked for me was to set the pageSize prop on the ListView to 3. 2 didn't work for me, but 3 worked just great.

¯_(ツ)_/¯

[kinhunt]

same issue here with 0.15.0 , tried all the tricks, no luck. ios 9.1 iphone 6

[sahrens]

@nicklockwood - can you help out here? Seems like there are still some bugs.

[horizon0514]

0.14 ,same issue

[wootwoot1234]

I just updated and I'm still seeing this issue on <ListView />. Am I doing something wrong? Here's my package.json:

  "dependencies": {
    "native-base": "^2.3.1",
    "react": "^16.0.0",
    "react-native": "^0.50.0-rc.1",
    "react-native-linear-gradient": "^2.3.0",
    "react-native-modal": "^4.1.0",
    "react-native-simple-store": "^1.3.0",
    "react-navigation": "^1.0.0-beta.11"
  },

[pvinis]

i think ListView is deprecated by now. its better try with FlatList and see whats up.

[colinramsay]

I believe we're still seeing this on 0.50.3. Can anyone else confirm?

[wootwoot1234]

I fixed this issue by switching to FlatList.

…

On Fri, Nov 17, 2017 at 8:39 AM Colin Ramsay ***@***.***> wrote: I believe we're still seeing this on 0.50.3. Can anyone else confirm? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1831 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAZnGZ9oz7uKXx-wz3KFg-FSIzejAfM6ks5s3bavgaJpZM4FP1nt> .

[colinramsay]

Ah, we're already using FlatList.

[almostintuitive]

This is still a problem with 0.50.3. removeClippedSubviews don't seem to have any effect. Can we reopen this please?

[venk-aw]

We still have an issue in 0.50.3. Please reopen this one.

[almostintuitive]

Sorry to bother again, but can we reopen this please? This is a pressing issue.

[edmengel]

Ran into this using the latest Expo React Native SDK. It only happens to the third ListView in a TabNavigator. If I swap the 2nd and 3rd, then the new 3rd page will be affected. removeClippedSubviews did fix it in my case though.

[jacklj]

requestAnimationFrame(() => { this.listview.scrollTo({y: 1}); }); worked for me.

using this.listView.scrollToEnd() didn't work, so I had to manually calculate the coordinates of the end of the list to then pass to scrollTo()

[RWOverdijk]

For flatlist this could be caused by updating the same array. FlatList checks if data is different. So make use of immutable arrays

[boraikizoglu]

removeClippedSubviews={false} fixes the bug for my case.

<ListView
            data={this.state.mockData}
            renderRow={(rowData) => this.renderRow(rowData)}
            removeClippedSubviews={false}
 />

@edmengel is right. I was working on a project and had exactly the same bug.

Before scrolling:

After scrolling:

React-native-router-flux@^4.0.0-beta.27 is used for the navigation and App.js returns this. My search page contains a listview and it had this bug. It is on the third tab.

<Provider store={store}>
        <View style={{flex: 1}}>
            <Router hideNavBar={true}>
                <Scene key="modal" modal>
                    {/* Tab Container */}
                    <Scene key="tabbar" tabs={true} tabBarPosition="bottom" tabBarStyle={{borderTopColor:'black', borderTopWidth:1,backgroundColor:'white'}}>
                      {/*Tabs */}
                        <Scene key="NewPage" component={NewPage} title="NewPage" icon={TabIcon}  hideNavBar={true} />
                        <Scene key="NewPage2" component={NewPage2} title="Newpage2" icon={TabIcon}  hideNavBar={true} />
                        <Scene key="SearchPage" component={SearchPage} title="Search"  hideNavBar={true} />
                    </Scene>
                </Scene>
            </Router>
        </View>
</Provider>

When I changed search page(which contains a listview) from third tab to second tab, listview worked fine.

[ArturGr]

Found a working Hack for this.

render() {
       setTimeout(() => {
            this.sectionList && this.sectionList.recordInteraction(); 
        }, 50);
        return (
            <SectionList ref={(view) => { this.sectionList = view }} />
        )
}

[pyaesone17]

<Flatlist style={{ flex: 1 }}/>
This trick work for me.

[rpavlovs]

Same issue on 0.55.4 with both ScrollView and ListView. Adding removeClippedSubviews={false} works.

Unfortunately, in our case, it is not an option, since it is required to avoid missing images on Android #13600 (comment)

Scrolling back and forth on render only happens after navigation so, it looks like transitioning to an initially blank screen.

Flexing the view didn't help either.

Any other suggestions?

[rpavlovs]

I found it to only happen after certain scroll position...
https://streamable.com/l5arv

Using chrome-devtools to inspect the view I can see that all the subviews are clipped.

Still stuck, @hramos please re-open.

[petersuwara]

Still having a problem with such a simple function? This is why we moved away from React Native back to straight Native code.

[ptomasroos]

If it’s that simple, please lend out a hand in order to fix it @petersuwara

[hramos]

This issue has been closed for a while. If this is affecting you, please open a new issue and provide as much detail as possible. I'm locking this issue as the original problem reported here was fixed, and it's not clear each person who has commented afterwards is facing the exact same problem.

We use FlatList extensively at Facebook, and no complaints of this sort have surfaced internally. It may be possible this type of issue occurs with a particular navigation library, for example. Opening a new issue with more information about your problem, with a clear list of steps to repro, or ideally a small project, would be of great help.