Flatlist render error: Cannot read property 'getItem' of undefined #36828

salahbm · 2023-04-06T07:28:49Z

Description

I have been working on project which has several flatlists, which are causing problem suddenly. All flatlists that I have shows same issue dispite they were working previously. To add, auto refreshing also stopped working I dont know they are related to each other or not.

React Native Version

0.71.3

Output of `npx react-native info`

System:
OS: Windows 10 10.0.19044
CPU: (8) x64 Intel(R) Core(TM) i3-10105 CPU @ 3.70GHz
Memory: 5.21 GB / 15.87 GB
Binaries:
Node: 18.15.0 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 9.5.0 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK:
API Levels: 28, 31, 33
Build Tools: 28.0.3, 30.0.3, 31.0.0, 33.0.0
System Images: android-28 | Google APIs Intel x86 Atom, android-31 | Intel x86 Atom_64, android-31 | Google Play Intel x86 Atom_64, android-33 | Google APIs Intel x86_64 Atom
Android NDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: AI-213.7172.25.2113.9123335
Visual Studio: Not Found
Languages:
Java: 11.0.18
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.3 => 0.71.3
react-native-windows: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Steps to reproduce:

Open the project and navigate to the screen where the flatlists are being used.
Observe that all the flatlists are not rendering and showing an error.
Check the console for any error messages related to the flatlists.
Look for the specific error message "Cannot read property 'getItem' of undefined".
Verify that this error is being displayed for all the flatlists on the screen.
Check if the code for the flatlists has been modified recently or if any libraries have been updated.
Verify that the data source for the flatlists is correctly defined and passed as props.
Make sure that the flatlist component is imported and rendered properly in the code.
Check if any other component or library is conflicting with the flatlists.
Provide any additional information that might be helpful for developers to identify and fix the issue.
Expected outcome:
The flatlists should render without any errors.

Actual outcome:
The flatlists are not rendering and showing the error message "Cannot read property 'getItem' of undefined".

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

// CODE IS GIVEN BELOW IS EXAMPLE WHICH WORKS ON BRAND NEW PROJECT BUT NOT IN THE CURRENTLY USED ONE

import React, {useState} from 'react';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
Platform,
View,
FlatList,
} from 'react-native';
import {COLORS} from '../constants/theme';
const DATA = [
{id: '1', title: 'Item 1'},
{id: '2', title: 'Item 2'},
{id: '3', title: 'Item 3'},
{id: '4', title: 'Item 4'},
{id: '5', title: 'Item 5'},
{id: '6', title: 'Item 6'},
{id: '7', title: 'Item 7'},
];

const Item = ({title}) => (

{title}

);
const Settings = () => {
const [selectedId, setSelectedId] = useState(null);

const renderItem = ({item}) => ;

return (

<FlatList
horizontal
showsHorizontalScrollIndicator={false}
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
extraData={selectedId}
/>

);
};

const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 50,
},
item: {
backgroundColor: COLORS.primary,
padding: 5,
borderRadius: 20,
marginHorizontal: 5,
height: 50,
justifyContent: 'center',
alignItems: 'center',
},
title: {
fontSize: 22,
color: 'white',
},
});

export default Settings;

The text was updated successfully, but these errors were encountered:

cortinico · 2023-04-06T09:22:34Z

// CODE IS GIVEN BELOW IS EXAMPLE WHICH WORKS ON BRAND NEW PROJECT BUT NOT IN THE CURRENTLY USED ONE

We would need a reproducer to investigate this further sadly.

github-actions · 2023-04-06T09:22:54Z

⚠️	Missing Reproducible Example
ℹ️	It looks like your issue is missing a reproducible example. Please provide a Snack or a repository that demonstrates the issue you are reporting in a minimal, complete, and reproducible manner.

chizhkov422 · 2023-04-07T13:06:32Z

Got the same error, only on android, any solution?

salahbm · 2023-04-08T00:04:39Z

r

not yet, been searching for a week already

salahbm · 2023-04-08T01:30:13Z

sue you are re

Hello, thanks for yout reply. Here I have created the sample repo which is exactly same as my project, but it is working on new project. LINK: github repository. Thanks

NickGerleman · 2023-04-08T05:11:50Z

This issue is not actionable without a repro or at least a callstack.

chizhkov422 · 2023-04-08T07:41:04Z

TypeError: Cannot read property 'getItem' of undefined

This error is located at:
in FlatList (created by ChangeNetwork)
in RNCSafeAreaView
in Unknown (created by ChangeNetwork)
in RCTView (created by View)
in View (created by ChangeNetwork)
in ChangeNetwork (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by SceneView)
in RCTView (created by View)
in View (created by DebugContainer)
in DebugContainer (created by MaybeNestedStack)
in MaybeNestedStack (created by SceneView)
in RCTView (created by View)
in View (created by SceneView)
in RNSScreen (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by InnerScreen)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by InnerScreen)
in InnerScreen (created by Screen)
in Screen (created by SceneView)
in SceneView (created by NativeStackViewInner)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by ScreenStack)
in RNSScreenStack (created by ScreenStack)
in ScreenStack (created by NativeStackViewInner)
in NativeStackViewInner (created by NativeStackView)
in RCTView (created by View)
in View (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by NativeStackView)
in NativeStackView (created by NativeStackNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by NativeStackNavigator)
in NativeStackNavigator (created by HomeNavigation)
in HomeNavigation (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by SceneView)
in RCTView (created by View)
in View (created by DebugContainer)
in DebugContainer (created by MaybeNestedStack)
in MaybeNestedStack (created by SceneView)
in RCTView (created by View)
in View (created by SceneView)
in RNSScreen (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by InnerScreen)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by InnerScreen)
in InnerScreen (created by Screen)
in Screen (created by SceneView)
in SceneView (created by NativeStackViewInner)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by ScreenStack)
in RNSScreenStack (created by ScreenStack)
in ScreenStack (created by NativeStackViewInner)
in NativeStackViewInner (created by NativeStackView)
in RCTView (created by View)
in View (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by NativeStackView)
in NativeStackView (created by NativeStackNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by NativeStackNavigator)
in NativeStackNavigator (created by RootNavigation)
in PortalProviderComponent (created by BottomSheetModalProviderWrapper)
in BottomSheetModalProviderWrapper (created by RootNavigation)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by RootNavigation)
in RNCSafeAreaView
in Unknown (created by RootNavigation)
in RootNavigation (created by App)
in RCTView (created by View)
in View (created by KeyboardAvoidingView)
in KeyboardAvoidingView (created by App)
in RCTView (created by View)
in View (created by Pressable)
in Pressable (created by Pressable)
in SdkContextProvider (created by App)
in PersistGate (created by App)
in Provider (created by App)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by App)
in RNGestureHandlerRootView (created by GestureHandlerRootView)
in GestureHandlerRootView (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 ChainGates(RootComponent), js engine: hermes

chizhkov422 · 2023-04-08T07:41:48Z

chizhkov422 · 2023-04-08T07:43:00Z

Maybe this will help solve the problem

NickGerleman · 2023-04-08T09:00:07Z

So, the undefined bit here looks to be "this.props", which is derived directly from the input of the components constructor.

react-native/Libraries/Lists/FlatList.js

Line 420 in 030ab8e

this._checkProps(this.props);

To continue figuring this out, I would attach a debugger to the FlatList constructor and follow the values. It seems very unlikely that this issue is in FlatList, but there could maybe be other environment factors.

chizhkov422 · 2023-04-08T09:42:50Z

I tried using without the extra parameters in App.ts, but the problem remained. The error is only on Android, everything is fine with iOS.

chizhkov422 · 2023-04-08T11:37:25Z

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, }, ],

salahbm · 2023-04-08T13:47:46Z

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

salahbm · 2023-04-08T13:55:06Z

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

victorLee11 · 2023-04-18T07:18:05Z

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

artemis-prime · 2023-05-27T18:29:09Z

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!

infoani92 · 2023-06-06T07:25:44Z

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, }, ],

yes it's working when I remove I got another error while npm test

jest-runner/build/index.js: Class private methods are not enabled. Please add @babel/plugin-transform-private-methods to your configuration

Does anyone know how this will fix?

Roman-Hladilka · 2023-06-06T14:56:13Z

@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

lavarajallu · 2023-06-09T05:31:48Z

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

xavcochran · 2023-06-09T18:34:56Z

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!

mattgle · 2023-06-12T20:16:02Z

@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

lavarajallu · 2023-06-13T01:08:49Z

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*

ayushkumarbhadani-sameta · 2023-11-17T13:10:43Z

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.

ayushkumarbhadani-sameta · 2023-11-17T15:06:48Z

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.

aamirbinabd · 2023-11-26T16:44:56Z

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.

This helped me as well. Ran npx expo . -c and the error was gone.

fixes the issue facebook#36828

ctapang · 2024-01-26T05:20:27Z

This shouldn't have been closed. The bug is still there. I agree with 0xFadedd:
#36828 (comment)

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

ctapang · 2024-01-27T17:31:40Z

This is another comment with the same simple fix as proposed by 0xFadedd :
#36828 (comment)

abpbackup · 2024-02-02T19:19:04Z

@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 worked for me and didn't break the tests

sovetski · 2024-02-11T20:11:07Z

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

Kyle772 · 2024-02-14T04:31:11Z

 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

zainkhas · 2024-03-26T16:36:54Z

@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.

Summary: This solves [ENG-7635](https://linear.app/comm/issue/ENG-7635/cannot-read-property-getitem-of-undefined), at least temporarily. It looks like it's [this GitHub issue](facebook/react-native#36828), first introduced by [this change](d543b13#diff-6cbb99cac6ea458360d1a029240d3d962e43c86756958d30bfe0434166be073a). People on the GitHub issue have several suggestions: 1. This change 2. Removing `@babel/plugin-transform-private-methods`, which we could consider if we remove the private method uses in the transitive dependency that necessitates its introduction initially 3. Adding a babel plugin somewhere that strips Flow types. I'll consider this one as I continue investigating Test Plan: Confirm that the issue goes away after resetting the Metro cache (`yarn dev -c`) and refreshing the app Reviewers: ginsu, will, atul Subscribers:

Summary: This solves [ENG-7635](https://linear.app/comm/issue/ENG-7635/cannot-read-property-getitem-of-undefined), at least temporarily. It looks like it's [this GitHub issue](facebook/react-native#36828), first introduced by [this change](d543b13#diff-6cbb99cac6ea458360d1a029240d3d962e43c86756958d30bfe0434166be073a). People on the GitHub issue have several suggestions: 1. This change 2. Removing `@babel/plugin-transform-private-methods`, which we could consider if we remove the private method uses in the transitive dependency that necessitates its introduction initially 3. Adding a babel plugin somewhere that strips Flow types. I'll consider this one as I continue investigating Test Plan: Confirm that the issue goes away after resetting the Metro cache (`yarn dev -c`) and refreshing the app Reviewers: ginsu, will, atul Subscribers: tomek Differential Revision: https://phab.comm.dev/D11527

Summary: This solves [ENG-7635](https://linear.app/comm/issue/ENG-7635/cannot-read-property-getitem-of-undefined), at least temporarily. It looks like it's [this GitHub issue](facebook/react-native#36828), first introduced by [this change](d543b13#diff-6cbb99cac6ea458360d1a029240d3d962e43c86756958d30bfe0434166be073a). People on the GitHub issue have several suggestions: 1. This change 2. Removing `@babel/plugin-transform-private-methods`, which we could consider if we remove the private method uses in the transitive dependency that necessitates its introduction initially 3. Adding a babel plugin somewhere that strips Flow types. I'll consider this one as I continue investigating Test Plan: Confirm that the issue goes away after resetting the Metro cache (`yarn dev -c`) and refreshing the app Reviewers: ginsu, will, atul Reviewed By: ginsu Subscribers: tomek Differential Revision: https://phab.comm.dev/D11527

aryan127 · 2024-04-18T13:12:23Z

@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', ..... ],

Broo just thank you, you just save me you absolute genius person. Thank you brother have a great day.

JoaoPauloXD · 2024-06-03T14:51:41Z

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, }, ],

thanks, man, I remove these lines of my babel.config.js:

["@babel/plugin-transform-private-methods", { loose: true }],
["@babel/plugin-transform-class-properties", { loose: true }],
["@babel/plugin-transform-private-property-in-object", { loose: true }],

HoaiHuynh · 2024-06-10T03:02:46Z

By removing @babel/plugin-transform-private-methods, I solved this bug, but it created another bug when I ran test

danieloi · 2024-10-12T14:21:40Z

By removing @babel/plugin-transform-private-methods, I solved this bug, but it created another bug when I ran test

needed this line in my babel config for msw to work but removing it made storybooks work lol.

Thanks for the tip @HoaiHuynh!

ugrylmz · 2024-10-24T12:24:50Z

It seems like removing @babel/plugin-transform-private-methods solved my original issue with React Native Windows, but created a new bug when running tests.

dikshaSharmaPro · 2024-10-24T12:29:22Z

add this line into the FlatList.js file and not do npm install after this because it will remove the changes you have done in the file.
this.props = props;

Like this - constructor(props: Props) {
super(props);
this.props = props;
this._checkProps(this.props);

salahbm added the Needs: Triage 🔍 label Apr 6, 2023

github-actions bot added the Component: FlatList label Apr 6, 2023

cortinico added the Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. label Apr 6, 2023

github-actions bot added Needs: Author Feedback and removed Needs: Triage 🔍 labels Apr 6, 2023

github-actions bot added Needs: Attention Issues where the author has responded to feedback. and removed Needs: Author Feedback labels Apr 8, 2023

salahbm closed this as completed Apr 8, 2023

intergalacticspacehighway mentioned this issue Nov 16, 2023

add flow strip types plugin showtime-xyz/showtime-frontend#2533

Merged

CodeOne91 mentioned this issue Dec 9, 2023

FlatList problems CodeOne91/rn-stargazers-view-app#1

Closed

a-tokyo added a commit to a-tokyo/react-native that referenced this issue Jan 19, 2024

🚑 hotfix Flatlist bug Cannot read property 'getItem' of undefined

8ffad6e

fixes the issue facebook#36828

a-tokyo mentioned this issue Jan 19, 2024

🚑 hotfix Flatlist bug Cannot read property 'getItem' of undefined #42401

Closed

ctapang mentioned this issue Jan 26, 2024

FlatList declares a local variable for "props" #42623

Closed

Kyle772 added a commit to Kyle772/react-native that referenced this issue Feb 14, 2024

Fix for facebook#36828 - copying props into this.props

75bb40d

Kyle772 added a commit to Kyle772/react-native that referenced this issue Feb 14, 2024

Fix for facebook#36828 - props not being copied into constructor

89d3146

Kyle772 mentioned this issue Feb 14, 2024

Fix for #36828 - props not being copied into constructor #43011

Closed

This was referenced Feb 28, 2024

RN Flat List #43033

Closed

fix flatlist props being undefined in ios #43141

Closed

davide-ciraolo mentioned this issue May 30, 2024

TypeError: Cannot read property 'size' of undefined realm/realm-js#6626

Open

RaniaG mentioned this issue Jun 13, 2024

[iOS] Fetch/axios request get stuck: Promise does not get resolved #41637

Open

Flatlist render error: Cannot read property 'getItem' of undefined #36828

Flatlist render error: Cannot read property 'getItem' of undefined #36828

Comments

salahbm commented Apr 6, 2023 • edited by cortinico Loading

Description

React Native Version

Output of npx react-native info

Steps to reproduce

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

cortinico commented Apr 6, 2023

github-actions bot commented Apr 6, 2023

chizhkov422 commented Apr 7, 2023 • edited Loading

salahbm commented Apr 8, 2023

salahbm commented Apr 8, 2023

NickGerleman commented Apr 8, 2023

chizhkov422 commented Apr 8, 2023

chizhkov422 commented Apr 8, 2023

chizhkov422 commented Apr 8, 2023

NickGerleman commented Apr 8, 2023

chizhkov422 commented Apr 8, 2023 • edited Loading

chizhkov422 commented Apr 8, 2023 • edited Loading

salahbm commented Apr 8, 2023

salahbm commented Apr 8, 2023 • edited Loading

victorLee11 commented Apr 18, 2023

artemis-prime commented May 27, 2023

infoani92 commented Jun 6, 2023

Roman-Hladilka commented Jun 6, 2023

lavarajallu commented Jun 9, 2023

xavcochran commented Jun 9, 2023

mattgle commented Jun 12, 2023 • edited Loading

lavarajallu commented Jun 13, 2023 via email

ayushkumarbhadani-sameta commented Nov 17, 2023 • edited Loading

ayushkumarbhadani-sameta commented Nov 17, 2023

aamirbinabd commented Nov 26, 2023

ctapang commented Jan 26, 2024

ctapang commented Jan 27, 2024

abpbackup commented Feb 2, 2024

sovetski commented Feb 11, 2024

Kyle772 commented Feb 14, 2024

zainkhas commented Mar 26, 2024

aryan127 commented Apr 18, 2024

JoaoPauloXD commented Jun 3, 2024

HoaiHuynh commented Jun 10, 2024

danieloi commented Oct 12, 2024 • edited Loading

ugrylmz commented Oct 24, 2024

dikshaSharmaPro commented Oct 24, 2024 • edited Loading

salahbm commented Apr 6, 2023 •

edited by cortinico

Loading

Output of `npx react-native info`

chizhkov422 commented Apr 7, 2023 •

edited

Loading

chizhkov422 commented Apr 8, 2023 •

edited

Loading

chizhkov422 commented Apr 8, 2023 •

edited

Loading

salahbm commented Apr 8, 2023 •

edited

Loading

mattgle commented Jun 12, 2023 •

edited

Loading

ayushkumarbhadani-sameta commented Nov 17, 2023 •

edited

Loading

danieloi commented Oct 12, 2024 •

edited

Loading

dikshaSharmaPro commented Oct 24, 2024 •

edited

Loading