React-native: YellowBoxList Error when starting: TypeError: undefined is not an object (evaluating 'props.getItem')

[Yria]

• [x] Review the documentation: https://facebook.github.io/react-native
• [x] Search for existing issues: https://github.com/facebook/react-native/issues
• [x] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i5-4690 CPU @ 3.50GHz
Memory: 3.81 GB / 24.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 8.12.0 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
Build Tools: 23.0.1, 23.0.3, 25.0.0, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.1, 27.0.2, 27.0.3, 28.0.0, 28.0.1, 28.0.2
API Levels: 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28
IDEs:
Android Studio: 3.1 AI-173.4907809
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
@types/react: ^16.4.14 => 16.4.14
@types/react-native: ^0.56.19 => 0.56.19
react: 16.5.0 => 16.5.0
react-native: 0.57.0 => 0.57.0
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-asset: 1.1.2
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

Description

With warning boxes in starting, the app pops up with red error page with Flatlist's props checking error.

Unhandled JS Exception: TypeError: Cannot read property 'getItem' of undefined

This error is located at:
in FlatList (at YellowBoxList.js:87)
in RCTView (at View.js:44)
in YellowBoxList (at YellowBox.js:104)
in YellowBox (at AppContainer.js:93)
in RCTView (at View.js:44)
in AppContainer (at renderApplication.js:33)

Reproducible Demo

app_react.zip

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.57 and verify if the issue still exists.

The ":rewind:Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

[tomleader]

0.57 ，same error occur

[akmalahmed525]

I'm getting the same error. has anyone found the solution to resolve this issue?

[KeonPaul]

Similar issue with

 React Native Environment Info:
    System:
      OS: Windows 10
      CPU: x64 Intel(R) Core(TM) i7-4600U CPU @ 2.10GHz
      Memory: 1.03 GB / 7.90 GB
    Binaries:
      Yarn: 1.3.2 - C:\Users\MIC_Laptop3\scoop\persist\nodejs\bin\yarn.CMD
      npm: 6.2.0 - C:\Program Files\nodejs\npm.CMD
    IDEs:
      Android Studio: Version  3.1.0.0 AI-173.4907809

and
"react-native": "0.57.1",

right now I usually run the application in Debug Js Remotely active which transfer to the YellowBox warning to the React-Native debugger ~or I use
console.disableYellowBox = true;
to disable it entirely which defeats the purpose of YellowBox as a debug tool.~

[mikemorris]

I wasn't able to track down the exact cause, but I was seeing this issue (as well as #20405) when using react-native-git-upgrade to upgrade from 0.55.4 to 0.57.0, but upgrading manually (react-native init in a new project, manually copying files over, then reinstalling dependencies) resolved both issues. My best guess is that both issues could possibly be related to Babel 6/7 conflicts from when upgrading?

[john-hu]

got the same error +1

[john-hu]

@mikemorris This is a nice catch. I use the following at my babelrc file.

{
  "presets": [
    "module:metro-react-native-babel-preset",
    "@babel/preset-flow"
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-json-strings",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-logical-assignment-operators",
    "@babel/plugin-proposal-optional-chaining",
    [
      "@babel/plugin-proposal-pipeline-operator",
      {
        "proposal": "minimal"
      }
    ],
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-do-expressions",
    "@babel/plugin-proposal-function-bind"
  ]
}

[alexisbronchart]

I also had this issue. Apparently "@babel/plugin-proposal-class-properties" has a bug and since I didn't really need it, I just removed it from my babelrc.

[gglee89]

This same error occurred with me.

I'm currently in react-native v0.57

And after three attempts, what worked for me was running these following commands (the old "bread-and-butter" way):

rm -rf node_modules && npm i
react-native run-android
react-native start --reset-cache

In my case, I faced this issue after I included new libraries using npm.
These commands are recommended by metro bundler but annoyingly, it might often not fix the error.
You might also try to execute the command watchman watch-del-all to remove all watches and triggers for new file changes.

Unfortunately it isn't an easy to grasp flow for why my build failed, and why it suddenly worked after three attempts resetting the configuration. This might not work for you as well, I'm giving it out as a "possible solution" that might help you out, as it was annoying for me.

[canastro]

I'm facing this same issue with 0.57.4. Tried what @gglee89 suggested and still no luck.
Removing "@babel/plugin-proposal-class-properties" solved it for me

[youngjuning]

0.57.4 Is there any solution

[thodubois]

Still there in 0.57.5. Try a react-native init and add a console.warn('Hello Warn') in App.js. The error pop on android devices after react-native run-android.

[AshleyRudland]

After 3 days lost of this BS - removing @babel/plugin-proposal-class-properties from .babelrc/babel.config.js and running react-native start --reset-cache fixed it for me. (cc: @youngjuning @thodubois)

[vongohren]

Im stuggeling with this now, but dont have any plugin proposal class properties in any of my files.
Are there any other solutions? Iv tried newest 0.57 and 0.56

[vongohren]

This was a fix that solved it for me. I dont like it but works for now.
https://github.com/facebook/react-native/issues/15902#issuecomment-375521246

[harvey-woo]

update js core for android and remove @babel/plugin-proposal-class-properties, it's seem no need to add this plugin for latest jsc
https://github.com/react-community/jsc-android-buildscripts

[ColinRyan]

I ran into this trouble as well while upgrading expo to version 31. It's become resolved after I updated react-native-scripts to version 2 and changed the main field in package.json to ./node_modules/expo/AppEntry.js. I'm also using babel-preset-expo@5 as my devDependency instead of any other babel dependency.

[hramos]

The JSC in Android was updated in December, it's in master. The new JSC will be part of the 0.59 release.

[Robert2333]

mobx babel-plugin also will make this mistake!

[robbiemu]

in addition to canastro's resolution, the one in the link tot he babel discussion of the bug lists another: put @babel/plugin-transform-flow-strip-types before @babel/plugin-proposal-class-properties .. this worked for me

[filipencus]

My initial configuration was:
RN 0.59
MobX
Sqlite storage
React Navigation
Babel 7

I spent two days trying to solve the issue. What finally worked was:
npx babel-upgrade --write
close and open all terminals
delete the previous app and install again
react-native start --reset-cache

added the key id to the mapper
{[1,2,3].map(item => ( <View key={item}><Text>{item}</Text></View> ))}

I didn't know that was necessary that key identifier on RN also .
I have discovered the error while debugging from Chrome console.

Hope this help someone.

Final package.json config

"dependencies": {
"@react-native-community/async-storage": "^1.2.1",
"core-decorators": "^0.20.0",
"mobx": "4.9.2",
"mobx-react": "5.4.3",
"react": "16.8.3",
"react-native": "0.59.1",
"react-native-sqlite-storage": "3.3.10",
"react-native-vector-icons": "^6.4.2",
"react-navigation": "2.18.3"
},
"devDependencies": {
"@babel/core": "^7.4.0",
"@babel/plugin-proposal-decorators": "^7.3.0",
"@babel/runtime": "^7.4.0",
"@types/react-native-sqlite-storage": "^3.3.1",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.4.2",
"babel-preset-mobx": "2.0.0",
"jest": "^24.5.0",
"metro-react-native-babel-preset": "^0.53.1",
"react-test-renderer": "16.8.3",
"@babel/preset-flow": "^7.0.0"
},
"jest": {
"preset": "react-native"
}

[timomeara]

i'm getting this error, not on yellowbox, but in a FlatList in a component.
not even the min example provided by fb works:
<FlatList data={[{key: 'a'}, {key: 'b'}]} renderItem={({item}) => <Text>{item.key}</Text>} />

this showed up after some changes to my build, first in IOS and now in android.
i fixed IOS by starting a new RNCA and bringing my stuff in bit-by-bit.
now android is broken :/

the last thing i added to my project is:
https://github.com/react-native-community/react-native-webview
but i'm really not sure if this is the cause

[filipencus]

i'm getting this error, not on yellowbox, but in a FlatList in a component.
not even the min example provided by fb works:
<FlatList data={[{key: 'a'}, {key: 'b'}]} renderItem={({item}) => <Text>{item.key}</Text>} />

this showed up after some changes to my build, first in IOS and now in android.
i fixed IOS by starting a new RNCA and bringing my stuff in bit-by-bit.
now android is broken :/

the last thing i added to my project is:
https://github.com/react-native-community/react-native-webview
but i'm really not sure if this is the cause

My case was similar, and the problem was that somehow, the babel dependencies, version and babel.config was not correct. As I posted, I had to upgrade babel again and worked out.

I spend days trying to solve it. Some RN versions are very....

[phyzical]

THANKS.

updating babel config removed this issue for me.
as other said dont forgot to update the babel js config (not .rc) if you have already migrated

[coocon]

Thanks.
There is a change for me to solve this problem by package.json

"start": "node node_modules/react-native/local-cli/cli.js start"
to
"start": "react-native start",

[LuisRodriguezLD]

I just want to add something,

This fails:

"plugins": [
    [
        "@babel/plugin-proposal-class-properties",
            {
                "loose": true
            }
    ]
]

but this works:

"plugins": [
    [
        "@babel/plugin-proposal-class-properties",
    ]
]

[rkingon]

@robbiemu I don't know how you figured it out, but adding @babel/plugin-transform-flow-strip-types was a life saver!

For others encountering this issue, I believe thus far -- this is the best solution (vs removing loose).

[paulosborne]

After 3 days lost of this BS - removing @babel/plugin-proposal-class-properties from .babelrc/babel.config.js and running react-native start --reset-cache fixed it for me. (cc: @youngjuning @thodubois)

react-native start --reset-cache worked for me!