From d542bebc2ffd97e5372a268cf41d8ad5a626ea48 Mon Sep 17 00:00:00 2001 From: Rameez Joya Date: Wed, 7 Sep 2022 11:56:35 -0400 Subject: [PATCH 1/2] fix: deprecated ViewPropTypes --- .vscode/settings.json | 30 +++++++++++++ package.json | 1 + src/carousel/Carousel.js | 72 ++++++++++++++---------------- src/pagination/Pagination.js | 13 +++--- src/pagination/PaginationDot.js | 7 +-- src/parallaximage/ParallaxImage.js | 5 ++- 6 files changed, 79 insertions(+), 49 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..bd7cebe5 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,30 @@ +{ + "workbench.colorCustomizations": { + "activityBarBadge.background": "#616161", + "activityBar.activeBorder": "#616161", + "list.activeSelectionForeground": "#616161", + "list.inactiveSelectionForeground": "#616161", + "list.highlightForeground": "#616161", + "scrollbarSlider.activeBackground": "#61616150", + "editorSuggestWidget.highlightForeground": "#616161", + "textLink.foreground": "#616161", + "progressBar.background": "#616161", + "pickerGroup.foreground": "#616161", + "tab.activeBorder": "#616161", + "notificationLink.foreground": "#616161", + "editorWidget.resizeBorder": "#616161", + "editorWidget.border": "#616161", + "settings.modifiedItemIndicator": "#616161", + "settings.headerForeground": "#616161", + "panelTitle.activeBorder": "#616161", + "breadcrumb.activeSelectionForeground": "#616161", + "menu.selectionForeground": "#616161", + "menubar.selectionForeground": "#616161", + "editor.findMatchBorder": "#616161", + "selection.background": "#61616140", + "statusBarItem.remoteBackground": "#616161", + "activityBar.background": "#08360B", + "titleBar.activeBackground": "#0B4B0F", + "titleBar.activeForeground": "#F3FDF4" + } +} \ No newline at end of file diff --git a/package.json b/package.json index 7304e37c..e1141b07 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "author": "Meliorence (github.com/meliorence)", "license": "BSD-3-Clause", "dependencies": { + "deprecated-react-native-prop-types": "^2.3.0", "prop-types": "^15.6.1", "react-addons-shallow-compare": "15.6.2" }, diff --git a/src/carousel/Carousel.js b/src/carousel/Carousel.js index dae71a3d..aac95988 100644 --- a/src/carousel/Carousel.js +++ b/src/carousel/Carousel.js @@ -1,15 +1,11 @@ -import React, { Component } from 'react'; -import { Animated, Easing, FlatList, I18nManager, Platform, ScrollView, View, ViewPropTypes } from 'react-native'; +import { ViewPropTypes } from 'deprecated-react-native-prop-types'; import PropTypes from 'prop-types'; +import React, { Component } from 'react'; import shallowCompare from 'react-addons-shallow-compare'; +import { Animated, Easing, FlatList, I18nManager, Platform, ScrollView, View } from 'react-native'; import { - defaultScrollInterpolator, - stackScrollInterpolator, - tinderScrollInterpolator, - defaultAnimatedStyles, - shiftAnimatedStyles, - stackAnimatedStyles, - tinderAnimatedStyles + defaultAnimatedStyles, defaultScrollInterpolator, shiftAnimatedStyles, + stackAnimatedStyles, stackScrollInterpolator, tinderAnimatedStyles, tinderScrollInterpolator } from '../utils/animations'; const IS_IOS = Platform.OS === 'ios'; @@ -263,7 +259,7 @@ export default class Carousel extends Component { } if (this.props.onScroll !== prevProps.onScroll) { - this._setScrollHandler(this.props); + this._setScrollHandler(this.props); } } @@ -291,34 +287,34 @@ export default class Carousel extends Component { 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 } } }]; + _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)) { + 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 = + 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); } - argMapping.push(...props.onScroll._argMapping); - } - this._onScrollHandler = Animated.event( - argMapping, - scrollEventConfig - ); + this._onScrollHandler = Animated.event( + argMapping, + scrollEventConfig + ); } _needsScrollView () { @@ -822,7 +818,7 @@ export default class Carousel extends Component { this._repositionScroll(nextActiveItem); } - if (typeof onScroll === "function" && event) { + if (typeof onScroll === 'function' && event) { onScroll(event); } } @@ -838,7 +834,7 @@ export default class Carousel extends Component { } _onTouchStart () { - const { onTouchStart } = this.props + const { onTouchStart } = this.props; // `onTouchStart` is fired even when `scrollEnabled` is set to `false` if (this._getScrollEnabled() !== false && this._autoplaying) { @@ -846,12 +842,12 @@ export default class Carousel extends Component { } if (onTouchStart) { - onTouchStart() + onTouchStart(); } } _onTouchEnd () { - const { onTouchEnd } = this.props + const { onTouchEnd } = this.props; if (this._getScrollEnabled() !== false && this._autoplay && !this._autoplaying) { // This event is buggy on Android, so a fallback is provided in _onScrollEnd() @@ -859,7 +855,7 @@ export default class Carousel extends Component { } if (onTouchEnd) { - onTouchEnd() + onTouchEnd(); } } @@ -1354,7 +1350,7 @@ export default class Carousel extends Component { ...this._getComponentStaticProps() }; - const ScrollViewComponent = typeof useScrollView === 'function' ? useScrollView : AnimatedScrollView + const ScrollViewComponent = typeof useScrollView === 'function' ? useScrollView : AnimatedScrollView; return this._needsScrollView() ? ( diff --git a/src/pagination/Pagination.js b/src/pagination/Pagination.js index 5c021cf3..8005ebf3 100644 --- a/src/pagination/Pagination.js +++ b/src/pagination/Pagination.js @@ -1,8 +1,9 @@ -import React, { PureComponent } from 'react'; -import { I18nManager, Platform, View, ViewPropTypes } from 'react-native'; +import { ViewPropTypes } from 'deprecated-react-native-prop-types'; import PropTypes from 'prop-types'; -import PaginationDot from './PaginationDot'; +import React, { PureComponent } from 'react'; +import { I18nManager, Platform, View } from 'react-native'; import styles from './Pagination.style'; +import PaginationDot from './PaginationDot'; const IS_IOS = Platform.OS === 'ios'; const IS_RTL = I18nManager.isRTL; @@ -31,7 +32,7 @@ export default class Pagination extends PureComponent { animatedDuration: PropTypes.number, animatedFriction: PropTypes.number, animatedTension: PropTypes.number, - delayPressInDot: PropTypes.number, + delayPressInDot: PropTypes.number }; static defaultProps = { @@ -42,7 +43,7 @@ export default class Pagination extends PureComponent { animatedDuration: 250, animatedFriction: 4, animatedTension: 50, - delayPressInDot: 0, + delayPressInDot: 0 } constructor (props) { @@ -98,7 +99,7 @@ export default class Pagination extends PureComponent { animatedDuration, animatedFriction, animatedTension, - delayPressInDot, + delayPressInDot } = this.props; if (renderDots) { diff --git a/src/pagination/PaginationDot.js b/src/pagination/PaginationDot.js index e59d1969..5b4a09de 100644 --- a/src/pagination/PaginationDot.js +++ b/src/pagination/PaginationDot.js @@ -1,6 +1,7 @@ -import React, { PureComponent } from 'react'; -import { View, Animated, Easing, TouchableOpacity, ViewPropTypes } from 'react-native'; +import { ViewPropTypes } from 'deprecated-react-native-prop-types'; import PropTypes from 'prop-types'; +import React, { PureComponent } from 'react'; +import { Animated, Easing, TouchableOpacity, View } from 'react-native'; import styles from './Pagination.style'; export default class PaginationDot extends PureComponent { @@ -43,7 +44,7 @@ export default class PaginationDot extends PureComponent { _animate (toValue = 0) { const { animColor, animOpacity, animTransform } = this.state; - const { animatedDuration, animatedFriction, animatedTension } = this.props + const { animatedDuration, animatedFriction, animatedTension } = this.props; const commonProperties = { toValue, diff --git a/src/parallaximage/ParallaxImage.js b/src/parallaximage/ParallaxImage.js index 8bc774a1..77a18ffd 100644 --- a/src/parallaximage/ParallaxImage.js +++ b/src/parallaximage/ParallaxImage.js @@ -1,8 +1,9 @@ // 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 { ViewPropTypes } from 'deprecated-react-native-prop-types'; import PropTypes from 'prop-types'; +import React, { Component } from 'react'; +import { ActivityIndicator, Animated, Easing, findNodeHandle, Image, View } from 'react-native'; import styles from './ParallaxImage.style'; export default class ParallaxImage extends Component { From b8e0f441210de62e786b3ab4b5a42bece8328c36 Mon Sep 17 00:00:00 2001 From: Rameez Joya Date: Wed, 7 Sep 2022 11:58:54 -0400 Subject: [PATCH 2/2] chore: removed vscode settings --- .vscode/settings.json | 30 ------------------------------ 1 file changed, 30 deletions(-) delete mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index bd7cebe5..00000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,30 +0,0 @@ -{ - "workbench.colorCustomizations": { - "activityBarBadge.background": "#616161", - "activityBar.activeBorder": "#616161", - "list.activeSelectionForeground": "#616161", - "list.inactiveSelectionForeground": "#616161", - "list.highlightForeground": "#616161", - "scrollbarSlider.activeBackground": "#61616150", - "editorSuggestWidget.highlightForeground": "#616161", - "textLink.foreground": "#616161", - "progressBar.background": "#616161", - "pickerGroup.foreground": "#616161", - "tab.activeBorder": "#616161", - "notificationLink.foreground": "#616161", - "editorWidget.resizeBorder": "#616161", - "editorWidget.border": "#616161", - "settings.modifiedItemIndicator": "#616161", - "settings.headerForeground": "#616161", - "panelTitle.activeBorder": "#616161", - "breadcrumb.activeSelectionForeground": "#616161", - "menu.selectionForeground": "#616161", - "menubar.selectionForeground": "#616161", - "editor.findMatchBorder": "#616161", - "selection.background": "#61616140", - "statusBarItem.remoteBackground": "#616161", - "activityBar.background": "#08360B", - "titleBar.activeBackground": "#0B4B0F", - "titleBar.activeForeground": "#F3FDF4" - } -} \ No newline at end of file