Expo Run Web, numColumns BUG

[chensuhuan]

Run web

Problem: The list variable numColumns=2, when navigating through the reat navigation, clicking to jump to the page and returning again will cause layout errors!

Current behavior

Click to return, layout error!

Video:

https://user-images.githubusercontent.com/131914374/234716986-e151f90c-dc26-400d-99f5-dc8ebd84c4cb.mov

Expected behavior

123

To Reproduce

expo:https://snack.expo.dev/@chensuhuan1995/hello-react-navigation-%7C-react-navigation?platform=web

Platform:

• [ ] iOS
• [ ] Android

FlashList or MasonryFlashList ，Same error occurred

Environment

x.y.z

[WKampel]

Did you find a solution to this?

[itsramiel]

@chensuhuan Did you find a solution. Facing this too

[itsramiel]

@WKampel hope you can share a solution if you found one

[shiroyk]

@WKampel hope you can share a solution if you found one

Temporary solution, this works for me.

recyclerlistview+4.2.0.patch

diff --git a/node_modules/recyclerlistview/dist/reactnative/core/layoutmanager/LayoutManager.js b/node_modules/recyclerlistview/dist/reactnative/core/layoutmanager/LayoutManager.js
index 9cd3c57..81847df 100644
--- a/node_modules/recyclerlistview/dist/reactnative/core/layoutmanager/LayoutManager.js
+++ b/node_modules/recyclerlistview/dist/reactnative/core/layoutmanager/LayoutManager.js
@@ -112,7 +112,7 @@ var WrapGridLayoutManager = /** @class */ (function (_super) {
var itemRect = null;
var oldLayout = null;
for (var i = startIndex; i < itemCount; i++) {
-            oldLayout = this._layouts[i];
+            oldLayout = undefined;
var layoutType = this._layoutProvider.getLayoutTypeForIndex(i);
if (oldLayout && oldLayout.isOverridden && oldLayout.type === layoutType) {
itemDim.height = oldLayout.height;
diff --git a/node_modules/recyclerlistview/src/core/layoutmanager/LayoutManager.ts b/node_modules/recyclerlistview/src/core/layoutmanager/LayoutManager.ts
index 94c34bd..540c5cf 100644
--- a/node_modules/recyclerlistview/src/core/layoutmanager/LayoutManager.ts
+++ b/node_modules/recyclerlistview/src/core/layoutmanager/LayoutManager.ts
@@ -130,7 +130,7 @@ export class WrapGridLayoutManager extends LayoutManager {
let oldLayout = null;

     for (let i = startIndex; i < itemCount; i++) {

• oldLayout = this._layouts[i];
• oldLayout = undefined as unknown as Layout; const layoutType = this._layoutProvider.getLayoutTypeForIndex(i); if (oldLayout && oldLayout.isOverridden && oldLayout.type === layoutType) { itemDim.height = oldLayout.height;

[itsramiel]

From experimenting myself, I found out this happens when item widths have a fraction, like 90.8. How did you come up with this @shiroyk. Are there any downsides?

[shiroyk]

@itsramiel Discovered through breakpoint debugging, this solution may be better.

recyclerlistview+4.2.0.patch

diff --git a/node_modules/recyclerlistview/dist/reactnative/platform/web/viewrenderer/ViewRenderer.js b/node_modules/recyclerlistview/dist/reactnative/platform/web/viewrenderer/ViewRenderer.js
index 2f1b856..e2c2d7a 100644
--- a/node_modules/recyclerlistview/dist/reactnative/platform/web/viewrenderer/ViewRenderer.js
+++ b/node_modules/recyclerlistview/dist/reactnative/platform/web/viewrenderer/ViewRenderer.js
@@ -90,7 +90,7 @@ var ViewRenderer = /** @class */ (function (_super) {
if (fromObserver === void 0) { fromObserver = false; }
if (this.props.forceNonDeterministicRendering && this.props.onSizeChanged) {
var mainDiv = this._mainDiv;
-            if (mainDiv) {
+            if (mainDiv && mainDiv.clientWidth && mainDiv.clientHeight) {
this._dim.width = mainDiv.clientWidth;
this._dim.height = mainDiv.clientHeight;
if (this.props.width !== this._dim.width || this.props.height !== this._dim.height) {
diff --git a/node_modules/recyclerlistview/src/platform/web/viewrenderer/ViewRenderer.tsx b/node_modules/recyclerlistview/src/platform/web/viewrenderer/ViewRenderer.tsx
index 6652efa..b5d92a2 100644
--- a/node_modules/recyclerlistview/src/platform/web/viewrenderer/ViewRenderer.tsx
+++ b/node_modules/recyclerlistview/src/platform/web/viewrenderer/ViewRenderer.tsx
@@ -85,7 +85,7 @@ export default class ViewRenderer extends BaseViewRenderer<any> {
private _checkSizeChange(fromObserver: boolean = false): void {
if (this.props.forceNonDeterministicRendering && this.props.onSizeChanged) {
const mainDiv = this._mainDiv;
-            if (mainDiv) {
+            if (mainDiv && mainDiv.clientWidth && mainDiv.clientHeight) {
this._dim.width = mainDiv.clientWidth;
this._dim.height = mainDiv.clientHeight;
if (this.props.width !== this._dim.width || this.props.height !== this._dim.height) {

[itsramiel]

@shiroyk I'll give that a try 👍

[GatienBoquet]

I have the same issue. Any fix ?