Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FlatList] Rows aren't rendered until scroll #1831

Closed
michalraska opened this issue Jul 1, 2015 · 223 comments
Closed

[FlatList] Rows aren't rendered until scroll #1831

michalraska opened this issue Jul 1, 2015 · 223 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@michalraska
Copy link

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.

renderbug

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
Copy link

Furizaa commented Jul 2, 2015

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

@ide
Copy link
Contributor

ide commented Jul 2, 2015

This should be fixed in 0.7

@yamill
Copy link
Contributor

yamill commented Jul 2, 2015

I was experience the same exact problem.

cloneWithRows works fine. but cloneWithRowsandSections doesn't.

@sahrens
Copy link
Contributor

sahrens commented Jul 2, 2015

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
Copy link
Author

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
Copy link

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

@yamill
Copy link
Contributor

yamill commented Jul 4, 2015

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
Copy link

worked in 0.7

@coderdave
Copy link

Also not working in 0.7.1

@ghislaindj
Copy link

Having the same issue with cloneWithRows in version 0.7.1

@michalraska
Copy link
Author

For me it works well in 0.7.1.

@yamill
Copy link
Contributor

yamill commented Jul 29, 2015

Does not work in 0.8.0.

Still using cloneWithRows instead of cloneWithRowsAndSections

@coderdave
Copy link

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

@yamill
Copy link
Contributor

yamill commented Jul 29, 2015

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

@yamill
Copy link
Contributor

yamill commented Jul 30, 2015

@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?

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
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor

@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
Copy link
Contributor

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

@Intellicode
Copy link
Contributor

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
Copy link
Contributor

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
Copy link

s4y commented Oct 16, 2015

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

@amccloud
Copy link

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
Copy link
Contributor

gre commented Oct 23, 2015

I am experiencing the same issue using 0.13.0-rc

@cancan101
Copy link
Contributor

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
Copy link

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
Copy link

kinhunt commented Dec 4, 2015

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

@sahrens
Copy link
Contributor

sahrens commented Dec 5, 2015

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

@horizon0514
Copy link

0.14 ,same issue

@wootwoot1234
Copy link

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
Copy link
Contributor

pvinis commented Oct 26, 2017

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

@colinramsay
Copy link
Contributor

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

@wootwoot1234
Copy link

wootwoot1234 commented Nov 17, 2017 via email

@colinramsay
Copy link
Contributor

Ah, we're already using FlatList.

@almostintuitive
Copy link

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

@venk-aw
Copy link

venk-aw commented Dec 17, 2017

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

@almostintuitive
Copy link

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

@edmengel
Copy link

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
Copy link

jacklj commented Feb 15, 2018

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
Copy link

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

@boraikizoglu
Copy link

boraikizoglu commented Mar 10, 2018

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:
screen shot 2018-03-10 at 05 44 59

After scrolling:
screen shot 2018-03-10 at 05 48 29

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
Copy link

ArturGr commented Apr 25, 2018

Found a working Hack for this.

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

@pyaesone17
Copy link

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

@rpavlovs
Copy link

rpavlovs commented Jun 11, 2018

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
Copy link

rpavlovs commented Jun 13, 2018

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
Copy link

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

@ptomasroos
Copy link
Contributor

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

@hramos
Copy link
Contributor

hramos commented Jun 13, 2018

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.

@facebook facebook locked as resolved and limited conversation to collaborators Jun 13, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Oct 13, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests