FlatList TypeError: undefined is not an object (evaluating 'props.getItem')

[timomeara]

🐛 Bug Report

Any <FlatList> in my app now throws this error in IOS and Android
TypeError: undefined is not an object (evaluating 'props.getItem')
it's similar to :
https://github.com/facebook/react-native/issues/21154

it's not just yellowbox, it's happening for any and all lists (FlatList, SectionList) in my app.
i'm not sure if this is related, but everthing went south after installing and linking
https://github.com/react-native-community/react-native-webview

To Reproduce

RNCA
add a bunch of other modules (see info below)
use a FlatList

Expected Behavior

A nice and robust FlatList component in my app

Code Example

even the 'Minimal Example' breaks:
<FlatList data={[{key: 'a'}, {key: 'b'}]} renderItem={({item}) => <Text>{item.key}</Text>} />

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.4
CPU: (4) x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz
Memory: 26.21 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.15.3 - /usr/local/bin/node
Yarn: yarn install v0.27.5
[1/4] Resolving packages...
success Already up-to-date.
Done in 1.57s. - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.7.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
API Levels: 22, 23, 24, 25, 26, 27, 28
Build Tools: 23.0.1, 23.0.2, 23.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 27.0.0, 27.0.1, 27.0.2, 27.0.3, 28.0.0, 28.0.3
System Images: a...google_apis | Google APIs Intel x86 Atom Sys..., a...google_apis | Google APIs Intel x86 Atom Sys..., a...s_playstore | Google Play Intel x86 Atom Sys..., a...google_apis | Google APIs Intel x86 Atom Sys...
IDEs:
Android Studio: 3.1 AI-173.4720617
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.2 => 0.59.2
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1
react-native-vector-icons: 4.3.0

[felipeworkbugs]

React team, please take a look to the bug. It happens in 0.59.1 version also.
I spent multiple days trying to resolve it, without success.
This force me to start a new project with an old RN version, eventually hoping it will works.
Thank you.

[dulmandakh]

Could you please provide reproducible demo code. Also, key is special property to identify and ensure uniqueness of an item in data, so please use other properties. Below code works for me.

<FlatList data={[{key: 'a', name: 'a'}, {key: 'b', name: 'b'}]} renderItem={({item}) => <Text>{item.name}</Text>} />

[filipencus]

Thank you @dulmandakh for taking your time to check it.
I installed a new clean project with RN 0.59.1 and its working, but my current project was not.

So I removed "mobx" from babel.config and now its working.
react-native start --reset-cache

`
BEFORE
module.exports = {
"presets": ["module:metro-react-native-babel-preset","mobx"],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }]
]
}

AFTER:
module.exports = {
"presets": ["module:metro-react-native-babel-preset"],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }]
]
}
`
I guess there is a conflict when using RN and mobx together...

[timomeara]

Could you please provide reproducible demo code. Also, key is special property to identify and ensure uniqueness of an item in data, so please use other properties. Below code works for me.

<FlatList data={[{key: 'a', name: 'a'}, {key: 'b', name: 'b'}]} renderItem={({item}) => <Text>{item.name}</Text>} />

it looks like this is caused by:
@babel/plugin-proposal-class-properties in the babel.config
here's a test app the demonstrates the problem, albeit, not really a react-native one
FlatListTest.zip

thanks for the help and the quick responses

[quietrun]

@filipencus hi, i use the same configuration，mobx and react-native 0.59.I used to get the same bug，but I found an effective method, it's useful in my project, maybe you can try this.
I delete my .babelrc and babel.config, and i add this code to my package.json
"babel": { "plugins": [ [ "@babel/plugin-proposal-decorators", { "legacy": true } ], [ "@babel/plugin-proposal-class-properties", { "loose": true } ] ] }
By this way, i can use mobx and react-native as usual.And never throw error again.
I guess there is something wrong in mobx's bable configuration.

[youngjuning]

same bug

[ddinggu]

react-native 0.59.8
I removed ['@bab el/plugin-proposal-class-properties', { loose: true }] and works fine.

[timbicker]

I have the same problem.. Unfortunately the suggestion to remove ['@babel/plugin-proposal-class-properties', { loose: true }] does not work for me....

[tabekg]

I solved this problem by removing in .babelrc ["@babel/plugin-proposal-class-properties", { "loose": true }] and reset cache by watchman watch-del-all && rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-* && rm -rf node_modules/ && yarn cache clean && yarn install && yarn start --reset-cache

My OS: MacOS
React Native: 0.61.5
React Hermes is enabled in my project

Good luck!

[tabekg]

I have the same problem.. Unfortunately the suggestion to remove ['@babel/plugin-proposal-class-properties', { loose: true }] does not work for me....

Did you try to reset cache?