react-native: FlatList Error

Yep, getting the same error, you can use patch-package to add this.props = props to the constructor, which should give you a temp workaround, for some reason calling super(props) doesn’t seem to set the props to the instance.

constructor(props: Props<ItemT>) {
     super(props);
+    this.props = props;
     this._checkProps(this.props);
     if (this.props.viewabilityConfigCallbackPairs) {
       this._virtualizedListPairs =

try const renderItem = ({item}) => .... … renderItem={renderItem(item)}

Fixed the issue,

Simply remove @babel/plugin-proposal-class-properties from the babel.config.js’s plugins section.

Then run npx react-native start --reset-cache

Error will disappear.

Another (less ugly) way of fixing it is by deleting line 311 where it sais props: Props<ItemT>;

You can make the change locally on node_modules/react-native/Libraries/Lists/FlatList.js and then add patch-package to fix it.

Just add "postinstall": "npx patch-package", in your package.json.

You will need the fix until you install 0.74-rc1

Can you confirm its working for you and close the issue @JonhsonFu ?

Fixed the issue, Simply remove @babel/plugin-proposal-class-properties from the babel.config.js’s plugins section. Then run npx react-native start --reset-cache Error will disappear.

Thank you, this worked for me. Importantly, must clear the cache.

This doesn’t work for those of us who need that babel plugin.

Even something as simple as this component results in an Error.

import React from "react"
import { FlatList, Text } from "react-native"

export default function HomeScreen() {
  return (
    <FlatList
      data={[
        { title: "one", id: "1" },
        { title: "two", id: "2" }
      ]}
      renderItem={({ item }) => {
        return <Text key={item.id}>{item.title}</Text>
      }}
      keyExtractor={(item) => item.id}
    />
  )
}

TypeError: Cannot read property 'getItem' of undefined

This error is located at:
    in FlatList (created by HomeScreen)
    in HomeScreen (created by SceneView)

So for some reason it seems like the props are not being passed at all here

https://github.com/facebook/react-native/blob/48c7adc3bf574c6d592e9d1c1c4bd266f88063f7/Libraries/Lists/FlatList.js#L480

This became a nightmare for me at this point. A few days ago perfectly working app now stopped working without changing ANYTHING. It’s literally the same code base, all I did was to close the emulator and code editor (not even the PC is restarted) and work on some other project for two days and come back and my apps were stuck on loading because of this error (App was already running fine)

So I close the terminals and re-run with npx react-native run-android and this appears. I don’t know what happened. It seems to me the super(props) is not working but no idea why.

Even something as simple as this component results in an Error.

import React from "react"
import { FlatList, Text } from "react-native"

export default function HomeScreen() {
  return (
    <FlatList
      data={[
        { title: "one", id: "1" },
        { title: "two", id: "2" }
      ]}
      renderItem={({ item }) => {
        return <Text key={item.id}>{item.title}</Text>
      }}
      keyExtractor={(item) => item.id}
    />
  )
}

TypeError: Cannot read property 'getItem' of undefined

This error is located at:
    in FlatList (created by HomeScreen)
    in HomeScreen (created by SceneView)

So for some reason it seems like the props are not being passed at all here

https://github.com/facebook/react-native/blob/48c7adc3bf574c6d592e9d1c1c4bd266f88063f7/Libraries/Lists/FlatList.js#L480

I also met the same problem. Have you found a more appropriate solution…