React-virtualized: Rendering issue

Created on 20 Nov 2017  路  1Comment  路  Source: bvaughn/react-virtualized

Hi,
I am trying to integrate react-virtualized into our electron app:
Electron 1.7.9
React 15.6.2
React dom 15.6.2
react-virtualized 9.12.0

I cant send a full working example as the issue appear without our app in its globality.
The issue is that there seem to be some "scroll flickering", plus once i get to the middle of the scroll there are no item anymore. In the video i am only scrolling down with the mouse wheel
screen recording 2017-11-20 at 02 42 pm

I am think this might be related to another module we are using so i put the list here

"about-window": "1.8.0",
    "adm-zip": "^0.4.7",
    "canvas": "1.6.7",
    "change-case": "3.0.1",
    "chart.js": "2.7.1",
    "dom-to-image": "farfromrefug/dom-to-image",
    "electron-builder-http": "^19.27.5",
    "electron-settings": "3.1.4",
    "electron-updater": "2.16.1",
    "fabric": "farfromrefug/fabric.js",
    "fs-extra": "4.0.2",
    "i18next": "10.0.7",
    "i18next-sync-fs-backend": "farfromrefug/i18next-sync-fs-backend",
    "is-electron-renderer": "2.0.1",
    "lodash": "^4.17.4",
    "log4js": "farfromrefug/log4js-node",
    "logrotator": "^1.1.0",
    "markdown-it": "^8.4.0",
    "markdown-it-emoji": "^1.4.0",
    "material-ui": "0.19.4",
    "material-ui-speeddial": "1.0.6",
    "menubar": "5.2.3",
    "moment-timezone": "^0.5.14",
    "mv": "^2.1.1",
    "nedb": "Akylas/nedb",
    "noble": "1.8.1",
    "node-notifier": "^5.1.2",
    "opencv": "git+ssh://[email protected]/Aryballe/node-opencv.git",
    "prop-types": "^15.6.0",
    "r-script": "farfromrefug/r-script",
    "react": "15.6.2",
    "react-chartjs-2": "2.6.4",
    "react-color": "^2.13.8",
    "react-component-resizable": "farfromrefug/react-component-resizable",
    "react-confirm": "0.1.16",
    "react-dom": "15.6.2",
    "react-draggable": "^3.0.3",
    "react-list": "farfromrefug/react-list",
    "react-navigation-controller": "farfromrefug/react-navigation-controller",
    "react-notification-system": "0.2.16",
    "react-splitter-layout2": "^0.2.13",
    "react-tap-event-plugin": "2.0.1",
    "react-transition-group-plus": "^0.5.2",
    "react-virtualized": "^9.12.0",
    "react-xterm": "^1.1.1",
    "request": "^2.83.0",
    "request-promise-native": "1.0.5",
    "semver": "^5.4.1",
    "serialport": "^6.0.4",
    "source-map-support": "0.5.0",
    "sqlite": "^2.8.0",
    "sqlite3": "farfromrefug/node-sqlite3",
    "sudo-prompt": "^8.0.0",
    "temp": "0.8.3",
    "tinycolor2": "1.4.1",
    "unzipper": "^0.8.11"

As for the code i something as simple as this:

 <AutoSizer>
            {({width, height}) => (
              <List
                ref="list"
                height={height}
                rowCount={rowCount}
                rowHeight={72}
                rowRenderer={this.renderRow}
                overscanRowsCount={20}
                width={width}
              />
            )}
          </AutoSizer>

There are a lot of parent but nothing that should make it not work like that.
Does anyone already encoutered something like that?

Thanks

Most helpful comment

Actually got it to work.
I finally understood that you need to apply the style parameter of the rowRenderer to rendered div.
This should we written in RED in the wiki ;)

>All comments

Actually got it to work.
I finally understood that you need to apply the style parameter of the rowRenderer to rendered div.
This should we written in RED in the wiki ;)

Was this page helpful?
0 / 5 - 0 ratings