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.
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!
