react-native FlatList undefined is not an object (evaluating 'props.getItem')

Question

I am building a React Native app and having trouble with FlatList. I thought perhaps the problem was with the way I tried to implement this, so I used sample code from https://reactnative.dev/docs/flatlist and tried to run that by itself.

No matter how I try this, I am getting the error:

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

This is generating from FlatList.js line 450.

Lines 449 and 450 from that file are:

_checkProps(props: Props<ItemT>) {
   const {

This is from the FlatList.js that comes bundled with React Native.

I am on React Native 0.65.1.

Here is the code I am trying to run that is giving me the error:

import React from 'react';
import {
  SafeAreaView,
  View,
  FlatList,
  StyleSheet,
  Text,
  StatusBar,
} from 'react-native';

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];

const Item = ({title}) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const ModalTrackSleep = () => {
  const renderItem = ({item}) => <Item title={item.title} />;

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default ModalTrackSleep;

Rookery

Same code in my system working perfectly try to rm -rf node_modules and run again your project – Bracci

rm -rf node_modules did not help me; I'm having the same issue – Frangipane

Answer 1

I had to remove '@babel/plugin-proposal-private-methods', '@babel/plugin-proposal-class-properties' from my babel.config.js and then FlatList worked again. It is odd that FlatList for me worked previously with those babel plugins. After adding and removing a react-native-geolocation module, this issue began for me. I also had to redo my private methods and attributes in my classes, which is unfortunate.

Frangipane

I had to resort to this as well. '@babel/plugin-proposal-private-methods' does not play nicely with React Native. – Sipe

Thank goodness for this answer. Somehow my app was running fine with @babel/plugin-proposal-private methods until partway through today, then it stopped. Only removing that plugin fixed it. – Gambrell

Yea, you have to remove them, adding loose mode didn't fix it: github.com/rails/webpacker/issues/3008#issuecomment-1107533277 – Brahma