FlatList Error

[JonhsonFu]

Description

When I navigate to the page which has FlatList,it will send the error "TypeError: undefined is not an object (evaluating 'props.getItem')",I have no idea,help!!!



And I checked my babel.config.js ,it's without "@babel/plugin-proposal-class-properties",but in my yarn.lock,it's came to my dependencies.

Version

0.66.0

Output of npx react-native info

Steps to reproduce

just goto the page which used FlatList

Snack, code example, screenshot, or link to a repository

[SectionTN]

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

[JonhsonFu]

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

I tried, it didn't work; I have written before that this is OK, maybe it is my environment problem, I am going to create a new project to try this component

[JonhsonFu]

After I recreated the project, this component is fine, but the props are undefined in my current project

[leepowellnbs]

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 =

[Emptyuu]

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

[DanielT777]

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

Same here

Using: "expo": "~47.0.12",
IOS and Android

[sidekick-richard]

@babel/plugin-proposal-private-methods in babel.config.js was the culprit in my case. removing it, running yarn start --reset-cache and then running the app worked for me.
source: https://stackoverflow.com/questions/69922302/react-native-flatlist-undefined-is-not-an-object-evaluating-props-getitem

[Puyodead1]

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 =

Thank you, this worked for me.

[1mike12]

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

react-native/Libraries/Lists/FlatList.js

Line 480 in 48c7adc

getItem,

[nithronium]

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

react-native/Libraries/Lists/FlatList.js

Line 480 in 48c7adc

getItem,

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.

[nithronium]

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.

[ss1290]

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

react-native/Libraries/Lists/FlatList.js

Line 480 in 48c7adc

getItem,

Are you able to solve the issue ? I am facing the same issue

[ss1290]

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.

Are you able to solve the issue ? I am facing the same issue

[Sonu7759]

Description

When I navigate to the page which has FlatList,it will send the error "TypeError: undefined is not an object (evaluating 'props.getItem')",I have no idea,help!!! And I checked my babel.config.js ,it's without "@babel/plugin-proposal-class-properties",but in my yarn.lock,it's came to my dependencies.

Version

0.66.0

Output of npx react-native info

Steps to reproduce

just goto the page which used FlatList

Snack, code example, screenshot, or link to a repository

are you able to solve the problem

[uhgenie7]

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.

[RamenSea]

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.

[misha-pavlov]

Any solution for the case when I need babel plugin?

[dieguezz]

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 ?