react-native: Flatlist render error: Cannot read property 'getItem' of undefined

@mattgle I meant that you don’t need nothing to remove from babel.config.js, as ‘@babel/plugin-proposal-private-methods’ is needed by jest. You need to install @babel/plugin-transform-flow-strip-types yarn add -D @babel/plugin-transform-flow-strip-types or npm install @babel/plugin-transform-flow-strip-types --save-dev and add it to babel.config.js before @babel/plugin-proposal-private-methods and other plugins. So your babel.config.js plugins will look like this plugins: [ ..... '@babel/plugin-transform-flow-strip-types', '@babel/plugin-proposal-class-properties' '@babel/plugin-proposal-private-methods', ..... ],

I found the problem. After removing this code from babel.config.js and removing @babel/plugin-proposal-private-methods, everything is fine. [ '@babel/plugin-proposal-private-methods', { loose: true, }, ],

@mattgle I meant that you don’t need nothing to remove from babel.config.js, as ‘@babel/plugin-proposal-private-methods’ is needed by jest. You need to install @babel/plugin-transform-flow-strip-types yarn add -D @babel/plugin-transform-flow-strip-types or npm install @babel/plugin-transform-flow-strip-types --save-dev and add it to babel.config.js before @babel/plugin-proposal-private-methods and other plugins. So your babel.config.js plugins will look like this plugins: [ ..... '@babel/plugin-transform-flow-strip-types', '@babel/plugin-proposal-class-properties' '@babel/plugin-proposal-private-methods', ..... ],

This works! Make sure you run:

npx react-native start --reset-cache

after making the changes

Im still having the same issue. Adding this.props = props; under super(props); in the construction around L412-L420 in node_modules/react-native/Libraries/Lists/FlatList.js fixed the issue until I tried to use EAS to compile my app to put in on TestFlight.

ive removed the suggested parts of my babel.config.js above but the error still persits. Completely stuck!

Since this is a common enough plugin (as is class-properties), I think this should be better documented and possibly fixed in the RN codebase. Please re-open!

@mattgle I meant that you don’t need nothing to remove from babel.config.js, as ‘@babel/plugin-proposal-private-methods’ is needed by jest. You need to install @babel/plugin-transform-flow-strip-types yarn add -D @babel/plugin-transform-flow-strip-types or npm install @babel/plugin-transform-flow-strip-types --save-dev and add it to babel.config.js before @babel/plugin-proposal-private-methods and other plugins. So your babel.config.js plugins will look like this plugins: [ ..... '@babel/plugin-transform-flow-strip-types', '@babel/plugin-proposal-class-properties' '@babel/plugin-proposal-private-methods', ..... ],

Thanks, this works for expo:

/* eslint-disable @typescript-eslint/no-unsafe-call */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['@babel/plugin-transform-flow-strip-types', ['@babel/plugin-transform-private-methods', { loose: true }]],
  };
};

then

npx expo start -c

@mattgle I meant that you don’t need nothing to remove from babel.config.js, as ‘@babel/plugin-proposal-private-methods’ is needed by jest. You need to install @babel/plugin-transform-flow-strip-types yarn add -D @babel/plugin-transform-flow-strip-types or npm install @babel/plugin-transform-flow-strip-types --save-dev and add it to babel.config.js before @babel/plugin-proposal-private-methods and other plugins. So your babel.config.js plugins will look like this plugins: [ ..... '@babel/plugin-transform-flow-strip-types', '@babel/plugin-proposal-class-properties' '@babel/plugin-proposal-private-methods', ..... ],

This saved me a lot of time, you have described this very accurately, also to add do remember to clear the cache once while starting this by : yarn start -- --reset-cache

@infoani92 instead of removing @babel/plugin-proposal-private-methods you could install to devDependancies and add in babel plugins before @babel/plugin-proposal-private-methods (it is important) this plugin: @babel/plugin-transform-flow-strip-types. It should help

 this.props = props;

I solved it, following this step by adding the props in the constructor alterando este construtor emnode_modules/react-native/Libraries/Lists/FlatList.js

constructor(props: Props<ItemT>) { super(props); this._checkProps(this.props); if (this.props.viewabilityConfigCallbackPairs) { this._virtualizedListPairs = // rest of code } para isso (adicionando this.props = props;)

constructor(props: Props<ItemT>) { super(props); this.props = props; this._checkProps(this.props); if (this.props.viewabilityConfigCallbackPairs) { this._virtualizedListPairs = // rest of code }

Thanks to @chizhkov422 I have checked my babel.config.js one more time, and removerd

“plugins”: [“@babel/plugin-proposal-class-properties”]

which made it work again. Thanks one more time

The issue for me was using private methods in classes. For some reason, the combination of private class methods and the babel plugins to allow for the private class methods broke the react native flatlist.

changing this constructor in node_modules/react-native/Libraries/Lists/FlatList.js

constructor(props: Props<ItemT>) {
    super(props);
    this._checkProps(this.props);
    if (this.props.viewabilityConfigCallbackPairs) {
      this._virtualizedListPairs =
      // rest of code
}

to this (adding this.props = props;)

constructor(props: Props<ItemT>) {
    super(props);
    this.props = props;
    this._checkProps(this.props);
    if (this.props.viewabilityConfigCallbackPairs) {
      this._virtualizedListPairs =
      // rest of code
}

fixed the issue of being allowed private classes while using the following babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo", "module:metro-react-native-babel-preset"],
    plugins: [
      "react-native-reanimated/plugin",
      "nativewind/babel",
      ["@babel/plugin-proposal-class-properties", { loose: true }],
      ["@babel/plugin-proposal-private-methods", { loose: true }],
      ["@babel/plugin-proposal-private-property-in-object", { loose: true }],
      [
        "module-resolver",
        {
          root: ["."],
          alias: {
            "@app": "./",
          },
        },
      ],
    ],
  };
};

obviously when I had to remove the private classes and respective plugins from the babel config when compiling as EAS downloads the node modules and doesn’t use the locally stored files. I don’t know whether this is a bug that can be fixed or whether there is a reason this can’t be changed

Hii, In this plugins , nothing to add just remove what you add all plugins you remove

On Tue, Jun 13, 2023 at 6:39 AM Allu Lavaraju @.***> wrote:

nothing to add just remove

On Tue, Jun 13, 2023 at 1:46 AM mattgle.eth @.***> wrote:

@infoani92 https://github.com/infoani92 instead of removing @babel/plugin-proposal-private-methods you could install to devDependancies and add in babel plugins before @babel/plugin-proposal-private-methods (it is important) this plugin: @babel/plugin-transform-flow-strip-types. It should help

Im not sure if I’m following you, you mean to do this right?

Delete

@./plugin-proposal-class-properties’, @./plugin-proposal-private-methods’,

from babel.config.js and then run

yarn add @babel/plugin-proposal-private-methods --dev yarn add @babel/plugin-transform-flow-strip-types --dev

— Reply to this email directly, view it on GitHub < https://github.com/facebook/react-native/issues/36828#issuecomment-1588027569>,

or unsubscribe < https://github.com/notifications/unsubscribe-auth/AE4ZHHHF3NOAORINHVDDNFTXK52I7ANCNFSM6AAAAAAWVA6QMI>

. You are receiving this because you commented.Message ID: @.***>

– Thanks Allu Lavaraju Sr. Software Engineer 9912661587

— Reply to this email directly, view it on GitHub https://github.com/facebook/react-native/issues/36828#issuecomment-1588351805, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4ZHHBZMM5WNCK7NTSOLZLXK64S3ANCNFSM6AAAAAAWVA6QMI . You are receiving this because you are subscribed to this thread.Message ID: @.***>

– Thanks Allu Lavaraju Sr. Software Engineer 9912661587

nothing to add just remove

On Tue, Jun 13, 2023 at 1:46 AM mattgle.eth @.***> wrote:

@infoani92 https://github.com/infoani92 instead of removing @babel/plugin-proposal-private-methods you could install to devDependancies and add in babel plugins before @babel/plugin-proposal-private-methods (it is important) this plugin: @babel/plugin-transform-flow-strip-types. It should help

Im not sure if I’m following you, you mean to do this right?

Delete

@./plugin-proposal-class-properties’, @./plugin-proposal-private-methods’,

from babel.config.js and then run

yarn add @babel/plugin-proposal-private-methods --dev yarn add @babel/plugin-transform-flow-strip-types --dev

— Reply to this email directly, view it on GitHub https://github.com/facebook/react-native/issues/36828#issuecomment-1588027569, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4ZHHHF3NOAORINHVDDNFTXK52I7ANCNFSM6AAAAAAWVA6QMI . You are receiving this because you commented.Message ID: @.***>

– Thanks Allu Lavaraju Sr. Software Engineer 9912661587

@infoani92 instead of removing @babel/plugin-proposal-private-methods you could install to devDependancies and add in babel plugins before @babel/plugin-proposal-private-methods (it is important) this plugin: @babel/plugin-transform-flow-strip-types. It should help

Im not sure if I’m following you, you mean to do this right?

Delete the following lines from babel.config.js

 '@babel/plugin-proposal-class-properties',
 '@babel/plugin-proposal-private-methods',

and then run

yarn add @babel/plugin-proposal-private-methods --dev
yarn add @babel/plugin-transform-flow-strip-types --dev

I found the problem. After removing this code from babel.config.js and removing @babel/plugin-proposal-private-methods, everything is fine. [ '@babel/plugin-proposal-private-methods', { loose: true, }, ],

Thank you @chizhkov422 you saved my time

Maybe this will help solve the problem

Hii, In this plugins , nothing to add just remove what you add all plugins you remove On Tue, Jun 13, 2023 at 6:39 AM Allu Lavaraju @.> wrote: nothing to add just remove On Tue, Jun 13, 2023 at 1:46 AM mattgle.eth @.> wrote: > @infoani92 https://github.com/infoani92 instead of removing > @babel/plugin-proposal-private-methods you could install to devDependancies > and add in babel plugins before @babel/plugin-proposal-private-methods (it > is important) this plugin: @babel/plugin-transform-flow-strip-types. It > should help > > Im not sure if I’m following you, you mean to do this right? > > Delete > > @./plugin-proposal-class-properties’, > @./plugin-proposal-private-methods’, > > from babel.config.js > and then run > > yarn add @babel/plugin-proposal-private-methods --dev > yarn add @babel/plugin-transform-flow-strip-types --dev > > — > Reply to this email directly, view it on GitHub > < #36828 (comment)>, > or unsubscribe > < https://github.com/notifications/unsubscribe-auth/AE4ZHHHF3NOAORINHVDDNFTXK52I7ANCNFSM6AAAAAAWVA6QMI> > . > You are receiving this because you commented.Message ID: > @.> > – Thanks Allu Lavaraju Sr. Software Engineer 9912661587 — Reply to this email directly, view it on GitHub <#36828 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4ZHHBZMM5WNCK7NTSOLZLXK64S3ANCNFSM6AAAAAAWVA6QMI . You are receiving this because you are subscribed to this thread.Message ID: @.> – Thanks Allu Lavaraju Sr. Software Engineer 9912661587

I need those plugins bro

Yeah, I have tries this previously as well, but didnt help … (((

@mattgle I meant that you don’t need nothing to remove from babel.config.js, as ‘@babel/plugin-proposal-private-methods’ is needed by jest. You need to install @babel/plugin-transform-flow-strip-types yarn add -D @babel/plugin-transform-flow-strip-types or npm install @babel/plugin-transform-flow-strip-types --save-dev and add it to babel.config.js before @babel/plugin-proposal-private-methods and other plugins. So your babel.config.js plugins will look like this plugins: [ ..... '@babel/plugin-transform-flow-strip-types', '@babel/plugin-proposal-class-properties' '@babel/plugin-proposal-private-methods', ..... ],

Thanks, this works for expo:

/* eslint-disable @typescript-eslint/no-unsafe-call */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['@babel/plugin-transform-flow-strip-types', ['@babel/plugin-transform-private-methods', { loose: true }]],
  };
};

then

npx expo start -c

Thank you. This worked for me too in expo.

 this.props = props;

I solved it, following this step by adding the props in the constructor alterando este construtor emnode_modules/react-native/Libraries/Lists/FlatList.js

constructor(props: Props) { super(props); this._checkProps(this.props); if (this.props.viewabilityConfigCallbackPairs) { this._virtualizedListPairs = // rest of code } para isso (adicionando this.props = props;)

constructor(props: Props) { super(props); this.props = props; this._checkProps(this.props); if (this.props.viewabilityConfigCallbackPairs) { this._virtualizedListPairs = // rest of code }

This fixed my problem after trying many of the other suggestions. Thank you

I have the same issue here, not resolved by others suggestions

This shouldn’t have been closed. The bug is still there. I agree with 0xFadedd: https://github.com/facebook/react-native/issues/36828#issuecomment-1589555539

The local object this.props is not initialized. The fix is simply to initialize it as 0xFadedd lucidly explained last year.

Guys, I’m also getting this same issue in the Flatlist from today morning. I tried rolling back my project to few days back and deleted the node-modules, .expo directory and package-lock.json and did an npm cache clean --force before npm i again but the problem didn’t solved.

Here is what it looks like:

Here is what my rolled back version of babel.config.js looks like:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'expo-router/babel',
      'nativewind/babel',
      'react-native-reanimated/plugin',
    ],
  };
};

Here is what my package.json looks like:

{
  "name": "project-name",
  "version": "1.0.0",
  "main": "expo-router/entry",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "^49.0.16",
    "expo-checkbox": "~2.4.0",
    "expo-clipboard": "~4.3.1",
    "expo-constants": "^14.4.2",
    "expo-document-picker": "~11.5.4",
    "expo-linear-gradient": "~12.3.0",
    "expo-linking": "~5.0.2",
    "expo-router": "^2.0.10",
    "expo-status-bar": "~1.6.0",
    "formik": "^2.4.5",
    "nativewind": "^2.0.11",
    "react": "^18.2.0",
    "react-native": "0.72.6",
    "react-native-element-dropdown": "^2.10.0",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-modal": "^13.0.1",
    "react-native-qrcode-svg": "^6.2.0",
    "react-native-reanimated": "~3.3.0",
    "react-native-reanimated-carousel": "^3.5.1",
    "react-native-root-toast": "^3.5.1",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-svg": "13.9.0",
    "react-native-vector-icons": "^10.0.1",
    "yup": "^1.3.2"
  },
  "devDependencies": {
    "@babel/core": "^7.23.2",
    "@react-native-community/datetimepicker": "7.2.0",
    "@tailwindcss/typography": "^0.5.10",
    "@tsconfig/react-native": "^3.0.2",
    "@types/jest": "^29.5.7",
    "@types/react": "^18.2.34",
    "@types/react-native-vector-icons": "^6.4.16",
    "@types/react-test-renderer": "^18.0.5",
    "tailwindcss": "3.3.2",
    "typescript": "^5.2.2"
  },
  "private": true
}

Please note that, this error was not there before when I committed these changes.

Can anyone please help me out.

Guys, I solved this issue. It was just expo catch that was giving problem. I used npx expo . -c on the root of the project.

@mattgle I meant that you don’t need nothing to remove from babel.config.js, as ‘@babel/plugin-proposal-private-methods’ is needed by jest. You need to install @babel/plugin-transform-flow-strip-types yarn add -D @babel/plugin-transform-flow-strip-types or npm install @babel/plugin-transform-flow-strip-types --save-dev and add it to babel.config.js before @babel/plugin-proposal-private-methods and other plugins. So your babel.config.js plugins will look like this plugins: [ ..... '@babel/plugin-transform-flow-strip-types', '@babel/plugin-proposal-class-properties' '@babel/plugin-proposal-private-methods', ..... ],

this is the best answer, thanks @Roman-Hladilka

I found the problem. After removing this code from babel.config.js and removing @babel/plugin-proposal-private-methods, everything is fine. [ '@babel/plugin-proposal-private-methods', { loose: true, }, ],

good job