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

When navigating to certain screens on my React Native app (using expo), I am getting the following error:

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

It has been working fine previously, and from doing research it appears to be a problem with my packages/babel, but I have tried several solutions, including

npm upgrade --latest

And resetting the cache, but had no luck so far.

This is the contents of my package.json:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest",
    "test:watch": "npm test -- --watch"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.15.7",
    "@react-native-community/masked-view": "0.1.10",
    "@react-native-picker/picker": "1.16.1",
    "@react-navigation/bottom-tabs": "^5.11.15",
    "@react-navigation/drawer": "^5.12.9",
    "@react-navigation/material-top-tabs": "^5.3.19",
    "@react-navigation/native": "^5.9.8",
    "@react-navigation/stack": "^5.14.9",
    "expo": "^42.0.3",
    "expo-app-loading": "^1.1.2",
    "expo-font": "~9.2.1",
    "expo-status-bar": "~1.0.4",
    "jwt-decode": "^3.1.2",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-currency-input": "^1.0.1",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-qrcode-svg": "^6.1.1",
    "react-native-reanimated": "^2.2.1",
    "react-native-responsive-screen": "^1.4.2",
    "react-native-safe-area-context": "3.2.0",
    "react-native-screens": "~3.4.0",
    "react-native-svg": "^12.1.1",
    "react-native-tab-view": "^2.16.0",
    "react-native-toast-message": "^1.6.0",
    "react-native-web": "^0.17.1",
    "react-redux": "^7.2.5",
    "redux": "^4.1.1",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-methods": "^7.14.5",
    "@types/jest": "^27.0.1",
    "@types/react": "~16.9.35",
    "@types/react-native": "^0.63.53",
    "@types/react-test-renderer": "^17.0.1",
    "babel-jest": "^27.2.0",
    "jest-expo": "^42.1.0",
    "react-test-renderer": "^17.0.2",
    "redux-mock-store": "^1.5.4",
    "typescript": "~4.0.0"
  },
  "private": true,
  "jest": {
    "preset": "jest-expo"
  }
}

And this is my babel.config.js:

module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
      ["@babel/plugin-proposal-private-methods", { "loose": true }],
      'react-native-reanimated/plugin'
    ],
  };

And the full stack trace is this:

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

This error is located at:
    in FlatList (at Modal.tsx:65)
    in RCTView (at View.js:34)
    in View (at Modal.tsx:64)
    in RCTView (at View.js:34)
    in View (at Modal.tsx:57)
    in MenuModal (at SceneView.tsx:130)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:123)
    in EnsureSingleNavigator (at SceneView.tsx:122)
    in SceneView (at useDescriptors.tsx:181)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:245)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:244)
    in RCTView (at View.js:34)
    in View (at CardSheet.tsx:33)
    in ForwardRef(CardSheet) (at Card.tsx:573)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
    in PanGestureHandler (at GestureHandlerNative.tsx:13)
    in PanGestureHandler (at Card.tsx:549)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
    in RCTView (at View.js:34)
    in View (at Card.tsx:538)
    in Card (at CardContainer.tsx:206)
    in CardContainer (at CardStack.tsx:623)
    in RNSScreen (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at src/index.native.tsx:147)
    in Screen (at Screens.tsx:74)
    in MaybeScreen (at CardStack.tsx:616)
    in RNSScreenContainer (at src/index.native.tsx:186)
    in ScreenContainer (at Screens.tsx:50)
    in MaybeScreenContainer (at CardStack.tsx:498)
    in CardStack (at StackView.tsx:462)
    in KeyboardManager (at StackView.tsx:458)
    in SafeAreaProviderCompat (at StackView.tsx:455)
    in RCTView (at View.js:34)
    in View (at GestureHandlerRootView.android.tsx:21)
    in GestureHandlerRootView (at StackView.tsx:454)
    in StackView (at createStackNavigator.tsx:87)
    in StackNavigator (at Root.tsx:12)
    in RootStack (at SceneView.tsx:130)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:123)
    in EnsureSingleNavigator (at SceneView.tsx:122)
    in SceneView (at useDescriptors.tsx:181)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:245)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:244)
    in RCTView (at View.js:34)
    in View (at CardSheet.tsx:33)
    in ForwardRef(CardSheet) (at Card.tsx:573)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
    in PanGestureHandler (at GestureHandlerNative.tsx:13)
    in PanGestureHandler (at Card.tsx:549)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
    in RCTView (at View.js:34)
    in View (at Card.tsx:538)
    in Card (at CardContainer.tsx:206)
    in CardContainer (at CardStack.tsx:623)
    in RNSScreen (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at src/index.native.tsx:147)
    in Screen (at Screens.tsx:74)
    in MaybeScreen (at CardStack.tsx:616)
    in RNSScreenContainer (at src/index.native.tsx:186)
    in ScreenContainer (at Screens.tsx:50)
    in MaybeScreenContainer (at CardStack.tsx:498)
    in CardStack (at StackView.tsx:462)
    in KeyboardManager (at StackView.tsx:458)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
    in SafeAreaProviderCompat (at StackView.tsx:455)
    in GestureHandlerRootView (at GestureHandlerRootView.android.tsx:26)
    in GestureHandlerRootView (at StackView.tsx:454)
    in StackView (at createStackNavigator.tsx:87)
    in StackNavigator (at MainNavigator.tsx:60)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:411)
    in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
    in ThemeProvider (at NavigationContainer.tsx:90)
    in ForwardRef(NavigationContainer) (at MainNavigator.tsx:59)
    in MainNavigator (at App.tsx:64)
    in Provider (at App.tsx:57)
    in App (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
at node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleException
at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
at node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:293:29 in invoke
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:154:27 in invoke
at node_modules\regenerator-runtime\runtime.js:164:18 in PromiseImpl.resolve.then$argument_0
at node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue

In case it is relevant, here is the modal component where the error seems to be coming from:

const BUTTONS = [
    {
        id: "1",
        title: "Button1",
        icon: "button1-icon",
    },
    {
        id: "2",
        title: "Button2",
        icon: "button2-icon",
    },        
];

const Modal = ({ navigation }: any) => {
    const renderButton = ({ item }: any) => (
        <GridTile
            title={item.title}
            colour={colours.accent}
            icon={item.icon}
            onSelect={() => navigation.navigate(item.title)}
        />
    );

    return (
        <View>                
            <View>
                <FlatList
                    data={BUTTONS}
                    renderItem={renderButton}                        
                    numColumns={2}
                />
            </View>
        </View>
    );
};    


export default Modal;

Solution 1:^[1]

I finally managed to resolve this error by deleting my babel.config.js file and putting the contents of it in my package.json like this:

"babel": { 
    "presets": ["module:metro-react-native-babel-preset"], 
    "plugins": [ 
      ["@babel/plugin-proposal-private-methods", { "loose": true }], 
      "react-native-reanimated/plugin"
    ]
  }

Solution 2:^[2]

Putting the content in package.json didn't work for me, however, this did work:

Delete @babel/plugin-proposal-class-properties from babel.config.js and then restart by clearing the cache: expo r -c.

FYI, I started getting this error after upgrading from Expo 43 to Expo 44. This is how my babel.config.js looks like:

module.exports = {
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    // ["@babel/plugin-proposal-class-properties", { "loose": true }],
    "react-native-reanimated/plugin",
  ]
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Tom
Solution 2	Behnam Kamrani

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

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]