[email protected] - FlatList Cannot read property 'getItem' of undefined".

[BrianJVarley]

Hey @jfilter 👋 , I'm using this component in a "react-native": "^0.72.3", app but run into a runtime error on render. Seems there is some bug with the FlatList used internally in Onboarding component (react-native-onboarding-swiper) - "ERROR TypeError: Cannot read property 'getItem' of undefined".

Any ideas what's wrong here? Looking at my usage below it seems to be following the same config as your simple-example . Also the image resource is in the same folder specified in the require path.

Component usage:

import React from 'react';
import {View, Text, TouchableOpacity, Image} from 'react-native';
import Onboarding from 'react-native-onboarding-swiper';

  return (
    <Onboarding
      pages={[
        {
          backgroundColor: '#fff',
          image: <Image source={require('../images/diagram-1.png')} />,
          title: 'Welcome to Simple Offset Pro',
          subtitle:
            'Effortlessly calculate square offsets and bend cable tray or HVAC ducting sheet metal with Simple Offset',
        },
      ]}
    />
  );
};

export default CustomOnboardingComponent;

Error log while debugging the app locally:

 ERROR  TypeError: Cannot read property 'getItem' of undefined

This error is located at:
    in FlatList (created by Onboarding)
    in RCTView (created by View)
    in View
    in Unknown (created by Onboarding)
    in Onboarding (created by OnboardingComponent)
    in OnboardingComponent (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)

[BrianJVarley]

Also here is my project dependencies list:

"dependencies": {
    "@react-native-async-storage/async-storage": "^1.19.2",
    "@react-native-clipboard/clipboard": "^1.10.0",
    "@react-native-picker/picker": "^2.4.10",
    "@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/native-stack": "^6.9.13",
    "@react-navigation/stack": "^6.2.0",
    "bluebird": "^3.7.2",
    "convert-units": "^2.3.4",
    "event-emitter": "^0.3.5",
    "fbjs": "^3.0.5",
    "immutability-helper": "^3.1.1",
    "immutable": "^4.3.1",
    "lodash": "^4.17.21",
    "memoize-one": "^6.0.0",
    "moment": "^2.29.4",
    "native-base": "^3.4.28",
    "npm": "^9.8.1",
    "polished": "^4.2.2",
    "prop-types": "^15.8.1",
    "react": "18.2.0",
    "react-dom": "^18.2.0",
    "react-native": "^0.72.3",
    "react-native-awesome-alerts": "^2.0.0",
    "react-native-cli": "^2.0.1",
    "react-native-config": "^1.5.1",
    "react-native-deck-swiper": "^2.0.15",
    "react-native-dotenv": "^3.4.9",
    "react-native-dropdown-picker": "^5.4.6",
    "react-native-elements": "^3.4.3",
    "react-native-floating-label-input-custom": "^1.0.2",
    "react-native-gesture-handler": "2.9.0",
    "react-native-hide-with-keyboard": "^1.2.1",
    "react-native-keyboard-listener": "^1.1.0",
    "react-native-localization": "^2.3.2",
    "react-native-localize": "^3.0.2",
    "react-native-material-initials": "^0.0.12",
    "react-native-onboarding-swiper": "^1.2.0",
    "react-native-paper": "^5.9.1",
    "react-native-picker-select": "^8.0.4",
    "react-native-popup-menu": "^0.16.1",
    "react-native-reanimated": "^3.3.0",
    "react-native-safe-area-context": "^4.7.1",
    "react-native-screens": "^3.24.0",
    "react-native-share": "^9.2.3",
    "react-native-svg": "^13.10.0",
    "react-native-swiper": "^1.6.0",
    "react-native-vector-icons": "^10.0.0",
    "react-native-view-shot": "^3.7.0",
    "react-native-web": "^0.19.6",
    "react-redux": "^8.1.1",
    "react-scripts": "^5.0.1",
    "redux": "^4.2.1",
    "redux-logger": "^3.0.6",
    "redux-loop-symbol-ponyfill": "^2.2.2",
    "redux-promise": "^0.6.0",
    "redux-thunk": "^2.4.2",
    "standard-http-error": "^2.0.1"
  },

[BrianJVarley]

Actually the following RN issue solves it by adding a new babel plugin - facebook/react-native#36828 to the project - @babel/plugin-transform-flow-strip-types