meliorence / meliorence/react-native-snap-carousel
ViewPropTypes is deprecated
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 10.5k
- Forks
- 2.3k
- PR merge metrics
- No merged PRs in 30d
Description
Hi! 👋
Firstly, thanks for your work on this project! 🙂
Today I used [patch-package](https://github.com/ds300/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
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
sliderWidth: PropTypes.number, // passed from
vertical: PropTypes.bool, // passed from
- 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](https://github.com/ds300/patch-package/issues/296).
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Review src/carousel/Carousel.js, src/pagination/Pagination.js, src/pagination/PaginationDot.js, and src/parallaximage/ParallaxImage.js, starting with their ViewPropTypes imports and style prop definitions. Apply the issue's proposed replacement and verify that deprecated ViewPropTypes references and the related warning are removed from these entry points.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 25/100