From 04854a0079c84afb4ca28dcda9ca369d99e696d8 Mon Sep 17 00:00:00 2001 From: Higor Leodoro Date: Wed, 20 Dec 2023 00:23:38 -0300 Subject: [PATCH] ViewPropTypes from react-native is deprecated, to remove error warning from react-native, use ViewPropTypes from deprecated-react-native-prop-types --- deprecated-react-native-prop-types.d.ts | 1 + package.json | 3 +- src/carousel/Carousel.js | 197 ++++++++++++------------ src/pagination/Pagination.js | 58 +++---- src/pagination/PaginationDot.js | 25 +-- src/parallaximage/ParallaxImage.js | 49 +++--- 6 files changed, 170 insertions(+), 163 deletions(-) create mode 100644 deprecated-react-native-prop-types.d.ts diff --git a/deprecated-react-native-prop-types.d.ts b/deprecated-react-native-prop-types.d.ts new file mode 100644 index 000000000..56feadd8e --- /dev/null +++ b/deprecated-react-native-prop-types.d.ts @@ -0,0 +1 @@ +declare module "deprecated-react-native-prop-types"; diff --git a/package.json b/package.json index 7304e37ce..0141661f8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-snap-carousel", - "version": "3.9.1", + "version": "3.9.2", "description": "Swiper/carousel component for React Native with previews, multiple layouts, parallax images, performant handling of huge numbers of items, and RTL support. Compatible with Android & iOS.", "main": "src/index.js", "repository": { @@ -46,6 +46,7 @@ }, "devDependencies": { "babel-eslint": "^8.2.2", + "deprecated-react-native-prop-types": "^5.0.0", "eslint": "^4.19.1", "eslint-config-standard": "^10.2.1", "eslint-config-standard-react": "^5.0.0", diff --git a/src/carousel/Carousel.js b/src/carousel/Carousel.js index dae71a3da..90fdd5bf2 100644 --- a/src/carousel/Carousel.js +++ b/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); } - snapToNext (animated = true, fireCallback = true) { + snapToNext(animated = true, fireCallback = true) { const itemsLength = this._getCustomDataLength(); let newIndex = this._activeItem + 1; @@ -1149,7 +1150,7 @@ export default class Carousel extends Component { this._snapToItem(newIndex, animated, fireCallback); } - snapToPrev (animated = true, fireCallback = true) { + snapToPrev(animated = true, fireCallback = true) { const itemsLength = this._getCustomDataLength(); let newIndex = this._activeItem - 1; @@ -1163,7 +1164,7 @@ export default class Carousel extends Component { } // https://github.com/facebook/react-native/issues/1831#issuecomment-231069668 - triggerRenderingHack (offset) { + triggerRenderingHack(offset) { // Avoid messing with user scroll if (Date.now() - this._lastScrollDate < 500) { return; @@ -1178,7 +1179,7 @@ export default class Carousel extends Component { this._scrollTo(scrollPosition + scrollOffset, false); } - _getSlideInterpolatedStyle (index, animatedValue) { + _getSlideInterpolatedStyle(index, animatedValue) { const { layoutCardOffset, slideInterpolatedStyle } = this.props; if (slideInterpolatedStyle) { @@ -1194,7 +1195,7 @@ export default class Carousel extends Component { } } - _renderItem ({ item, index }) { + _renderItem({ item, index }) { const { interpolators } = this.state; const { hasParallaxImages, @@ -1235,12 +1236,12 @@ export default class Carousel extends Component { return ( - { renderItem({ item, index }, parallaxProps) } + {renderItem({ item, index }, parallaxProps)} ); } - _getComponentOverridableProps () { + _getComponentOverridableProps() { const { enableMomentum, itemWidth, @@ -1282,7 +1283,7 @@ export default class Carousel extends Component { }; } - _getComponentStaticProps () { + _getComponentStaticProps() { const { hideCarousel } = this.state; const { containerCustomStyle, @@ -1341,7 +1342,7 @@ export default class Carousel extends Component { }; } - render () { + render() { const { data, renderItem, useScrollView } = this.props; if (!data || !renderItem) { diff --git a/src/pagination/Pagination.js b/src/pagination/Pagination.js index 5c021cf36..a3f3b3952 100644 --- a/src/pagination/Pagination.js +++ b/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'; @@ -45,7 +46,7 @@ export default class Pagination extends PureComponent { delayPressInDot: 0, } - constructor (props) { + constructor(props) { super(props); // Warnings @@ -69,17 +70,17 @@ export default class Pagination extends PureComponent { } } - _needsRTLAdaptations () { + _needsRTLAdaptations() { const { vertical } = this.props; return IS_RTL && !IS_IOS && !vertical; } - get _activeDotIndex () { + get _activeDotIndex() { const { activeDotIndex, dotsLength } = this.props; return this._needsRTLAdaptations() ? dotsLength - activeDotIndex - 1 : activeDotIndex; } - get dots () { + get dots() { const { activeOpacity, carouselRef, @@ -106,20 +107,20 @@ export default class Pagination extends PureComponent { } const DefaultDot = ; const dots = [...Array(dotsLength).keys()].map(i => { @@ -137,7 +138,7 @@ export default class Pagination extends PureComponent { return dots; } - render () { + render() { const { dotsLength, containerStyle, vertical, accessibilityLabel } = this.props; if (!dotsLength || dotsLength < 2) { @@ -146,21 +147,22 @@ export default class Pagination extends PureComponent { const style = [ styles.sliderPagination, - { flexDirection: vertical ? - 'column' : - (this._needsRTLAdaptations() ? 'row-reverse' : 'row') + { + flexDirection: vertical ? + 'column' : + (this._needsRTLAdaptations() ? 'row-reverse' : 'row') }, containerStyle || {} ]; return ( - { this.dots } + {this.dots} ); } diff --git a/src/pagination/PaginationDot.js b/src/pagination/PaginationDot.js index e59d1969f..ed04bc681 100644 --- a/src/pagination/PaginationDot.js +++ b/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'; @@ -20,7 +21,7 @@ export default class PaginationDot extends PureComponent { tappable: PropTypes.bool }; - constructor (props) { + constructor(props) { super(props); this.state = { animColor: new Animated.Value(0), @@ -29,19 +30,19 @@ export default class PaginationDot extends PureComponent { }; } - componentDidMount () { + componentDidMount() { if (this.props.active) { this._animate(1); } } - componentDidUpdate (prevProps) { + componentDidUpdate(prevProps) { if (prevProps.active !== this.props.active) { this._animate(this.props.active ? 1 : 0); } } - _animate (toValue = 0) { + _animate(toValue = 0) { const { animColor, animOpacity, animTransform } = this.state; const { animatedDuration, animatedFriction, animatedTension } = this.props @@ -74,12 +75,12 @@ export default class PaginationDot extends PureComponent { Animated.parallel(animations).start(); } - get _shouldAnimateColor () { + get _shouldAnimateColor() { const { color, inactiveColor } = this.props; return color && inactiveColor; } - render () { + render() { const { animColor, animOpacity, animTransform } = this.state; const { active, @@ -143,11 +144,11 @@ export default class PaginationDot extends PureComponent { return ( diff --git a/src/parallaximage/ParallaxImage.js b/src/parallaximage/ParallaxImage.js index 8bc774a10..0909a01bc 100644 --- a/src/parallaximage/ParallaxImage.js +++ b/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'; @@ -40,7 +41,7 @@ export default class ParallaxImage extends Component { AnimatedImageComponent: Animated.Image } - constructor (props) { + constructor(props) { super(props); this.state = { offset: 0, @@ -54,11 +55,11 @@ export default class ParallaxImage extends Component { this._measureLayout = this._measureLayout.bind(this); } - setNativeProps (nativeProps) { + setNativeProps(nativeProps) { this._container.setNativeProps(nativeProps); } - componentDidMount () { + componentDidMount() { this._mounted = true; setTimeout(() => { @@ -66,11 +67,11 @@ export default class ParallaxImage extends Component { }, 0); } - componentWillUnmount () { + componentWillUnmount() { this._mounted = false; } - _measureLayout () { + _measureLayout() { if (this._container) { const { dimensions, @@ -105,7 +106,7 @@ export default class ParallaxImage extends Component { } } - _onLoad (event) { + _onLoad(event) { const { animOpacity } = this.state; const { fadeDuration, onLoad } = this.props; @@ -131,7 +132,7 @@ export default class ParallaxImage extends Component { } // If arg is missing from method signature, it just won't be called - _onError (event) { + _onError(event) { const { onError } = this.props; this.setState({ status: 4 }); @@ -141,7 +142,7 @@ export default class ParallaxImage extends Component { } } - get image () { + get image() { const { status, animOpacity, offset, width, height } = this.state; const { scrollPosition, @@ -181,41 +182,41 @@ export default class ParallaxImage extends Component { return ( ); } - get spinner () { + get spinner() { const { status } = this.state; const { showSpinner, spinnerColor } = this.props; return status === 1 && showSpinner ? ( ) : false; } - render () { + render() { const { containerStyle } = this.props; return ( { this._container = c; }} - pointerEvents={'none'} - style={[containerStyle, styles.container]} - onLayout={this._measureLayout} + ref={(c) => { this._container = c; }} + pointerEvents={'none'} + style={[containerStyle, styles.container]} + onLayout={this._measureLayout} > - { this.image } - { this.spinner } + {this.image} + {this.spinner} ); }