FlatList - Cannot read property 'getItem' of undefined

#1

Hello, I’m developing apps for both iOS && android.
I use react-native-app-intro-slider to display app’s walkthrough.
Everything was fine until last week.
But, suddenly, error logs begin to display this error message. And iOS app doesn’t launch at all, though Android app is still working without any problems.

ExceptionsManager.js:76 TypeError: Cannot read property 'getItem' of undefined

This error is located at:
    in FlatList (at AppIntroSlider.js:152)
    in RCTView (at View.js:44)
    in AppIntroSlider (at WalkthroughLaunch.js:88)
    in WalkthroughLaunch (created by Connect(WalkthroughLaunch))
    in Connect(WalkthroughLaunch) (at SceneView.js:9)
    in SceneView (at SwitchView.js:12)
    in SwitchView (at createNavigator.js:57)
    in Navigator (at createNavigationContainer.js:376)
    in NavigationContainer (at App.js:61)
    in RCTView (at View.js:44)
    in Provider (at App.js:57)
    in App (at registerRootComponent.js:17)
    in RootErrorBoundary (at registerRootComponent.js:16)
    in ExpoRootComponent (at renderApplication.js:34)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AppContainer (at renderApplication.js:33)

This is my package.json. I removed each packages(ex. @babel/plugin-proposal-class-properties) and test if iOS works, But iOS didn’t move on each trial.
Then, I created new expo project, pasted this package.json, use AppIntroSlider. But AppIntroSlider displays correctly on both iOS and android.
So, it seems like contents of the package.json is not cause of the problem.

{
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "scripts": {
    "postinstall": "rndebugger-open",
    "test": "yarn lint && yarn flow && jest",
    "lint": "eslint src",
    "pretty": "prettier --semi false --print-width 100 --single-quote --trailing-comma all --write \"src/**/*.js\"",
    "test:unit": "jest",
    "precommit": "lint-staged",
  },
  "lint-staged": {
    "*.js": [
      "yarn pretty",
      "yarn test:unit",
      "git add"
    ]
  },
  "jest": {
    "preset": "jest-expo",
    "testURL": "http://localhost/",
    "testMatch": [
      "**/?(*.)test.js?(x)"
    ],
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
    "setupFiles": [
      "<rootDir>/jest/setup.js"
    ]
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "expo": "^31.0.4",
    "immutable": "^3.8.2",
    "native-base": "^2.4.1",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.1.tar.gz",
    "react-native-app-intro-slider": "^0.2.4",
    "react-native-calendars": "^1.19.3",
    "react-native-dash": "^0.0.9",
    "react-native-datepicker": "^1.7.2",
    "react-native-elements": "^0.19.1",
    "react-native-image-pan-zoom": "^2.1.9",
    "react-native-material-dropdown": "^0.11.1",
    "react-native-modal": "^6.1.0",
    "react-native-modal-datetime-picker": "^6.0.0",
    "react-native-picker-select": "^4.1.0",
    "react-native-size-matters": "^0.1.4",
    "react-native-snap-carousel": "^3.7.0",
    "react-native-swiper": "^1.5.13",
    "react-navigation": "^2.18.2",
    "react-redux": "^5.0.7",
    "redux": "^3.7.2",
    "redux-actions": "^2.6.1",
    "redux-immutablejs": "^0.0.8",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0",
    "sentry-expo": "~1.9.0",
    "uuid": "^3.3.2"
  },
  "devDependencies": {
    "babel-eslint": "^9.0.0",
    "babel-preset-expo": "^5.0.0",
    "enzyme": "^3.6.0",
    "enzyme-adapter-react-16": "^1.5.0",
    "enzyme-to-json": "^3.3.4",
    "eslint": "^5.6.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-flowtype": "^2.50.1",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-react": "^7.11.1",
    "husky": "^1.0.0-rc.15",
    "jest-expo": "^31.0.0",
    "lint-staged": "^7.3.0",
    "prettier": "^1.14.3",
    "react-dom": "^16.6.0",
    "react-native-debugger-open": "^0.3.17",
    "redux-devtools-extension": "^2.13.5",
    "typescript": "^3.1.6"
  }
}

So, I dig into react-native libraries. I put some console.log in /react-native/Libraries/Lists/FlatList.js. But I couldn’t figure out why contents of getItem is undefined.

_checkProps(props: Props<ItemT>) {
    const {
      getItem,
      getItemCount,
      horizontal,
      legacyImplementation,
      numColumns,
      columnWrapperStyle,
      onViewableItemsChanged,
      viewabilityConfigCallbackPairs,
    } = props;
    console.log(getItem) // outputs undefined
    invariant(
      !getItem && !getItemCount,
      'FlatList does not support custom data formats.',
    );

Any advice is appreciated. Thank you.
My expo SDK version is v31.0.0. node version is 10.14.1 (I tried both node version v10 && v11. In both case iOS didn’t move). mac high sierra, 2018 new model.

#2

Hey @taichi0315,

Can you try creating a reproducible example of this with http://snack.expo.io so we can try and debug it from our end?

Cheers,

Adam

closed #3

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.