From 5444327c0db27f97f2ea93a7cbb36ad468d4cbfa Mon Sep 17 00:00:00 2001 From: Stan Bondar Date: Fri, 20 Oct 2023 14:35:38 +0300 Subject: [PATCH 1/6] fixed issue with view proptypes --- package.json | 6 +-- src/carousel/Carousel.js | 61 +++++++++++++++--------------- src/index.js | 3 +- src/pagination/Pagination.js | 3 +- src/pagination/PaginationDot.js | 3 +- src/parallaximage/ParallaxImage.js | 3 +- 6 files changed, 42 insertions(+), 37 deletions(-) diff --git a/package.json b/package.json index 7304e37ce..da525a52c 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,11 @@ { - "name": "react-native-snap-carousel", - "version": "3.9.1", + "name": "react-native-snap-carousel-v5", + "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": { "type": "git", - "url": "github.com/meliorence/react-native-snap-carousel" + "url": "github.com/BoStan42/react-native-snap-carousel-v5" }, "keywords": [ "react", diff --git a/src/carousel/Carousel.js b/src/carousel/Carousel.js index dae71a3da..1c949346b 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 { @@ -263,7 +264,7 @@ export default class Carousel extends Component { } if (this.props.onScroll !== prevProps.onScroll) { - this._setScrollHandler(this.props); + this._setScrollHandler(this.props); } } @@ -291,34 +292,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 +823,7 @@ export default class Carousel extends Component { this._repositionScroll(nextActiveItem); } - if (typeof onScroll === "function" && event) { + if (typeof onScroll === 'function' && event) { onScroll(event); } } @@ -838,7 +839,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 +847,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 +860,7 @@ export default class Carousel extends Component { } if (onTouchEnd) { - onTouchEnd() + onTouchEnd(); } } @@ -1354,7 +1355,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/index.js b/src/index.js index d93725329..d77e28423 100644 --- a/src/index.js +++ b/src/index.js @@ -2,5 +2,6 @@ import Carousel from './carousel/Carousel'; import Pagination from './pagination/Pagination'; import ParallaxImage from './parallaximage/ParallaxImage'; import { getInputRangeFromIndexes } from './utils/animations'; +import * as types from './index'; -export { Carousel as default, Pagination, ParallaxImage, getInputRangeFromIndexes }; +export { Carousel as default, Pagination, ParallaxImage, getInputRangeFromIndexes, types }; diff --git a/src/pagination/Pagination.js b/src/pagination/Pagination.js index 5c021cf36..d300dce8e 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'; diff --git a/src/pagination/PaginationDot.js b/src/pagination/PaginationDot.js index e59d1969f..d2c8dccc3 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'; diff --git a/src/parallaximage/ParallaxImage.js b/src/parallaximage/ParallaxImage.js index 8bc774a10..d6d9de3ba 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'; From a5437dfacafe8fda186c57fabd6ef85947f0452f Mon Sep 17 00:00:00 2001 From: Stan Bondar Date: Fri, 20 Oct 2023 14:36:11 +0300 Subject: [PATCH 2/6] fixed git url --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index da525a52c..89e8444c5 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "main": "src/index.js", "repository": { "type": "git", - "url": "github.com/BoStan42/react-native-snap-carousel-v5" + "url": "github.com/meliorence/react-native-snap-carousel" }, "keywords": [ "react", From 0ba75f843e2594b003ab7cbe4629676ed40e04c2 Mon Sep 17 00:00:00 2001 From: Stan Bondar Date: Fri, 20 Oct 2023 14:36:35 +0300 Subject: [PATCH 3/6] fixed name --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 89e8444c5..8bce459ec 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "react-native-snap-carousel-v5", + "name": "react-native-snap-carousel", "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", From 303a1de94a8b2d932f238b433fec6b68ba2f5e16 Mon Sep 17 00:00:00 2001 From: Stan Bondar Date: Fri, 20 Oct 2023 14:37:33 +0300 Subject: [PATCH 4/6] reverted index --- index.d.ts | 460 +++++++++++++++++++++++++++++++++++++++++++++++++++ src/index.js | 3 +- 2 files changed, 461 insertions(+), 2 deletions(-) create mode 100644 index.d.ts diff --git a/index.d.ts b/index.d.ts new file mode 100644 index 000000000..b7f19b88e --- /dev/null +++ b/index.d.ts @@ -0,0 +1,460 @@ +// Type definitions for react-native-snap-carousel 3.8 +// Project: https://github.com/archriss/react-native-snap-carousel +// Definitions by: jnbt +// Jacob Froman +// Nikolay Polukhin +// Guillaume Amat +// Vitor Luiz Cavalcanti +// Lemon Garrett +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.8 + +import * as React from 'react'; +import { + Animated, + LayoutChangeEvent, + NativeSyntheticEvent, + NativeScrollEvent, + StyleProp, + ScrollViewProps, + ViewStyle, + ImageProps, + FlatListProps +} from 'react-native'; + +export interface AdditionalParallaxProps { + carouselRef?: React.Component> | undefined; + itemHeight?: number | undefined; + itemWidth?: number | undefined; + scrollPosition?: Animated.Value | undefined; + sliderHeight?: number | undefined; + sliderWidth?: number | undefined; + vertical?: boolean | undefined; +} + +export interface CarouselProps { + // Required + + /** + * Array of items to loop over + */ + data: ReadonlyArray; + /** + * Function that takes an item from the `data` array and returns a React + * Element. See `react-native`'s `FlatList` + */ + renderItem(item: { item: T; index: number }, parallaxProps?: AdditionalParallaxProps): React.ReactNode; + /** + * Width in pixels of your slides, must be the same for all of them + * Note: Required with horizontal carousel + */ + /** + * Reverses the direction of scroll. Uses scale transforms of -1. + */ + inverted?: boolean | undefined; + itemWidth?: number | undefined; + /** + * Height in pixels of carousel's items, must be the same for all of them + * Note: Required with vertical carousel + */ + itemHeight?: number | undefined; + /** + * Width in pixels of your slider + * Note: Required with horizontal carousel + */ + sliderWidth?: number | undefined; + /** + * Height in pixels of the carousel itself + * Note: Required with vertical carousel + */ + sliderHeight?: number | undefined; + + // Behavior + + /** + * From slider's center, minimum slide distance to be scrolled before being set to active + */ + activeSlideOffset?: number | undefined; + /** + * Duration of time while component is hidden after mounting. NOTE: May cause rendering + * issues on Android. Defaults to 0 + */ + apparitionDelay?: number | undefined; + /** + * Defines a small margin for callbacks firing from scroll events. Increase this value + * if you experience missed callbacks. Defaults to 5 + */ + callbackOffsetMargin?: number | undefined; + /** + * Since 1.5.0, the snapping effect can now be based on momentum instead of when you're + * releasing your finger. It means that the component will wait until the ScrollView + * isn't moving anymore to snap + */ + enableMomentum?: boolean | undefined; + /** + * If enabled, releasing the touch will scroll to the center of the nearest/active item + */ + enableSnap?: boolean | undefined; + /** + * Index of the first item to display + */ + firstItem?: number | undefined; + /** + * Flag to indicate whether the carousel contains ``. Parallax data + * will not be passed to carousel items if this is false + */ + hasParallaxImages?: boolean | undefined; + /** + * How many items should be rendered at the start? + */ + initialNumToRender?: number | undefined; + /** + * Prevent the user from interacting with the carousel while it is snapping. Ignored + * if `enableMomentum` is `true` + */ + lockScrollWhileSnapping?: boolean | undefined; + /** + * Changes default lock's timeout duration in ms. + */ + lockScrollTimeoutDuration?: number | undefined; + /** + * When momentum is disabled, this prop defines the timeframe during which multiple + * callback calls should be "grouped" into a single one. This debounce also helps + * smoothing the snap effect by providing a bit of inertia when touch is released.. + * Note that this will delay callback's execution. + */ + scrollEndDragDebounceValue?: number | undefined; + /** + * Allow scroll independently of user interaction on carousel. `false` as default. + */ + scrollEnabled?: boolean | undefined; + /** + * Whether to implement a shouldComponentUpdate strategy to minimize updates + */ + shouldOptimizeUpdates?: boolean | undefined; + /** + * Delta x when swiping to trigger the snap + */ + swipeThreshold?: number | undefined; + /** + * Determines whether to use `ScrollView` instead of `FlatList`. May cause + * rendering performance issues due to losing `FlatList`'s performance + * optimizations + */ + useScrollView?: boolean | undefined; + /* + * Layout slides vertically instead of horizontally + */ + vertical?: boolean | undefined; + + // Loop + + /** + * Enable infinite loop mode. Does not work if `enableSnap` is `false` + */ + loop?: boolean | undefined; + /** + * Number of clones to render at the beginning and end of the list. Default + * is 3 + */ + loopClonesPerSide?: number | undefined; + + // Autoplay + + /** + * Trigger autoplay on mount + */ + autoplay?: boolean | undefined; + /** + * Delay before enabling autoplay on startup & after releasing the touch + */ + autoplayDelay?: number | undefined; + /** + * Delay in ms until navigating to the next item + */ + autoplayInterval?: number | undefined; + + // Style and animation + + /** + * Custom animation options. + * Note that useNativeDriver will be enabled by default and that opacity's easing will always be kept linear. + * Setting this prop to something other than null will trigger custom animations and will completely change + * the way items are animated: rather than having their opacity and scale interpolated based the scroll value (default behavior), + * they will now play the custom animation you provide as soon as they become active. + * This means you cannot use props layout, scrollInterpolator or slideInterpolatedStyle in conjunction with activeAnimationOptions + */ + activeAnimationOptions?: Animated.DecayAnimationConfig | Animated.TimingAnimationConfig | Animated.SpringAnimationConfig | undefined; + /** + * Custom animation type: either 'decay, 'spring' or 'timing'. + * Note that it will only be applied to the scale animation since opacity's animation type will always be set + * to timing (no one wants the opacity to 'bounce' around) + */ + activeAnimationType?: 'decay' | 'spring' | 'timing' | undefined; + /** + * Determine active slide's alignment relative to the carousel + */ + activeSlideAlignment?: 'start' | 'center' | 'end' | undefined; + /** + * Optional styles for Scrollview's global wrapper + */ + containerCustomStyle?: StyleProp | undefined; + /** + * Optional styles for Scrollview's items container + */ + contentContainerCustomStyle?: StyleProp | undefined; + /** + * Value of the opacity effect applied to inactive slides + */ + inactiveSlideOpacity?: number | undefined; + /** + * Value of the 'scale' transform applied to inactive slides + */ + inactiveSlideScale?: number | undefined; + /** + * Value of the 'translate' transform applied to inactive slides. Not recommended with + * `customAnimationOptions` + */ + inactiveSlideShift?: number | undefined; + /** + * Define the way items are rendered and animated. + * Possible values are 'default', 'stack' and 'tinder'. + * See this for more info and visual examples. + * WARNING: setting this prop to either 'stack' or 'tinder' will activate useScrollView to prevent rendering bugs with FlatList. + * Therefore, those layouts will probably not be suited if you have a large data set. + */ + layout?: 'default' | 'stack' | 'tinder' | undefined; + /** + * Use to increase or decrease the default card offset in both 'stack' and 'tinder' layouts. + */ + layoutCardOffset?: number | undefined; + /** + * Used to define custom interpolations + */ + scrollInterpolator?(index: number, carouselProps: CarouselProps): { inputRange: number[], outputRange: number[] }; + /** + * Used to define custom interpolations + */ + slideInterpolatedStyle?(index: number, animatedValue: Animated.AnimatedValue, carouselProps: CarouselProps): StyleProp; + /** + * Optional style for each item's container (the one whose scale and opacity are animated) + */ + slideStyle?: StyleProp | undefined; + + // Callbacks + /** + * Exposed View callback; invoked on mount and layout changes + */ + onLayout?(event: LayoutChangeEvent): void; + + /** + * Exposed ScrollView callback; fired while scrolling + */ + onScroll?(event: NativeSyntheticEvent): void; + + /** + * Callback fired when navigating to an item + */ + onSnapToItem?(slideIndex: number): void; + + /** + * Callback fired before navigating to an item + */ + onBeforeSnapToItem?(slideIndex: number): void; +} + +export type CarouselProperties = ScrollViewProps & FlatListProps & CarouselProps; + +export interface ParallaxImageProps extends ImageProps, AdditionalParallaxProps { + /** + * Optional style for image's container + */ + containerStyle?: StyleProp | undefined; + /** + * On screen dimensions of the image + */ + dimensions?: { width: number; height: number } | undefined; + /** + * Duration of fade in when object is loaded. Default of 500 + */ + fadeDuration?: number | undefined; + /** + * Speed of parallax effect. A higher value appears more 'zoomed in' + */ + parallaxFactor?: number | undefined; + /** + * Whether to display a loading spinner + */ + showSpinner?: boolean | undefined; + /** + * Color of the loading spinner if displayed + */ + spinnerColor?: string | undefined; +} + +export type ParallaxImageStatic = React.ComponentClass; + +export type ParallaxImageProperties = ParallaxImageProps & { + children?: React.ReactNode; + ref?: React.LegacyRef | undefined; +}; + +export class ParallaxImage extends React.Component { } + +export interface PaginationProps { + /** + * Length of dot animation (milliseconds) + */ + animatedDuration?: number | undefined; + /** + * Controls "bounciness"/overshoot on dot animation + */ + animatedFriction?: number | undefined; + /** + * Controls speed dot animation + */ + animatedTension?: number | undefined; + /** + * Number of dots to display + */ + dotsLength: number; + /** + * Currently focused dot + */ + activeDotIndex: number; + /** + * Opacity of the dot when tapped. The prop has no effect if tappableDots hasn't been set to true + */ + activeOpacity?: number | undefined; + /** + * Reference to the Carousel component to which pagination is linked. + * Needed only when setting tappableDots to true + */ + carouselRef?: React.Component> | undefined; + /** + * Style for dots' container that will be merged with the default one + */ + containerStyle?: StyleProp | undefined; + /** + * Delay in ms, from the start of the touch, before onPressIn is called on dot + */ + delayPressInDot?: number | undefined; + /** + * Background color of the active dot. + * Use this if you want to animate the change between active and inactive colors, + * and always in conjunction with inactiveDotColor + */ + dotColor?: string | undefined; + /** + * Style of each dot's container. + * Use this if you need to specify styles that wouldn't have any effect when defined with dotStyle (such as flex) + */ + dotContainerStyle?: StyleProp | undefined; + /** + * Optional custom active dot element that will replace the default one. + * The element will receive a prop active set to true as well as a prop index + */ + dotElement?: React.ReactNode | undefined; + /** + * Dots' style that will be merged with the default one + */ + dotStyle?: StyleProp | undefined; + /** + * Background color of the inactive dots. + * Use this if you want to animate the change between active and inactive colors, and always in conjunction with dotColor + */ + inactiveDotColor?: string | undefined; + /** + * Optional custom inactive dot element that will replace the default one. + * The element will receive a prop active set to false as well as a prop index + */ + inactiveDotElement?: React.ReactNode | undefined; + /** + * Value of the opacity effect applied to inactive dots + */ + inactiveDotOpacity?: number | undefined; + /** + * Value of the 'scale' transform applied to inactive dots + */ + inactiveDotScale?: number | undefined; + /** + * Dots' style that will be applied to inactive elements + */ + inactiveDotStyle?: StyleProp | undefined; + /** + * Function that gives you complete control over pagination's rendering. + * It will receive three parameters : (activeIndex, total, context). + * This can be especially useful in order to replace dots with numbers + */ + renderDots?(activeIndex: number, total: number, context: any): React.ReactNode; + /** + * Make default dots tappable, e.g. your carousel will slide to the corresponding item. + * Note that carouselRef must be specified for this to work + */ + tappableDots?: boolean | undefined; + /** + * Whether to layout dots vertically or horizontally + */ + vertical?: boolean | undefined; +} + +export type PaginationStatic = React.ComponentClass; + +export type PaginationProperties = PaginationProps & { + children?: React.ReactNode; + ref?: React.LegacyRef | undefined; +}; + +export class Pagination extends React.Component { } + +export default class Carousel extends React.Component> { + /** + * Current active item (int, starts at 0) + */ + currentIndex: number; + /** + * Underlying ScrollView's current content offset + * (int, starts at 0 if activeSlideAlignment is set to start, negative value otherwise) + */ + currentScrollPosition: number; + /** + * Start the autoplay manually + */ + startAutoplay(instantly?: boolean): void; + /** + * Stop the autoplay manually + */ + stopAutoplay(): void; + /** + * Snap to an item manually + */ + snapToItem(index: number, animated?: boolean, fireCallback?: boolean, initial?: boolean, lockScroll?: boolean): void; + /** + * Snap to next item manually + */ + snapToNext(animated?: boolean, fireCallback?: boolean): void; + /** + * Snap to previous item manually + */ + snapToPrev(animated?: boolean, fireCallback?: boolean): void; + /** + * Call this when needed to work around a random FlatList bug that keeps content hidden until the carousel is scrolled + * (see #238). Note that the offset parameter is not required and will default to either 1 or -1 depending + * on the current scroll position + */ + triggerRenderingHack(offset?: number): void; +} + +/** + * Get scroll interpolator's input range from an array of slide indexes + * Indexes are relative to the current active slide (index 0) + * For example, using [3, 2, 1, 0, -1] will return: + * [ + * (index - 3) * sizeRef, // active + 3 + * (index - 2) * sizeRef, // active + 2 + * (index - 1) * sizeRef, // active + 1 + * index * sizeRef, // active + * (index + 1) * sizeRef // active - 1 + * ] + */ +export function getInputRangeFromIndexes(range: number[], index: number, carouselProps: CarouselProps): number[]; diff --git a/src/index.js b/src/index.js index d77e28423..d93725329 100644 --- a/src/index.js +++ b/src/index.js @@ -2,6 +2,5 @@ import Carousel from './carousel/Carousel'; import Pagination from './pagination/Pagination'; import ParallaxImage from './parallaximage/ParallaxImage'; import { getInputRangeFromIndexes } from './utils/animations'; -import * as types from './index'; -export { Carousel as default, Pagination, ParallaxImage, getInputRangeFromIndexes, types }; +export { Carousel as default, Pagination, ParallaxImage, getInputRangeFromIndexes }; From d93eeea43489e0885113b84df6c771e695ba654c Mon Sep 17 00:00:00 2001 From: Stan Bondar Date: Fri, 20 Oct 2023 14:37:53 +0300 Subject: [PATCH 5/6] fixed --- index.d.ts | 460 ----------------------------------------------------- 1 file changed, 460 deletions(-) delete mode 100644 index.d.ts diff --git a/index.d.ts b/index.d.ts deleted file mode 100644 index b7f19b88e..000000000 --- a/index.d.ts +++ /dev/null @@ -1,460 +0,0 @@ -// Type definitions for react-native-snap-carousel 3.8 -// Project: https://github.com/archriss/react-native-snap-carousel -// Definitions by: jnbt -// Jacob Froman -// Nikolay Polukhin -// Guillaume Amat -// Vitor Luiz Cavalcanti -// Lemon Garrett -// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 2.8 - -import * as React from 'react'; -import { - Animated, - LayoutChangeEvent, - NativeSyntheticEvent, - NativeScrollEvent, - StyleProp, - ScrollViewProps, - ViewStyle, - ImageProps, - FlatListProps -} from 'react-native'; - -export interface AdditionalParallaxProps { - carouselRef?: React.Component> | undefined; - itemHeight?: number | undefined; - itemWidth?: number | undefined; - scrollPosition?: Animated.Value | undefined; - sliderHeight?: number | undefined; - sliderWidth?: number | undefined; - vertical?: boolean | undefined; -} - -export interface CarouselProps { - // Required - - /** - * Array of items to loop over - */ - data: ReadonlyArray; - /** - * Function that takes an item from the `data` array and returns a React - * Element. See `react-native`'s `FlatList` - */ - renderItem(item: { item: T; index: number }, parallaxProps?: AdditionalParallaxProps): React.ReactNode; - /** - * Width in pixels of your slides, must be the same for all of them - * Note: Required with horizontal carousel - */ - /** - * Reverses the direction of scroll. Uses scale transforms of -1. - */ - inverted?: boolean | undefined; - itemWidth?: number | undefined; - /** - * Height in pixels of carousel's items, must be the same for all of them - * Note: Required with vertical carousel - */ - itemHeight?: number | undefined; - /** - * Width in pixels of your slider - * Note: Required with horizontal carousel - */ - sliderWidth?: number | undefined; - /** - * Height in pixels of the carousel itself - * Note: Required with vertical carousel - */ - sliderHeight?: number | undefined; - - // Behavior - - /** - * From slider's center, minimum slide distance to be scrolled before being set to active - */ - activeSlideOffset?: number | undefined; - /** - * Duration of time while component is hidden after mounting. NOTE: May cause rendering - * issues on Android. Defaults to 0 - */ - apparitionDelay?: number | undefined; - /** - * Defines a small margin for callbacks firing from scroll events. Increase this value - * if you experience missed callbacks. Defaults to 5 - */ - callbackOffsetMargin?: number | undefined; - /** - * Since 1.5.0, the snapping effect can now be based on momentum instead of when you're - * releasing your finger. It means that the component will wait until the ScrollView - * isn't moving anymore to snap - */ - enableMomentum?: boolean | undefined; - /** - * If enabled, releasing the touch will scroll to the center of the nearest/active item - */ - enableSnap?: boolean | undefined; - /** - * Index of the first item to display - */ - firstItem?: number | undefined; - /** - * Flag to indicate whether the carousel contains ``. Parallax data - * will not be passed to carousel items if this is false - */ - hasParallaxImages?: boolean | undefined; - /** - * How many items should be rendered at the start? - */ - initialNumToRender?: number | undefined; - /** - * Prevent the user from interacting with the carousel while it is snapping. Ignored - * if `enableMomentum` is `true` - */ - lockScrollWhileSnapping?: boolean | undefined; - /** - * Changes default lock's timeout duration in ms. - */ - lockScrollTimeoutDuration?: number | undefined; - /** - * When momentum is disabled, this prop defines the timeframe during which multiple - * callback calls should be "grouped" into a single one. This debounce also helps - * smoothing the snap effect by providing a bit of inertia when touch is released.. - * Note that this will delay callback's execution. - */ - scrollEndDragDebounceValue?: number | undefined; - /** - * Allow scroll independently of user interaction on carousel. `false` as default. - */ - scrollEnabled?: boolean | undefined; - /** - * Whether to implement a shouldComponentUpdate strategy to minimize updates - */ - shouldOptimizeUpdates?: boolean | undefined; - /** - * Delta x when swiping to trigger the snap - */ - swipeThreshold?: number | undefined; - /** - * Determines whether to use `ScrollView` instead of `FlatList`. May cause - * rendering performance issues due to losing `FlatList`'s performance - * optimizations - */ - useScrollView?: boolean | undefined; - /* - * Layout slides vertically instead of horizontally - */ - vertical?: boolean | undefined; - - // Loop - - /** - * Enable infinite loop mode. Does not work if `enableSnap` is `false` - */ - loop?: boolean | undefined; - /** - * Number of clones to render at the beginning and end of the list. Default - * is 3 - */ - loopClonesPerSide?: number | undefined; - - // Autoplay - - /** - * Trigger autoplay on mount - */ - autoplay?: boolean | undefined; - /** - * Delay before enabling autoplay on startup & after releasing the touch - */ - autoplayDelay?: number | undefined; - /** - * Delay in ms until navigating to the next item - */ - autoplayInterval?: number | undefined; - - // Style and animation - - /** - * Custom animation options. - * Note that useNativeDriver will be enabled by default and that opacity's easing will always be kept linear. - * Setting this prop to something other than null will trigger custom animations and will completely change - * the way items are animated: rather than having their opacity and scale interpolated based the scroll value (default behavior), - * they will now play the custom animation you provide as soon as they become active. - * This means you cannot use props layout, scrollInterpolator or slideInterpolatedStyle in conjunction with activeAnimationOptions - */ - activeAnimationOptions?: Animated.DecayAnimationConfig | Animated.TimingAnimationConfig | Animated.SpringAnimationConfig | undefined; - /** - * Custom animation type: either 'decay, 'spring' or 'timing'. - * Note that it will only be applied to the scale animation since opacity's animation type will always be set - * to timing (no one wants the opacity to 'bounce' around) - */ - activeAnimationType?: 'decay' | 'spring' | 'timing' | undefined; - /** - * Determine active slide's alignment relative to the carousel - */ - activeSlideAlignment?: 'start' | 'center' | 'end' | undefined; - /** - * Optional styles for Scrollview's global wrapper - */ - containerCustomStyle?: StyleProp | undefined; - /** - * Optional styles for Scrollview's items container - */ - contentContainerCustomStyle?: StyleProp | undefined; - /** - * Value of the opacity effect applied to inactive slides - */ - inactiveSlideOpacity?: number | undefined; - /** - * Value of the 'scale' transform applied to inactive slides - */ - inactiveSlideScale?: number | undefined; - /** - * Value of the 'translate' transform applied to inactive slides. Not recommended with - * `customAnimationOptions` - */ - inactiveSlideShift?: number | undefined; - /** - * Define the way items are rendered and animated. - * Possible values are 'default', 'stack' and 'tinder'. - * See this for more info and visual examples. - * WARNING: setting this prop to either 'stack' or 'tinder' will activate useScrollView to prevent rendering bugs with FlatList. - * Therefore, those layouts will probably not be suited if you have a large data set. - */ - layout?: 'default' | 'stack' | 'tinder' | undefined; - /** - * Use to increase or decrease the default card offset in both 'stack' and 'tinder' layouts. - */ - layoutCardOffset?: number | undefined; - /** - * Used to define custom interpolations - */ - scrollInterpolator?(index: number, carouselProps: CarouselProps): { inputRange: number[], outputRange: number[] }; - /** - * Used to define custom interpolations - */ - slideInterpolatedStyle?(index: number, animatedValue: Animated.AnimatedValue, carouselProps: CarouselProps): StyleProp; - /** - * Optional style for each item's container (the one whose scale and opacity are animated) - */ - slideStyle?: StyleProp | undefined; - - // Callbacks - /** - * Exposed View callback; invoked on mount and layout changes - */ - onLayout?(event: LayoutChangeEvent): void; - - /** - * Exposed ScrollView callback; fired while scrolling - */ - onScroll?(event: NativeSyntheticEvent): void; - - /** - * Callback fired when navigating to an item - */ - onSnapToItem?(slideIndex: number): void; - - /** - * Callback fired before navigating to an item - */ - onBeforeSnapToItem?(slideIndex: number): void; -} - -export type CarouselProperties = ScrollViewProps & FlatListProps & CarouselProps; - -export interface ParallaxImageProps extends ImageProps, AdditionalParallaxProps { - /** - * Optional style for image's container - */ - containerStyle?: StyleProp | undefined; - /** - * On screen dimensions of the image - */ - dimensions?: { width: number; height: number } | undefined; - /** - * Duration of fade in when object is loaded. Default of 500 - */ - fadeDuration?: number | undefined; - /** - * Speed of parallax effect. A higher value appears more 'zoomed in' - */ - parallaxFactor?: number | undefined; - /** - * Whether to display a loading spinner - */ - showSpinner?: boolean | undefined; - /** - * Color of the loading spinner if displayed - */ - spinnerColor?: string | undefined; -} - -export type ParallaxImageStatic = React.ComponentClass; - -export type ParallaxImageProperties = ParallaxImageProps & { - children?: React.ReactNode; - ref?: React.LegacyRef | undefined; -}; - -export class ParallaxImage extends React.Component { } - -export interface PaginationProps { - /** - * Length of dot animation (milliseconds) - */ - animatedDuration?: number | undefined; - /** - * Controls "bounciness"/overshoot on dot animation - */ - animatedFriction?: number | undefined; - /** - * Controls speed dot animation - */ - animatedTension?: number | undefined; - /** - * Number of dots to display - */ - dotsLength: number; - /** - * Currently focused dot - */ - activeDotIndex: number; - /** - * Opacity of the dot when tapped. The prop has no effect if tappableDots hasn't been set to true - */ - activeOpacity?: number | undefined; - /** - * Reference to the Carousel component to which pagination is linked. - * Needed only when setting tappableDots to true - */ - carouselRef?: React.Component> | undefined; - /** - * Style for dots' container that will be merged with the default one - */ - containerStyle?: StyleProp | undefined; - /** - * Delay in ms, from the start of the touch, before onPressIn is called on dot - */ - delayPressInDot?: number | undefined; - /** - * Background color of the active dot. - * Use this if you want to animate the change between active and inactive colors, - * and always in conjunction with inactiveDotColor - */ - dotColor?: string | undefined; - /** - * Style of each dot's container. - * Use this if you need to specify styles that wouldn't have any effect when defined with dotStyle (such as flex) - */ - dotContainerStyle?: StyleProp | undefined; - /** - * Optional custom active dot element that will replace the default one. - * The element will receive a prop active set to true as well as a prop index - */ - dotElement?: React.ReactNode | undefined; - /** - * Dots' style that will be merged with the default one - */ - dotStyle?: StyleProp | undefined; - /** - * Background color of the inactive dots. - * Use this if you want to animate the change between active and inactive colors, and always in conjunction with dotColor - */ - inactiveDotColor?: string | undefined; - /** - * Optional custom inactive dot element that will replace the default one. - * The element will receive a prop active set to false as well as a prop index - */ - inactiveDotElement?: React.ReactNode | undefined; - /** - * Value of the opacity effect applied to inactive dots - */ - inactiveDotOpacity?: number | undefined; - /** - * Value of the 'scale' transform applied to inactive dots - */ - inactiveDotScale?: number | undefined; - /** - * Dots' style that will be applied to inactive elements - */ - inactiveDotStyle?: StyleProp | undefined; - /** - * Function that gives you complete control over pagination's rendering. - * It will receive three parameters : (activeIndex, total, context). - * This can be especially useful in order to replace dots with numbers - */ - renderDots?(activeIndex: number, total: number, context: any): React.ReactNode; - /** - * Make default dots tappable, e.g. your carousel will slide to the corresponding item. - * Note that carouselRef must be specified for this to work - */ - tappableDots?: boolean | undefined; - /** - * Whether to layout dots vertically or horizontally - */ - vertical?: boolean | undefined; -} - -export type PaginationStatic = React.ComponentClass; - -export type PaginationProperties = PaginationProps & { - children?: React.ReactNode; - ref?: React.LegacyRef | undefined; -}; - -export class Pagination extends React.Component { } - -export default class Carousel extends React.Component> { - /** - * Current active item (int, starts at 0) - */ - currentIndex: number; - /** - * Underlying ScrollView's current content offset - * (int, starts at 0 if activeSlideAlignment is set to start, negative value otherwise) - */ - currentScrollPosition: number; - /** - * Start the autoplay manually - */ - startAutoplay(instantly?: boolean): void; - /** - * Stop the autoplay manually - */ - stopAutoplay(): void; - /** - * Snap to an item manually - */ - snapToItem(index: number, animated?: boolean, fireCallback?: boolean, initial?: boolean, lockScroll?: boolean): void; - /** - * Snap to next item manually - */ - snapToNext(animated?: boolean, fireCallback?: boolean): void; - /** - * Snap to previous item manually - */ - snapToPrev(animated?: boolean, fireCallback?: boolean): void; - /** - * Call this when needed to work around a random FlatList bug that keeps content hidden until the carousel is scrolled - * (see #238). Note that the offset parameter is not required and will default to either 1 or -1 depending - * on the current scroll position - */ - triggerRenderingHack(offset?: number): void; -} - -/** - * Get scroll interpolator's input range from an array of slide indexes - * Indexes are relative to the current active slide (index 0) - * For example, using [3, 2, 1, 0, -1] will return: - * [ - * (index - 3) * sizeRef, // active + 3 - * (index - 2) * sizeRef, // active + 2 - * (index - 1) * sizeRef, // active + 1 - * index * sizeRef, // active - * (index + 1) * sizeRef // active - 1 - * ] - */ -export function getInputRangeFromIndexes(range: number[], index: number, carouselProps: CarouselProps): number[]; From 22ac0f7cfc8ba521a2b6df3174a55548b953c312 Mon Sep 17 00:00:00 2001 From: Stan Bondar Date: Fri, 20 Oct 2023 14:40:03 +0300 Subject: [PATCH 6/6] added deprecated-react-native-prop-types --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 8bce459ec..9eb9e73c5 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": "^5.0.0", "prop-types": "^15.6.1", "react-addons-shallow-compare": "15.6.2" },