ViewPropTypes is deprecated

[mahesh-agrawal-616]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-snap-carousel@3.9.1 for the project I'm working on.

I got error about ViewPropTypes is deprecated. I have seen this problem posted in the issues but the solution was given there to use the deprecated view prop types but I have solved it using the prop-types only. Which does not require another dependency.

Here is the diff that solved my problem:

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..860c13e 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,9 @@ 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 (!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

This issue body was partially generated by patch-package.

[YA9]

Here are step by step instructions for anyone interested

Step 1: Open the Files

You'll need to make changes to the following files within the react-native-snap-carousel package inside your node_modules folder:

• Carousel.js
• Pagination.js
• PaginationDot.js
• ParallaxImage.js

Step 2: Modify Carousel.js

Open Carousel.js and make the following changes:

• Remove ViewPropTypes from the import statement at the top.
• Replace ViewPropTypes ? ViewPropTypes.style : View.propTypes.style with PropTypes.oneOfType([PropTypes.object, PropTypes.array]) in three places.
• Comment out the warning related to ViewPropTypes.

Step 3: Modify Pagination.js

Open Pagination.js and make the following changes:

• Remove ViewPropTypes from the import statement at the top.
• Replace all instances of ViewPropTypes ? ViewPropTypes.style : View.propTypes.style with PropTypes.oneOfType([PropTypes.object, PropTypes.array]).

Step 4: Modify PaginationDot.js

Open PaginationDot.js and make the following changes:

• Remove ViewPropTypes from the import statement at the top.
• Replace all instances of ViewPropTypes ? ViewPropTypes.style : View.propTypes.style with PropTypes.oneOfType([PropTypes.object, PropTypes.array]).

Step 5: Modify ParallaxImage.js

Open ParallaxImage.js and make the following changes:

• Remove ViewPropTypes from the import statement at the top.
• Replace the instance of ViewPropTypes ? ViewPropTypes.style : View.propTypes.style with PropTypes.oneOfType([PropTypes.object, PropTypes.array]).

Step 6: Create the Patch

After making the above changes, navigate to the root of your project and run the following command:

npx patch-package react-native-snap-carousel

This will create a .patch file in a directory called patches at the root of your project.

Step 7: Modify package.json

Add the following line to the scripts section in your package.json file:

"postinstall": "patch-package"

Step 8: Commit the Patch File

Commit the .patch file to your version control system (e.g., Git) so that other developers working on the project can benefit from the patch.

Step 9: Reinstall the Dependencies (Optional)

Run npm install or yarn to ensure the patch is applied.

[devguerreiro]

Same problem here

[Gourav2609]

@YA9 @mahesh-agrawal-616 i did exactly what u said

Please help me out..

[Thilinalak]

Here are step by step instructions for anyone interested

Step 1: Open the Files

You'll need to make changes to the following files within the react-native-snap-carousel package inside your node_modules folder:

• Carousel.js
• Pagination.js
• PaginationDot.js
• ParallaxImage.js

Step 2: Modify Carousel.js

Open Carousel.js and make the following changes:

• Remove ViewPropTypes from the import statement at the top.
• Replace ViewPropTypes ? ViewPropTypes.style : View.propTypes.style with PropTypes.oneOfType([PropTypes.object, PropTypes.array]) in three places.
• Comment out the warning related to ViewPropTypes.

Step 3: Modify Pagination.js

Open Pagination.js and make the following changes:

• Remove ViewPropTypes from the import statement at the top.
• Replace all instances of ViewPropTypes ? ViewPropTypes.style : View.propTypes.style with PropTypes.oneOfType([PropTypes.object, PropTypes.array]).

Step 4: Modify PaginationDot.js

Open PaginationDot.js and make the following changes:

• Remove ViewPropTypes from the import statement at the top.
• Replace all instances of ViewPropTypes ? ViewPropTypes.style : View.propTypes.style with PropTypes.oneOfType([PropTypes.object, PropTypes.array]).

Step 5: Modify ParallaxImage.js

Open ParallaxImage.js and make the following changes:

• Remove ViewPropTypes from the import statement at the top.
• Replace the instance of ViewPropTypes ? ViewPropTypes.style : View.propTypes.style with PropTypes.oneOfType([PropTypes.object, PropTypes.array]).

Step 6: Create the Patch

After making the above changes, navigate to the root of your project and run the following command:

npx patch-package react-native-snap-carousel

This will create a .patch file in a directory called patches at the root of your project.

Step 7: Modify package.json

Add the following line to the scripts section in your package.json file:

"postinstall": "patch-package"

Step 8: Commit the Patch File

Commit the .patch file to your version control system (e.g., Git) so that other developers working on the project can benefit from the patch.

Step 9: Reinstall the Dependencies (Optional)

Run npm install or yarn to ensure the patch is applied.

this worked to me. RN 0.69.12 node v18. thank you.

[belle-beauty]

Here are step by step instructions for anyone interested

Step 1: Open the Files

You'll need to make changes to the following files within the react-native-snap-carousel package inside your node_modules folder:

• Carousel.js
• Pagination.js
• PaginationDot.js
• ParallaxImage.js

Step 2: Modify Carousel.js

Open Carousel.js and make the following changes:

• Remove ViewPropTypes from the import statement at the top.
• Replace ViewPropTypes ? ViewPropTypes.style : View.propTypes.style with PropTypes.oneOfType([PropTypes.object, PropTypes.array]) in three places.
• Comment out the warning related to ViewPropTypes.

Step 3: Modify Pagination.js

Open Pagination.js and make the following changes:

• Remove ViewPropTypes from the import statement at the top.
• Replace all instances of ViewPropTypes ? ViewPropTypes.style : View.propTypes.style with PropTypes.oneOfType([PropTypes.object, PropTypes.array]).

Step 4: Modify PaginationDot.js

Open PaginationDot.js and make the following changes:

• Remove ViewPropTypes from the import statement at the top.
• Replace all instances of ViewPropTypes ? ViewPropTypes.style : View.propTypes.style with PropTypes.oneOfType([PropTypes.object, PropTypes.array]).

Step 5: Modify ParallaxImage.js

Open ParallaxImage.js and make the following changes:

• Remove ViewPropTypes from the import statement at the top.
• Replace the instance of ViewPropTypes ? ViewPropTypes.style : View.propTypes.style with PropTypes.oneOfType([PropTypes.object, PropTypes.array]).

Step 6: Create the Patch

After making the above changes, navigate to the root of your project and run the following command:

npx patch-package react-native-snap-carousel

This will create a .patch file in a directory called patches at the root of your project.

Step 7: Modify package.json

Add the following line to the scripts section in your package.json file:

"postinstall": "patch-package"

Step 8: Commit the Patch File

Commit the .patch file to your version control system (e.g., Git) so that other developers working on the project can benefit from the patch.

Step 9: Reinstall the Dependencies (Optional)

Run npm install or yarn to ensure the patch is applied.

This fixed my issue!!!

[Ibadmoin]

@YA9 @mahesh-agrawal-616 i did exactly what u said

Please help me out..

Hi Dear!

To resolve this issue, you need to install patch-package either globally or as a project dependency.

Option 1: Install patch-package globally

npm install -g patch-package

Option 2: Install patch-package as a project dependency

npm install --save-dev patch-package

Once you have installed patch-package, you can try running npm install again.

After these steps, running npm install should execute the postinstall script and apply any necessary patches. If the issue persists, you can try running patch-package directly:

npx patch-package