ViewPropTypes is deprecated #992

mahesh-agrawal-616 · 2023-08-09T07:29:20Z

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] 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.

The text was updated successfully, but these errors were encountered:

YA9 · 2023-08-12T18:58:40Z

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 · 2023-08-19T02:09:13Z

Same problem here

• it was a known bug: meliorence/react-native-snap-carousel#992 (comment)

Gourav2609 · 2023-10-29T19:03:50Z

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

Please help me out..

Thilinalak · 2023-11-30T03:32:01Z

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 · 2023-12-08T07:21:48Z

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 · 2023-12-12T20:26:19Z

@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

sahilkashyap64 · 2024-09-25T17:56:54Z

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.

Bro thank you so much

this-git-hanylf added a commit to this-git-hanylf/paradisesalesmobiles that referenced this issue Aug 29, 2023

29/8, commit the .patch file meliorence/react-native-snap-carousel#992

853e1f0

KiranCNayak added a commit to KiranCNayak/rn_app_03_wallpaper_app that referenced this issue Sep 10, 2023

Added patch to react-native-snap-carousel

b6a2cce

• it was a known bug: meliorence/react-native-snap-carousel#992 (comment)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ViewPropTypes is deprecated #992

ViewPropTypes is deprecated #992

mahesh-agrawal-616 commented Aug 9, 2023 •

edited

Loading

YA9 commented Aug 12, 2023

devguerreiro commented Aug 19, 2023

Gourav2609 commented Oct 29, 2023 •

edited

Loading

Thilinalak commented Nov 30, 2023 •

edited

Loading

Step 1: Open the Files

Step 2: Modify `Carousel.js`

Step 3: Modify `Pagination.js`

Step 4: Modify `PaginationDot.js`

Step 5: Modify `ParallaxImage.js`

Step 6: Create the Patch

Step 7: Modify `package.json`

Step 8: Commit the Patch File

Step 9: Reinstall the Dependencies (Optional)

belle-beauty commented Dec 8, 2023

Step 1: Open the Files

Step 2: Modify `Carousel.js`

Step 3: Modify `Pagination.js`

Step 4: Modify `PaginationDot.js`

Step 5: Modify `ParallaxImage.js`

Step 6: Create the Patch

Step 7: Modify `package.json`

Step 8: Commit the Patch File

Step 9: Reinstall the Dependencies (Optional)

Ibadmoin commented Dec 12, 2023

sahilkashyap64 commented Sep 25, 2024

Step 1: Open the Files

Step 2: Modify `Carousel.js`

Step 3: Modify `Pagination.js`

Step 4: Modify `PaginationDot.js`

Step 5: Modify `ParallaxImage.js`

Step 6: Create the Patch

Step 7: Modify `package.json`

Step 8: Commit the Patch File

Step 9: Reinstall the Dependencies (Optional)

ViewPropTypes is deprecated #992

ViewPropTypes is deprecated #992

Comments

mahesh-agrawal-616 commented Aug 9, 2023 • edited Loading

YA9 commented Aug 12, 2023

Step 1: Open the Files

Step 2: Modify Carousel.js

Step 3: Modify Pagination.js

Step 4: Modify PaginationDot.js

Step 5: Modify ParallaxImage.js

Step 6: Create the Patch

Step 7: Modify package.json

Step 8: Commit the Patch File

Step 9: Reinstall the Dependencies (Optional)

devguerreiro commented Aug 19, 2023

Gourav2609 commented Oct 29, 2023 • edited Loading

Thilinalak commented Nov 30, 2023 • edited Loading

Step 1: Open the Files

Step 2: Modify Carousel.js

Step 3: Modify Pagination.js

Step 4: Modify PaginationDot.js

Step 5: Modify ParallaxImage.js

Step 6: Create the Patch

Step 7: Modify package.json

Step 8: Commit the Patch File

Step 9: Reinstall the Dependencies (Optional)

belle-beauty commented Dec 8, 2023

Step 1: Open the Files

Step 2: Modify Carousel.js

Step 3: Modify Pagination.js

Step 4: Modify PaginationDot.js

Step 5: Modify ParallaxImage.js

Step 6: Create the Patch

Step 7: Modify package.json

Step 8: Commit the Patch File

Step 9: Reinstall the Dependencies (Optional)

Ibadmoin commented Dec 12, 2023

Option 1: Install patch-package globally

Option 2: Install patch-package as a project dependency

sahilkashyap64 commented Sep 25, 2024

Step 1: Open the Files

Step 2: Modify Carousel.js

Step 3: Modify Pagination.js

Step 4: Modify PaginationDot.js

Step 5: Modify ParallaxImage.js

Step 6: Create the Patch

Step 7: Modify package.json

Step 8: Commit the Patch File

Step 9: Reinstall the Dependencies (Optional)

mahesh-agrawal-616 commented Aug 9, 2023 •

edited

Loading

Step 2: Modify `Carousel.js`

Step 3: Modify `Pagination.js`

Step 4: Modify `PaginationDot.js`

Step 5: Modify `ParallaxImage.js`

Step 7: Modify `package.json`

Gourav2609 commented Oct 29, 2023 •

edited

Loading

Thilinalak commented Nov 30, 2023 •

edited

Loading

Step 2: Modify `Carousel.js`

Step 3: Modify `Pagination.js`

Step 4: Modify `PaginationDot.js`

Step 5: Modify `ParallaxImage.js`

Step 7: Modify `package.json`

Step 2: Modify `Carousel.js`

Step 3: Modify `Pagination.js`

Step 4: Modify `PaginationDot.js`

Step 5: Modify `ParallaxImage.js`

Step 7: Modify `package.json`

Option 1: Install `patch-package` globally

Option 2: Install `patch-package` as a project dependency

Step 2: Modify `Carousel.js`

Step 3: Modify `Pagination.js`

Step 4: Modify `PaginationDot.js`

Step 5: Modify `ParallaxImage.js`

Step 7: Modify `package.json`