FlashList errs when rotating the device with dynamic numColumns and ListEmptyComponent

[JulienFremyMP]

Current behavior

I have the following code:

import { Text, useWindowDimensions } from 'react-native';

import { FlashList } from '@shopify/flash-list';

function App(): JSX.Element {
    const { width } = useWindowDimensions();
    const columnsCount = width / 100;

    const EmptyState = () => {
        return <Text>Wow such empty!</Text>;
    };

    return (
        <FlashList
            data={[]}
            renderItem={(_) => {
                return <></>;
            }}
            numColumns={Math.floor(columnsCount)}
            estimatedItemSize={200}
            ListEmptyComponent={EmptyState}
        />
    );
}

export default App;

I run it on an android real tablet device, specifically a Galaxy Tab S5e (SM-T720)

I rotate the device.

There is an error displayed when I do it:

 ERROR  TypeError: Cannot read property 'y' of undefined

This error is located at:
    in ProgressiveListView (created by StickyContainer)
    in RCTView (created by View)
    in View (created by StickyContainer)
    in StickyContainer (created by FlashList)
    in FlashList (created by App)
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in example(RootComponent), js engine: hermes
 ERROR  TypeError: Cannot read property 'y' of undefined

This error is located at:
    in ProgressiveListView (created by StickyContainer)
    in RCTView (created by View)
    in View (created by StickyContainer)
    in StickyContainer (created by FlashList)
    in FlashList (created by App)
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in example(RootComponent), js engine: hermes

I would expect to have the view properly rotated instead.

To Reproduce

Use react-native to initialize an empty project, add flashlist to it, and replace the default App code by the one I posted above.

Platform:

• iOS
• Android

It also occurs on iPad (be sure to display the app in the whole screen, https://stackoverflow.com/questions/74907554/ipad-pro-not-showing-full-screen-content-in-react-native-xcode-14-0-1)

Environment

I'm on @shopify/flash-list": "^1.6.3"

[JulienFremyMP]

This only happens when I use a numColumns parameter that depends on the width of the device and a ListEmptyComponent, to help you narrow the bug's origin.

And thanks for this project by the way!

[nguyenductoan1995]

i got same issue pls help me way for resolve it

[jkinggg]

Same issue here

[ldalzottomp]

I don't reproduce anymore with FlashList 1.6.3 and react-native 0.73.6

[asleepace]

I was able to fix the issue by changing the FlashList key when the list is empty and the number of columns changes. Note that this will completely destroy the list and re-create a new one.

// change the key when the list is empty & numCols changes
const listKey = data?.length === 0 ? `empty-list-${numCols}-cols` : "normal-list"

// be sure to include key={listKey} when rendering
return (
   <FlashList
      key={listKey}
      ListEmptyComponent={
        <MyEmptyComponent />
      }
      numCols={numCols}
      data={data}
   />
)

It's a bit hacky, but it works 🤷‍♂

[Abdulazeez-98]

When using <FlatList> with dynamic numColumns I get the error:

Changing numColumns on the fly is not supported. Change the key prop on FlatList when changing the number of columns to force a fresh render of the component.

However, this error doesn't occur in FlashList.

Regarding FlashList, I get the same error of "Cannot read property 'y' of undefined" when the list is empty and numColumns is changed (e.g. the devices is rotated while still fetching the data).
The problem was solved by the solution suggested by @asleepace .