ViewPropTypes is deprecated in 'react-native'

[AndrewDongminYoo]

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.

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..0cd6d42 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 {
@@ -102,7 +103,7 @@ export default class Carousel extends Component {
         vertical: false
     }

-    constructor (props) {
+    constructor(props) {
         super(props);

         this.state = {
@@ -171,7 +172,7 @@ export default class Carousel extends Component {
         }
     }

-    componentDidMount () {
+    componentDidMount() {
         const { apparitionDelay, autoplay, firstItem } = this.props;
         const _firstItem = this._getFirstItem(firstItem);
         const apparitionCallback = () => {
@@ -203,7 +204,7 @@ export default class Carousel extends Component {
         });
     }

-    shouldComponentUpdate (nextProps, nextState) {
+    shouldComponentUpdate(nextProps, nextState) {
         if (this.props.shouldOptimizeUpdates === false) {
             return true;
         } else {
@@ -211,7 +212,7 @@ export default class Carousel extends Component {
         }
     }

-    componentDidUpdate (prevProps) {
+    componentDidUpdate(prevProps) {
         const { interpolators } = this.state;
         const { firstItem, itemHeight, itemWidth, scrollEnabled, sliderHeight, sliderWidth } = this.props;
         const itemsLength = this._getCustomDataLength(this.props);
@@ -263,11 +264,11 @@ export default class Carousel extends Component {
         }

         if (this.props.onScroll !== prevProps.onScroll) {
-          this._setScrollHandler(this.props);
+            this._setScrollHandler(this.props);
         }
     }

-    componentWillUnmount () {
+    componentWillUnmount() {
         this._mounted = false;
         this.stopAutoplay();
         clearTimeout(this._apparitionTimeout);
@@ -279,69 +280,69 @@ export default class Carousel extends Component {
         clearTimeout(this._lockScrollTimeout);
     }

-    get realIndex () {
+    get realIndex() {
         return this._activeItem;
     }

-    get currentIndex () {
+    get currentIndex() {
         return this._getDataIndex(this._activeItem);
     }

-    get currentScrollPosition () {
+    get currentScrollPosition() {
         return this._currentContentOffset;
     }

     _setScrollHandler(props) {
-      // Native driver for scroll events
-      const scrollEventConfig = {
-        listener: this._onScroll,
-        useNativeDriver: true,
-      };
-      this._scrollPos = new Animated.Value(0);
-      const argMapping = props.vertical
-        ? [{ nativeEvent: { contentOffset: { y: this._scrollPos } } }]
-        : [{ nativeEvent: { contentOffset: { x: this._scrollPos } } }];
-
-      if (props.onScroll && Array.isArray(props.onScroll._argMapping)) {
-        // Because of a react-native issue https://github.com/facebook/react-native/issues/13294
-        argMapping.pop();
-        const [ argMap ] = props.onScroll._argMapping;
-        if (argMap && argMap.nativeEvent && argMap.nativeEvent.contentOffset) {
-          // Shares the same animated value passed in props
-          this._scrollPos =
-            argMap.nativeEvent.contentOffset.x ||
-            argMap.nativeEvent.contentOffset.y ||
-            this._scrollPos;
-        }
-        argMapping.push(...props.onScroll._argMapping);
-      }
-      this._onScrollHandler = Animated.event(
-        argMapping,
-        scrollEventConfig
-      );
-    }
-
-    _needsScrollView () {
+        // Native driver for scroll events
+        const scrollEventConfig = {
+            listener: this._onScroll,
+            useNativeDriver: true,
+        };
+        this._scrollPos = new Animated.Value(0);
+        const argMapping = props.vertical
+            ? [{ nativeEvent: { contentOffset: { y: this._scrollPos } } }]
+            : [{ nativeEvent: { contentOffset: { x: this._scrollPos } } }];
+
+        if (props.onScroll && Array.isArray(props.onScroll._argMapping)) {
+            // Because of a react-native issue https://github.com/facebook/react-native/issues/13294
+            argMapping.pop();
+            const [argMap] = props.onScroll._argMapping;
+            if (argMap && argMap.nativeEvent && argMap.nativeEvent.contentOffset) {
+                // Shares the same animated value passed in props
+                this._scrollPos =
+                    argMap.nativeEvent.contentOffset.x ||
+                    argMap.nativeEvent.contentOffset.y ||
+                    this._scrollPos;
+            }
+            argMapping.push(...props.onScroll._argMapping);
+        }
+        this._onScrollHandler = Animated.event(
+            argMapping,
+            scrollEventConfig
+        );
+    }
+
+    _needsScrollView() {
         const { useScrollView } = this.props;
         return useScrollView || !AnimatedFlatList || this._shouldUseStackLayout() || this._shouldUseTinderLayout();
     }

-    _needsRTLAdaptations () {
+    _needsRTLAdaptations() {
         const { vertical } = this.props;
         return IS_RTL && !IS_IOS && !vertical;
     }

-    _canLockScroll () {
+    _canLockScroll() {
         const { scrollEnabled, enableMomentum, lockScrollWhileSnapping } = this.props;
         return scrollEnabled && !enableMomentum && lockScrollWhileSnapping;
     }

-    _enableLoop () {
+    _enableLoop() {
         const { data, enableSnap, loop } = this.props;
         return enableSnap && loop && data && data.length && data.length > 1;
     }

-    _shouldAnimateSlides (props = this.props) {
+    _shouldAnimateSlides(props = this.props) {
         const { inactiveSlideOpacity, inactiveSlideScale, scrollInterpolator, slideInterpolatedStyle } = props;
         return inactiveSlideOpacity < 1 ||
             inactiveSlideScale < 1 ||
@@ -352,25 +353,25 @@ export default class Carousel extends Component {
             this._shouldUseTinderLayout();
     }

-    _shouldUseCustomAnimation () {
+    _shouldUseCustomAnimation() {
         const { activeAnimationOptions } = this.props;
         return !!activeAnimationOptions && !this._shouldUseStackLayout() && !this._shouldUseTinderLayout();
     }

-    _shouldUseShiftLayout () {
+    _shouldUseShiftLayout() {
         const { inactiveSlideShift, layout } = this.props;
         return layout === 'default' && inactiveSlideShift !== 0;
     }

-    _shouldUseStackLayout () {
+    _shouldUseStackLayout() {
         return this.props.layout === 'stack';
     }

-    _shouldUseTinderLayout () {
+    _shouldUseTinderLayout() {
         return this.props.layout === 'tinder';
     }

-    _getCustomData (props = this.props) {
+    _getCustomData(props = this.props) {
         const { data, loopClonesPerSide } = props;
         const dataLength = data && data.length;

@@ -404,7 +405,7 @@ export default class Carousel extends Component {
         return previousItems.concat(data, nextItems);
     }

-    _getCustomDataLength (props = this.props) {
+    _getCustomDataLength(props = this.props) {
         const { data, loopClonesPerSide } = props;
         const dataLength = data && data.length;

@@ -415,7 +416,7 @@ export default class Carousel extends Component {
         return this._enableLoop() ? dataLength + (2 * loopClonesPerSide) : dataLength;
     }

-    _getCustomIndex (index, props = this.props) {
+    _getCustomIndex(index, props = this.props) {
         const itemsLength = this._getCustomDataLength(props);

         if (!itemsLength || (!index && index !== 0)) {
@@ -425,7 +426,7 @@ export default class Carousel extends Component {
         return this._needsRTLAdaptations() ? itemsLength - index - 1 : index;
     }

-    _getDataIndex (index) {
+    _getDataIndex(index) {
         const { data, loopClonesPerSide } = this.props;
         const dataLength = data && data.length;

@@ -464,12 +465,12 @@ export default class Carousel extends Component {
     }

     // Used with `snapToItem()` and 'PaginationDot'
-    _getPositionIndex (index) {
+    _getPositionIndex(index) {
         const { loop, loopClonesPerSide } = this.props;
         return loop ? index + loopClonesPerSide : index;
     }

-    _getFirstItem (index, props = this.props) {
+    _getFirstItem(index, props = this.props) {
         const { loopClonesPerSide } = props;
         const itemsLength = this._getCustomDataLength(props);

@@ -480,7 +481,7 @@ export default class Carousel extends Component {
         return this._enableLoop() ? index + loopClonesPerSide : index;
     }

-    _getWrappedRef () {
+    _getWrappedRef() {
         if (this._carouselRef && (
             (this._needsScrollView() && this._carouselRef.scrollTo) ||
             (!this._needsScrollView() && this._carouselRef.scrollToOffset)
@@ -492,11 +493,11 @@ export default class Carousel extends Component {
         return this._carouselRef && this._carouselRef.getNode && this._carouselRef.getNode();
     }

-    _getScrollEnabled () {
+    _getScrollEnabled() {
         return this._scrollEnabled;
     }

-    _setScrollEnabled (scrollEnabled = true) {
+    _setScrollEnabled(scrollEnabled = true) {
         const wrappedRef = this._getWrappedRef();

         if (!wrappedRef || !wrappedRef.setNativeProps) {
@@ -509,17 +510,17 @@ export default class Carousel extends Component {
         this._scrollEnabled = scrollEnabled;
     }

-    _getKeyExtractor (item, index) {
+    _getKeyExtractor(item, index) {
         return this._needsScrollView() ? `scrollview-item-${index}` : `flatlist-item-${index}`;
     }

-    _getScrollOffset (event) {
+    _getScrollOffset(event) {
         const { vertical } = this.props;
         return (event && event.nativeEvent && event.nativeEvent.contentOffset &&
             event.nativeEvent.contentOffset[vertical ? 'y' : 'x']) || 0;
     }

-    _getContainerInnerMargin (opposite = false) {
+    _getContainerInnerMargin(opposite = false) {
         const { sliderWidth, sliderHeight, itemWidth, itemHeight, vertical, activeSlideAlignment } = this.props;

         if ((activeSlideAlignment === 'start' && !opposite) ||
@@ -533,7 +534,7 @@ export default class Carousel extends Component {
         }
     }

-    _getViewportOffset () {
+    _getViewportOffset() {
         const { sliderWidth, sliderHeight, itemWidth, itemHeight, vertical, activeSlideAlignment } = this.props;

         if (activeSlideAlignment === 'start') {
@@ -547,11 +548,11 @@ export default class Carousel extends Component {
         }
     }

-    _getCenter (offset) {
+    _getCenter(offset) {
         return offset + this._getViewportOffset() - this._getContainerInnerMargin();
     }

-    _getActiveItem (offset) {
+    _getActiveItem(offset) {
         const { activeSlideOffset, swipeThreshold } = this.props;
         const center = this._getCenter(offset);
         const centerOffset = activeSlideOffset || swipeThreshold;
@@ -571,7 +572,7 @@ export default class Carousel extends Component {
         return 0;
     }

-    _initPositionsAndInterpolators (props = this.props) {
+    _initPositionsAndInterpolators(props = this.props) {
         const { data, itemWidth, itemHeight, scrollInterpolator, vertical } = props;
         const sizeRef = vertical ? itemHeight : itemWidth;

@@ -622,7 +623,7 @@ export default class Carousel extends Component {
         this.setState({ interpolators });
     }

-    _getSlideAnimation (index, toValue) {
+    _getSlideAnimation(index, toValue) {
         const { interpolators } = this.state;
         const { activeAnimationType, activeAnimationOptions } = this.props;

@@ -651,7 +652,7 @@ export default class Carousel extends Component {
         ]);
     }

-    _playCustomSlideAnimation (current, next) {
+    _playCustomSlideAnimation(current, next) {
         const { interpolators } = this.state;
         const itemsLength = this._getCustomDataLength();
         const _currentIndex = this._getCustomIndex(current);
@@ -681,7 +682,7 @@ export default class Carousel extends Component {
         Animated.parallel(animations, { stopTogether: false }).start();
     }

-    _hackActiveSlideAnimation (index, goTo, force = false) {
+    _hackActiveSlideAnimation(index, goTo, force = false) {
         const { data } = this.props;

         if (!this._mounted || !this._carouselRef || !this._positions[index] || (!force && this._enableLoop())) {
@@ -705,7 +706,7 @@ export default class Carousel extends Component {
         }, 50); // works randomly when set to '0'
     }

-    _lockScroll () {
+    _lockScroll() {
         const { lockScrollTimeoutDuration } = this.props;
         clearTimeout(this._lockScrollTimeout);
         this._lockScrollTimeout = setTimeout(() => {
@@ -714,12 +715,12 @@ export default class Carousel extends Component {
         this._setScrollEnabled(false);
     }

-    _releaseScroll () {
+    _releaseScroll() {
         clearTimeout(this._lockScrollTimeout);
         this._setScrollEnabled(true);
     }

-    _repositionScroll (index) {
+    _repositionScroll(index) {
         const { data, loopClonesPerSide } = this.props;
         const dataLength = data && data.length;

@@ -739,7 +740,7 @@ export default class Carousel extends Component {
         this._snapToItem(repositionTo, false, false, false, false);
     }

-    _scrollTo (offset, animated = true) {
+    _scrollTo(offset, animated = true) {
         const { vertical } = this.props;
         const wrappedRef = this._getWrappedRef();

@@ -765,7 +766,7 @@ export default class Carousel extends Component {
         }
     }

-    _onScroll (event) {
+    _onScroll(event) {
         const { callbackOffsetMargin, enableMomentum, onScroll } = this.props;

         const scrollOffset = event ? this._getScrollOffset(event) : this._currentContentOffset;
@@ -827,7 +828,7 @@ export default class Carousel extends Component {
         }
     }

-    _onStartShouldSetResponderCapture (event) {
+    _onStartShouldSetResponderCapture(event) {
         const { onStartShouldSetResponderCapture } = this.props;

         if (onStartShouldSetResponderCapture) {
@@ -837,7 +838,7 @@ export default class Carousel extends Component {
         return this._getScrollEnabled();
     }

-    _onTouchStart () {
+    _onTouchStart() {
         const { onTouchStart } = this.props

         // `onTouchStart` is fired even when `scrollEnabled` is set to `false`
@@ -850,7 +851,7 @@ export default class Carousel extends Component {
         }
     }

-    _onTouchEnd () {
+    _onTouchEnd() {
         const { onTouchEnd } = this.props

         if (this._getScrollEnabled() !== false && this._autoplay && !this._autoplaying) {
@@ -864,7 +865,7 @@ export default class Carousel extends Component {
     }

     // Used when `enableSnap` is ENABLED
-    _onScrollBeginDrag (event) {
+    _onScrollBeginDrag(event) {
         const { onScrollBeginDrag } = this.props;

         if (!this._getScrollEnabled()) {
@@ -882,7 +883,7 @@ export default class Carousel extends Component {
     }

     // Used when `enableMomentum` is DISABLED
-    _onScrollEndDrag (event) {
+    _onScrollEndDrag(event) {
         const { onScrollEndDrag } = this.props;

         if (this._carouselRef) {
@@ -895,7 +896,7 @@ export default class Carousel extends Component {
     }

     // Used when `enableMomentum` is ENABLED
-    _onMomentumScrollEnd (event) {
+    _onMomentumScrollEnd(event) {
         const { onMomentumScrollEnd } = this.props;

         if (this._carouselRef) {
@@ -907,7 +908,7 @@ export default class Carousel extends Component {
         }
     }

-    _onScrollEnd (event) {
+    _onScrollEnd(event) {
         const { autoplayDelay, enableSnap } = this.props;

         if (this._ignoreNextMomentum) {
@@ -940,7 +941,7 @@ export default class Carousel extends Component {
     // Due to a bug, this event is only fired on iOS
     // https://github.com/facebook/react-native/issues/6791
     // it's fine since we're only fixing an iOS bug in it, so ...
-    _onTouchRelease (event) {
+    _onTouchRelease(event) {
         const { enableMomentum } = this.props;

         if (enableMomentum && IS_IOS) {
@@ -951,7 +952,7 @@ export default class Carousel extends Component {
         }
     }

-    _onLayout (event) {
+    _onLayout(event) {
         const { onLayout } = this.props;

         // Prevent unneeded actions during the first 'onLayout' (triggered on init)
@@ -967,7 +968,7 @@ export default class Carousel extends Component {
         }
     }

-    _snapScroll (delta) {
+    _snapScroll(delta) {
         const { swipeThreshold } = this.props;

         // When using momentum and releasing the touch with
@@ -1000,7 +1001,7 @@ export default class Carousel extends Component {
         }
     }

-    _snapToItem (index, animated = true, fireCallback = true, initial = false, lockScroll = true) {
+    _snapToItem(index, animated = true, fireCallback = true, initial = false, lockScroll = true) {
         const { enableMomentum, onSnapToItem, onBeforeSnapToItem } = this.props;
         const itemsLength = this._getCustomDataLength();
         const wrappedRef = this._getWrappedRef();
@@ -1069,7 +1070,7 @@ export default class Carousel extends Component {
         }
     }

-    _onBeforeSnap (index) {
+    _onBeforeSnap(index) {
         const { onBeforeSnapToItem } = this.props;

         if (!this._carouselRef) {
@@ -1080,7 +1081,7 @@ export default class Carousel extends Component {
         onBeforeSnapToItem && onBeforeSnapToItem(index);
     }

-    _onSnap (index) {
+    _onSnap(index) {
         const { onSnapToItem } = this.props;

         if (!this._carouselRef) {
@@ -1091,7 +1092,7 @@ export default class Carousel extends Component {
         onSnapToItem && onSnapToItem(index);
     }

-    startAutoplay () {
+    startAutoplay() {
         const { autoplayInterval, autoplayDelay } = this.props;
         this._autoplay = true;

@@ -1110,19 +1111,19 @@ export default class Carousel extends Component {
         }, autoplayDelay);
     }

-    pauseAutoPlay () {
+    pauseAutoPlay() {
         this._autoplaying = false;
         clearTimeout(this._autoplayTimeout);
         clearTimeout(this._enableAutoplayTimeout);
         clearInterval(this._autoplayInterval);
     }

-    stopAutoplay () {
+    stopAutoplay() {
         this._autoplay = false;
         this.pauseAutoPlay();
     }

-    snapToItem (index, animated = true, fireCallback = true) {
+    snapToItem(index, animated = true, fireCallback = true) {
         if (!index || index < 0) {
             index = 0;
         }
@@ -1136,7 +1137,7 @@ export default class Carousel extends Component {
         this._snapToItem(positionIndex, animated, fireCallback);
     }
…

[VolodymyrBiryuk]

Hi @AndrewDongminYoo, thank you for this quick fix. Fixing the spaces between function names and parentheses was overkill though 😄

[AndrewDongminYoo]

@VolodymyrBiryuk Ah, even the part that the code formatter touched was reflected in the correction... Actually It was my first time leaving an issue on an others package like this...! Youre right It's like overkill. Thank you for Accept and Comment!!

[hotaryuzaki]

i think we just need to change ViewPropTypes import to deprecated-react-native-prop-types

in src/carousel/Carousel.js from this

import { Animated, Easing, FlatList, I18nManager, Platform, ScrollView, View, ViewPropTypes } from 'react-native';

to this

import { Animated, Easing, FlatList, I18nManager, Platform, ScrollView, View } from 'react-native';
import { ViewPropTypes } from 'deprecated-react-native-prop-types';

and i found other files need to change too

• src/pagination/Pagination.js
• src/pagination/PaginationDot.js
• src/parallaximage/ParallaxImage.js