react-native-snap-carousel produces "TypeError: Cannot read property 'array' of undefined, js engine: hermes"

173 Views Asked by At

I'm trying to utilize a very popular react-native library in my expo project. However, when I try to use the the carousel component like this:


const renderItem = (item: any) => {
    // Ignore fn args for debugging purposes
    return (
        <Text>Hello World</Text>
    );
};

return (
  <Carousel
    layout={"default"}
    data={[]}
    renderItem={renderItem}
    sliderWidth={400}
    itemWidth={350}
  />
);
TypeError: Cannot read property 'array' of undefined, js engine: hermes

If I remove the <Carousel ... /> component then my react-native project works as expected. Any ideas on what's causing this issue?

According to the error shown on my iOS emulator it seems like the Carousel component is referencing PropTypes.array which would explain where the error is coming from.

items: PropTypes.array.isRequired,

However, being that this library is so popular I'm not sure if it makes sense for this issue to be occurring unless I have some outdated packages or incompatible ones.

iOS Emulator displaying error

package.json

{
  "name": "project",
  "version": "1.0.0",
  "license": "UNLICENSED",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "1.18.2",
    "@react-native-community/datetimepicker": "7.2.0",
    "@react-native-picker/picker": "2.4.10",
    "@react-native-segmented-control/segmented-control": "^2.4.3",
    "@react-navigation/bottom-tabs": "^6.5.11",
    "@react-navigation/native-stack": "^6.9.17",
    "@supabase/supabase-js": "^2.38.5",
    "@types/react-native-snap-carousel": "^3.8.10",
    "base64-arraybuffer": "^1.0.2",
    "expo": "^49.0.21",
    "expo-build-properties": "~0.8.3",
    "expo-dev-client": "~2.4.12",
    "expo-image-picker": "~14.3.2",
    "expo-location": "~16.1.0",
    "expo-status-bar": "~1.6.0",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "nativewind": "2.0.11",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-elements": "^3.4.3",
    "react-native-heroicons": "^3.2.1",
    "react-native-modal": "^13.0.1",
    "react-native-safe-area-context": "^4.8.1",
    "react-native-snap-carousel": "^1.6.1",
    "react-native-svg": "^14.1.0",
    "react-native-url-polyfill": "^2.0.0",
    "zustand": "^4.4.7"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@react-navigation/stack": "^6.3.20",
    "@tsconfig/react-native": "^3.0.2",
    "@types/jest": "^29.5.11",
    "@types/lodash": "^4.14.202",
    "@types/react": "^18.2.45",
    "@types/react-test-renderer": "^18.0.7",
    "react-native-dotenv": "^3.4.9",
    "tailwindcss": "3.3.2",
    "typescript": "^5.3.3"
  },
  "private": true
}

Thanks all!

0

There are 0 best solutions below