react-native-snap-carousel
react-native-snap-carousel copied to clipboard
meliorence
ERROR TypeError: Cannot read property 'style' of undefined, js engine: hermes
After updating my Expo version and other packages, I get this error in Carousel.js;
I'm sure the error is here because when I remove it from the project, there is no problem. Even if it is installed in the project, it is not a problem, but when I run my code, it gives an error.
Here is my code; ` import React, { useState } from "react"; import { View, StyleSheet, Platform } from "react-native"; import Carousel, { Pagination } from "react-native-snap-carousel"; import Metrics from "../../styles/Dimensions";
const Slider = (props) => { const [activeSlide, setActiveSlide] = useState(0);
const [data, setData] = useState(props.slideDatas);
const _renderItem = ({ item, index }) => { return <View>{item.component}</View>; };
const pagination = () => { return ( <Pagination dotsLength={data.length} activeDotIndex={activeSlide} containerStyle={{ backgroundColor: "transparent", }} dotStyle={{ width: 10, height: 10, borderRadius: 5, backgroundColor: "#D6B87C", }} inactiveDotStyle={{ backgroundColor: "#D6B87C", }} inactiveDotOpacity={0.4} inactiveDotScale={0.6 * Metrics.horizontalScale} /> ); };
return ( <View style={styles.container}> <Carousel layout={props.assets ? "stack" : "default"} data={data} renderItem={_renderItem} sliderWidth={373 * Metrics.horizontalScale} itemWidth={327 * Metrics.horizontalScale} onSnapToItem={(index) => setActiveSlide(index)} /> <View style={{ }} > {pagination()} </View> </View> ); };
export default Slider;
`
Here is the error; ERROR TypeError: Cannot read property 'style' of undefined, js engine: hermes
Although this is not a fundamental solution, I will write a method to resolve and execute the error. Since the error is thrown by the type
In “node_module/react-native-snap-carousel Delete all lines in “node_module/react-native-snap-carousel” that use “View.propTypes.style”. In the above example Remove all lines using “containerCustomStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,” Delete all but one line of “View.propTypes.style”. Then you will get the next error, so repeat erasing the one line there. (View.propTypes.style this is the line that contains it)
You have to wait for the version to be updated.
Translated with DeepL.com (free version)
根本的な解決にはなりませんが、エラーを解消し実行する方法を書きます。 型でエラーを吐いているので
「node_module/react-native-snap-carousel」内の 「View.propTypes.style」を使用している行をすべて削除します。 上記の例では 「containerCustomStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,」 の１行を全て消す。 そうすると次のエラーが出るので、そこの１行を消すことを繰り返します。（View.propTypes.styleこれが含まれている行です）
バージョンアップされるのを待つしかないです。
Although this is not a fundamental solution, I will write a method to resolve and execute the error. Since the error is thrown by the type
In “node_module/react-native-snap-carousel Delete all lines in “node_module/react-native-snap-carousel” that use “View.propTypes.style”. In the above example Remove all lines using “containerCustomStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,” Delete all but one line of “View.propTypes.style”. Then you will get the next error, so repeat erasing the one line there. (View.propTypes.style this is the line that contains it)
You have to wait for the version to be updated.
Translated with DeepL.com (free version)
根本的な解決にはなりませんが、エラーを解消し実行する方法を書きます。 型でエラーを吐いているので
「node_module/react-native-snap-carousel」内の 「View.propTypes.style」を使用している行をすべて削除します。 上記の例では 「containerCustomStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,」 の１行を全て消す。 そうすると次のエラーが出るので、そこの１行を消すことを繰り返します。（View.propTypes.styleこれが含まれている行です）
バージョンアップされるのを待つしかないです。
Unfortunately, this method did not work, it causes another error.
1- Import ViewStyle from react-native. import { ViewStyle } from 'react-native';
2- Replace View.propTypes.style with ViewStyle in the (Carousel, Pagination, ParallaxImage, PaginationDot) files.
3- Ensure to patch the package after making the changes.
1- Import ViewStyle from react-native.
import { ViewStyle } from 'react-native';2- Replace
View.propTypes.stylewith ViewStyle in the (Carousel, Pagination, ParallaxImage, PaginationDot) files. 3- Ensure to patch the package after making the changes.
This solved my problem , thank you man!
I am facing the same issue
already fix this problem ? if you fix please help me
ViewStyle
how exactly does one patch a package?
look at the doc patch-package
thanks, my issue is resolved
Thts cool
On Wed, 5 Jun 2024, 2:06 am rmelara-designli, @.***> wrote:
@aguidad https://github.com/aguidad solution works, thank you
— Reply to this email directly, view it on GitHub https://github.com/meliorence/react-native-snap-carousel/issues/1017#issuecomment-2148416548, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACZCYSUE5LWUGGNX5YVMJZDZFYT5LAVCNFSM6AAAAABHYDSECGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNBYGQYTMNJUHA . You are receiving this because you commented.Message ID: @.***>
work for me!!!
To fix the issue you are facing by replacing View.propTypes.style with ViewStyle in the Carousel, Pagination, ParallaxImage, and PaginationDot files, you can follow these steps:
1. Install Patch-Package
Patch-package is a tool that allows you to create and apply patches to your node_modules dependencies. First, you need to install patch-package.
yarn add patch-package postinstall-postinstall
Add a postinstall script to your package.json to ensure the patch is applied every time you install dependencies.
{
"scripts": {
"postinstall": "patch-package"
}
}
2. Create a Patch for react-native-snap-carousel
Open your project directory and navigate to the files you need to modify in node_modules/react-native-snap-carousel. Replace View.propTypes.style with ViewStyle.
For example:
- node_modules/react-native-snap-carousel/src/carousel/Carousel.js
- node_modules/react-native-snap-carousel/src/pagination/Pagination.js
- node_modules/react-native-snap-carousel/src/parallaximage/ParallaxImage.js
- node_modules/react-native-snap-carousel/src/pagination/PaginationDot.js
Example Replacement in Carousel.js:
import { ViewPropTypes, ViewStyle } from 'react-native';
// Find the lines using `View.propTypes.style` and replace them with `ViewStyle`
static propTypes = {
...ViewPropTypes,
containerStyle: ViewStyle,
contentContainerStyle: ViewStyle,
slideStyle: ViewStyle,
// Continue for other properties
};
3. Create the Patch
After modifying the files in node_modules, create a patch with the command:
npx patch-package react-native-snap-carousel
4. Run the Application
After creating the patch, run your application again.
yarn start
Summary of package.json
Ensure your package.json has entries for patch-package and postinstall:
{
"name": "",
"version": "1.0.0",
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"postinstall": "patch-package"
},
"dependencies": {
"@expo/config": "~9.0.0",
"@expo/config-plugins": "~8.0.0",
"@expo/metro-config": "~0.18.1",
"@expo/prebuild-config": "~7.0.0",
"@react-native-async-storage/async-storage": "1.23.1",
"@react-native-community/checkbox": "^0.5.17",
"@react-navigation/bottom-tabs": "^6.3.1",
"@react-navigation/core": "^6.2.1",
"@react-navigation/drawer": "^6.4.1",
"@react-navigation/elements": "^1.3.3",
"@react-navigation/material-bottom-tabs": "^6.2.1",
"@react-navigation/material-top-tabs": "^6.2.1",
"@react-navigation/native": "^6.0.10",
"@react-navigation/native-stack": "^6.7.0",
"@react-navigation/routers": "^6.1.0",
"@react-navigation/stack": "^6.2.1",
"@types/react": "~18.2.79",
"axios": "^1.6.5",
"deprecated-react-native-prop-types": "^5.0.0",
"eas-cli": "^7.8.2",
"expo": "51",
"expo-checkbox": "~3.0.0",
"expo-clipboard": "~6.0.3",
"expo-device": "~6.0.2",
"expo-font": "~12.0.8",
"expo-image": "~1.12.12",
"expo-notifications": "~0.28.9",
"expo-splash-screen": "~0.27.5",
"expo-status-bar": "~1.12.1",
"expo-updates": "~0.25.19",
"metro": "~0.80.8",
"metro-config": "~0.80.8",
"metro-resolver": "~0.80.8",
"native-notify": "^3.2.7",
"qrcode.react": "^3.1.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.74.3",
"react-native-gesture-handler": "~2.16.1",
"react-native-otp-textinput": "^1.1.5",
"react-native-reanimated": "~3.10.1",
"react-native-restart": "^0.0.27",
"react-native-safe-area-context": "4.10.1",
"react-native-screens": "3.31.1",
"react-native-snap-carousel": "^3.9.1",
"react-native-swiper": "^1.6.0",
"react-native-web": "~0.19.6",
"react-navigation": "^5.0.0",
"react-navigation-stack": "^2.10.4",
"updates": "^15.1.1"
},
"devDependencies": {
"@babel/core": "^7.24.0",
"react-native-dotenv": "^3.4.9",
"patch-package": "^6.5.0",
"postinstall-postinstall": "^1.0.0"
},
"private": true
}
After these steps, your application should run without the View.propTypes.style related errors.
Ok i've solved this issue i'm gonna explain step by step everything. 1. install: npm install --save react-native-snap-carousel If you're using Typescript you should also install type definitions: npm install --save @types/react-native-snap-carousel
2. now comes to the issue => go to node modules =>open react-native-snap-carousel =>open carousel => inside carousel open carousel.js => import { ViewStyle } from 'react-native'; => replace the statis proptypes to the bottom one:
` static propTypes = { data: PropTypes.array.isRequired, renderItem: PropTypes.func.isRequired, itemWidth: PropTypes.number, // required for horizontal carousel itemHeight: PropTypes.number, // required for vertical carousel sliderWidth: PropTypes.number, // required for horizontal carousel sliderHeight: PropTypes.number, // required for vertical carousel activeAnimationType: PropTypes.string, activeAnimationOptions: PropTypes.object, activeSlideAlignment: PropTypes.oneOf(['center', 'end', 'start']), activeSlideOffset: PropTypes.number, apparitionDelay: PropTypes.number, autoplay: PropTypes.bool, autoplayDelay: PropTypes.number, autoplayInterval: PropTypes.number, callbackOffsetMargin: PropTypes.number, containerCustomStyle: ViewStyle, contentContainerCustomStyle: ViewStyle, enableMomentum: PropTypes.bool, enableSnap: PropTypes.bool, firstItem: PropTypes.number, hasParallaxImages: PropTypes.bool, inactiveSlideOpacity: PropTypes.number, inactiveSlideScale: PropTypes.number, inactiveSlideShift: PropTypes.number, layout: PropTypes.oneOf(['default', 'stack', 'tinder']), layoutCardOffset: PropTypes.number, lockScrollTimeoutDuration: PropTypes.number, lockScrollWhileSnapping: PropTypes.bool, loop: PropTypes.bool, loopClonesPerSide: PropTypes.number, scrollEnabled: PropTypes.bool, scrollInterpolator: PropTypes.func, slideInterpolatedStyle: PropTypes.func, slideStyle: ViewStyle, shouldOptimizeUpdates: PropTypes.bool, swipeThreshold: PropTypes.number, useScrollView: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]), vertical: PropTypes.bool, onBeforeSnapToItem: PropTypes.func, onSnapToItem: PropTypes.func };
` step 3 : Patch => Install patch-package if you haven't already: npm install patch-package postinstall-postinstall => Create patches for the modified files: npx patch-package react-native-snap-carousel
**why we did this answer below : ** The error you're encountering is due to the use of deprecated ViewPropTypes.style in the react-native-snap-carousel package. This is no longer supported in newer versions of React Native, which is likely causing the TypeError.
Here is my patch:
patches/react-native-snap-carousel+3.9.1.patch
diff --git a/node_modules/react-native-snap-carousel/src/carousel/Carousel.js b/node_modules/react-native-snap-carousel/src/carousel/Carousel.js
index dae71a3..72971cb 100644
--- a/node_modules/react-native-snap-carousel/src/carousel/Carousel.js
+++ b/node_modules/react-native-snap-carousel/src/carousel/Carousel.js
@@ -1,5 +1,6 @@
import React, { Component } from 'react';
-import { Animated, Easing, FlatList, I18nManager, Platform, ScrollView, View, ViewPropTypes } from 'react-native';
+import { Animated, Easing, FlatList, I18nManager, Platform, ScrollView, View } from 'react-native';
+import {ViewPropTypes} from 'deprecated-react-native-prop-types';
import PropTypes from 'prop-types';
import shallowCompare from 'react-addons-shallow-compare';
import {
diff --git a/node_modules/react-native-snap-carousel/src/pagination/Pagination.js b/node_modules/react-native-snap-carousel/src/pagination/Pagination.js
index 5c021cf..c02e0d6 100644
--- a/node_modules/react-native-snap-carousel/src/pagination/Pagination.js
+++ b/node_modules/react-native-snap-carousel/src/pagination/Pagination.js
@@ -1,5 +1,6 @@
import React, { PureComponent } from 'react';
-import { I18nManager, Platform, View, ViewPropTypes } from 'react-native';
+import { I18nManager, Platform, View } from 'react-native';
+import {ViewPropTypes} from 'deprecated-react-native-prop-types';
import PropTypes from 'prop-types';
import PaginationDot from './PaginationDot';
import styles from './Pagination.style';
diff --git a/node_modules/react-native-snap-carousel/src/pagination/PaginationDot.js b/node_modules/react-native-snap-carousel/src/pagination/PaginationDot.js
index e59d196..41bd4f9 100644
--- a/node_modules/react-native-snap-carousel/src/pagination/PaginationDot.js
+++ b/node_modules/react-native-snap-carousel/src/pagination/PaginationDot.js
@@ -1,5 +1,6 @@
import React, { PureComponent } from 'react';
-import { View, Animated, Easing, TouchableOpacity, ViewPropTypes } from 'react-native';
+import { View, Animated, Easing, TouchableOpacity } from 'react-native';
+import {ViewPropTypes} from 'deprecated-react-native-prop-types';
import PropTypes from 'prop-types';
import styles from './Pagination.style';
diff --git a/node_modules/react-native-snap-carousel/src/parallaximage/ParallaxImage.js b/node_modules/react-native-snap-carousel/src/parallaximage/ParallaxImage.js
index 8bc774a..da72b06 100644
--- a/node_modules/react-native-snap-carousel/src/parallaximage/ParallaxImage.js
+++ b/node_modules/react-native-snap-carousel/src/parallaximage/ParallaxImage.js
@@ -1,7 +1,8 @@
// Parallax effect inspired by https://github.com/oblador/react-native-parallax/
import React, { Component } from 'react';
-import { View, ViewPropTypes, Image, Animated, Easing, ActivityIndicator, findNodeHandle } from 'react-native';
+import { View, Image, Animated, Easing, ActivityIndicator, findNodeHandle } from 'react-native';
+import {ViewPropTypes} from 'deprecated-react-native-prop-types';
import PropTypes from 'prop-types';
import styles from './ParallaxImage.style';
Why is this issue closed? A patch is only the first step to resolving this issue. This should be contributed back to this repo.
import {ViewStyle} from 'react-native' worked but I'm still getting warnings on prop-types
ERROR Warning: Failed prop type: Carousel: prop type containerCustomStyle is invalid; it must be a function, usually from the prop-types package, but received undefined.This often happens because of typos such as PropTypes.function instead of PropTypes.func.
ERROR Warning: Failed prop type: Carousel: prop type contentContainerCustomStyle is invalid; it must be a function, usually from the prop-types package, but received undefined.This often happens because of typos such as PropTypes.function instead of PropTypes.func.
ERROR Warning: Failed prop type: Carousel: prop type slideStyle is invalid; it must be a function, usually from the prop-types package, but received undefined.This often happens because of typos such as PropTypes.function instead of PropTypes.func.
i found a workaround tho. here's my patch for it:
diff --git a/node_modules/react-native-snap-carousel/src/carousel/Carousel.js b/node_modules/react-native-snap-carousel/src/carousel/Carousel.js
index dae71a3..b98768e 100644
--- a/node_modules/react-native-snap-carousel/src/carousel/Carousel.js
+++ b/node_modules/react-native-snap-carousel/src/carousel/Carousel.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react';
-import { Animated, Easing, FlatList, I18nManager, Platform, ScrollView, View, ViewPropTypes } from 'react-native';
+import { Animated, Easing, FlatList, I18nManager, Platform, ScrollView, View } from 'react-native';
import PropTypes from 'prop-types';
import shallowCompare from 'react-addons-shallow-compare';
import {
@@ -43,8 +43,8 @@ export default class Carousel extends Component {
autoplayDelay: PropTypes.number,
autoplayInterval: PropTypes.number,
callbackOffsetMargin: PropTypes.number,
- containerCustomStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,
- contentContainerCustomStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,
+ containerCustomStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+ contentContainerCustomStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
enableMomentum: PropTypes.bool,
enableSnap: PropTypes.bool,
firstItem: PropTypes.number,
@@ -61,7 +61,7 @@ export default class Carousel extends Component {
scrollEnabled: PropTypes.bool,
scrollInterpolator: PropTypes.func,
slideInterpolatedStyle: PropTypes.func,
- slideStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,
+ slideStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
shouldOptimizeUpdates: PropTypes.bool,
swipeThreshold: PropTypes.number,
useScrollView: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
@@ -151,9 +151,6 @@ export default class Carousel extends Component {
this._ignoreNextMomentum = false;
// Warnings
- if (!ViewPropTypes) {
- console.warn('react-native-snap-carousel: It is recommended to use at least version 0.44 of React Native with the plugin');
- }
if (!props.vertical && (!props.sliderWidth || !props.itemWidth)) {
console.error('react-native-snap-carousel: You need to specify both `sliderWidth` and `itemWidth` for horizontal carousels');
}
diff --git a/node_modules/react-native-snap-carousel/src/pagination/Pagination.js b/node_modules/react-native-snap-carousel/src/pagination/Pagination.js
index 5c021cf..44aa287 100644
--- a/node_modules/react-native-snap-carousel/src/pagination/Pagination.js
+++ b/node_modules/react-native-snap-carousel/src/pagination/Pagination.js
@@ -1,5 +1,5 @@
import React, { PureComponent } from 'react';
-import { I18nManager, Platform, View, ViewPropTypes } from 'react-native';
+import { I18nManager, Platform, View } from 'react-native';
import PropTypes from 'prop-types';
import PaginationDot from './PaginationDot';
import styles from './Pagination.style';
@@ -14,16 +14,16 @@ export default class Pagination extends PureComponent {
dotsLength: PropTypes.number.isRequired,
activeOpacity: PropTypes.number,
carouselRef: PropTypes.object,
- containerStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,
+ containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
dotColor: PropTypes.string,
- dotContainerStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,
+ dotContainerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
dotElement: PropTypes.element,
- dotStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,
+ dotStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
inactiveDotColor: PropTypes.string,
inactiveDotElement: PropTypes.element,
inactiveDotOpacity: PropTypes.number,
inactiveDotScale: PropTypes.number,
- inactiveDotStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,
+ inactiveDotStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
renderDots: PropTypes.func,
tappableDots: PropTypes.bool,
vertical: PropTypes.bool,
diff --git a/node_modules/react-native-snap-carousel/src/pagination/PaginationDot.js b/node_modules/react-native-snap-carousel/src/pagination/PaginationDot.js
index e59d196..3770c03 100644
--- a/node_modules/react-native-snap-carousel/src/pagination/PaginationDot.js
+++ b/node_modules/react-native-snap-carousel/src/pagination/PaginationDot.js
@@ -1,5 +1,5 @@
import React, { PureComponent } from 'react';
-import { View, Animated, Easing, TouchableOpacity, ViewPropTypes } from 'react-native';
+import { View, Animated, Easing, TouchableOpacity } from 'react-native';
import PropTypes from 'prop-types';
import styles from './Pagination.style';
@@ -12,11 +12,11 @@ export default class PaginationDot extends PureComponent {
activeOpacity: PropTypes.number,
carouselRef: PropTypes.object,
color: PropTypes.string,
- containerStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,
+ containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
inactiveColor: PropTypes.string,
- inactiveStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,
+ inactiveStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
index: PropTypes.number,
- style: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,
+ style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
tappable: PropTypes.bool
};
diff --git a/node_modules/react-native-snap-carousel/src/parallaximage/ParallaxImage.js b/node_modules/react-native-snap-carousel/src/parallaximage/ParallaxImage.js
index 8bc774a..3be5f83 100644
--- a/node_modules/react-native-snap-carousel/src/parallaximage/ParallaxImage.js
+++ b/node_modules/react-native-snap-carousel/src/parallaximage/ParallaxImage.js
@@ -1,7 +1,7 @@
// Parallax effect inspired by https://github.com/oblador/react-native-parallax/
import React, { Component } from 'react';
-import { View, ViewPropTypes, Image, Animated, Easing, ActivityIndicator, findNodeHandle } from 'react-native';
+import { View, Image, Animated, Easing, ActivityIndicator, findNodeHandle } from 'react-native';
import PropTypes from 'prop-types';
import styles from './ParallaxImage.style';
@@ -16,7 +16,7 @@ export default class ParallaxImage extends Component {
sliderHeight: PropTypes.number, // passed from <Carousel />
sliderWidth: PropTypes.number, // passed from <Carousel />
vertical: PropTypes.bool, // passed from <Carousel />
- containerStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,
+ containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
dimensions: PropTypes.shape({
width: PropTypes.number,
height: PropTypes.number
1- Import ViewStyle from react-native.
import { ViewStyle } from 'react-native';2- Replace
View.propTypes.stylewith ViewStyle in the (Carousel, Pagination, ParallaxImage, PaginationDot) files. 3- Ensure to patch the package after making the changes.
thanks man
ViewStyle
how exactly does one patch a package?
@nomilogic
npm install patch-package --save-dev- edit the dependency file
npx patch-package <dependency-name>- In your package.json:
"scripts": {
"postinstall": "patch-package"
}
1- Import ViewStyle from react-native.
import { ViewStyle } from 'react-native';2- Replace
View.propTypes.stylewith ViewStyle in the (Carousel, Pagination, ParallaxImage, PaginationDot) files. 3- Ensure to patch the package after making the changes.
-> It works, it's my life saver. thank you so much
