react-native-reanimated-carousel 2.3.0 → 2.3.2-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/README.md +8 -0
  2. package/lib/commonjs/Carousel.js +1 -1
  3. package/lib/commonjs/Carousel.js.map +1 -1
  4. package/lib/commonjs/ScrollViewGesture.js +1 -1
  5. package/lib/commonjs/ScrollViewGesture.js.map +1 -1
  6. package/lib/commonjs/constants/index.js.map +1 -1
  7. package/lib/commonjs/hooks/useCarouselController.js.map +1 -1
  8. package/lib/commonjs/hooks/useCheckMounted.js +2 -0
  9. package/lib/commonjs/hooks/useCheckMounted.js.map +1 -0
  10. package/lib/commonjs/hooks/useInitProps.js +1 -1
  11. package/lib/commonjs/hooks/useInitProps.js.map +1 -1
  12. package/lib/commonjs/layouts/BaseLayout.js +1 -1
  13. package/lib/commonjs/layouts/BaseLayout.js.map +1 -1
  14. package/lib/commonjs/layouts/ParallaxLayout.js +1 -1
  15. package/lib/commonjs/layouts/ParallaxLayout.js.map +1 -1
  16. package/lib/commonjs/layouts/parallax.js +1 -1
  17. package/lib/commonjs/layouts/parallax.js.map +1 -1
  18. package/lib/commonjs/layouts/stack.js +1 -1
  19. package/lib/commonjs/layouts/stack.js.map +1 -1
  20. package/lib/module/Carousel.js +10 -7
  21. package/lib/module/Carousel.js.map +1 -1
  22. package/lib/module/ScrollViewGesture.js +6 -1
  23. package/lib/module/ScrollViewGesture.js.map +1 -1
  24. package/lib/module/constants/index.js.map +1 -1
  25. package/lib/module/hooks/useCarouselController.js +8 -4
  26. package/lib/module/hooks/useCarouselController.js.map +1 -1
  27. package/lib/module/hooks/useCheckMounted.js +12 -0
  28. package/lib/module/hooks/useCheckMounted.js.map +1 -0
  29. package/lib/module/layouts/BaseLayout.js +4 -2
  30. package/lib/module/layouts/BaseLayout.js.map +1 -1
  31. package/lib/module/layouts/ParallaxLayout.js +2 -1
  32. package/lib/module/layouts/ParallaxLayout.js.map +1 -1
  33. package/lib/module/layouts/parallax.js +5 -3
  34. package/lib/module/layouts/parallax.js.map +1 -1
  35. package/lib/module/layouts/stack.js +7 -3
  36. package/lib/module/layouts/stack.js.map +1 -1
  37. package/lib/module/utils/log.js +2 -2
  38. package/lib/module/utils/log.js.map +1 -1
  39. package/lib/typescript/constants/index.d.ts +2 -1
  40. package/lib/typescript/hooks/useCheckMounted.d.ts +2 -0
  41. package/lib/typescript/layouts/ParallaxLayout.d.ts +2 -3
  42. package/lib/typescript/layouts/parallax.d.ts +8 -3
  43. package/lib/typescript/types.d.ts +4 -2
  44. package/package.json +4 -2
  45. package/src/ScrollViewGesture.tsx +8 -3
  46. package/src/constants/index.ts +7 -2
  47. package/src/hooks/useCarouselController.tsx +2 -2
  48. package/src/hooks/useCheckMounted.ts +14 -0
  49. package/src/layouts/BaseLayout.tsx +8 -5
  50. package/src/layouts/ParallaxLayout.tsx +13 -11
  51. package/src/layouts/parallax.ts +15 -7
  52. package/src/types.ts +11 -9
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["useCheckMounted.ts"],"names":["React","useCheckMounted","mounted","useRef","useEffect","current"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAO,SAASC,eAAT,GAA2B;AAC9B,QAAMC,OAAO,GAAGF,KAAK,CAACG,MAAN,CAAa,KAAb,CAAhB;AAEAH,EAAAA,KAAK,CAACI,SAAN,CAAgB,MAAM;AAClBF,IAAAA,OAAO,CAACG,OAAR,GAAkB,IAAlB;AACA,WAAO,MAAM;AACTH,MAAAA,OAAO,CAACG,OAAR,GAAkB,KAAlB;AACH,KAFD;AAGH,GALD,EAKG,EALH;AAOA,SAAOH,OAAP;AACH","sourcesContent":["import React from 'react';\n\nexport function useCheckMounted() {\n const mounted = React.useRef(false);\n\n React.useEffect(() => {\n mounted.current = true;\n return () => {\n mounted.current = false;\n };\n }, []);\n\n return mounted;\n}\n"]}
@@ -1,9 +1,11 @@
1
1
  import React from 'react';
2
2
  import Animated, { runOnJS, useAnimatedReaction, useAnimatedStyle, useDerivedValue } from 'react-native-reanimated';
3
+ import { useCheckMounted } from 'src/hooks/useCheckMounted';
3
4
  import { useOffsetX } from '../hooks/useOffsetX';
4
5
  import { LazyView } from '../LazyView';
5
6
  import { CTX } from '../store';
6
7
  export const BaseLayout = props => {
8
+ const mounted = useCheckMounted();
7
9
  const {
8
10
  handlerOffsetX,
9
11
  index,
@@ -56,8 +58,8 @@ export const BaseLayout = props => {
56
58
  const animatedStyle = useAnimatedStyle( // @ts-ignore
57
59
  () => animationStyle(x.value / size), [animationStyle]);
58
60
  const updateView = React.useCallback((negativeRange, positiveRange) => {
59
- setShouldUpdate(index >= negativeRange[0] && index <= negativeRange[1] || index >= positiveRange[0] && index <= positiveRange[1]);
60
- }, [index]);
61
+ mounted.current && setShouldUpdate(index >= negativeRange[0] && index <= negativeRange[1] || index >= positiveRange[0] && index <= positiveRange[1]);
62
+ }, [index, mounted]);
61
63
  useAnimatedReaction(() => visibleRanges.value, () => {
62
64
  runOnJS(updateView)(visibleRanges.value.negativeRange, visibleRanges.value.positiveRange);
63
65
  }, [visibleRanges.value]);
@@ -1 +1 @@
1
- {"version":3,"sources":["BaseLayout.tsx"],"names":["React","Animated","runOnJS","useAnimatedReaction","useAnimatedStyle","useDerivedValue","useOffsetX","LazyView","CTX","BaseLayout","props","handlerOffsetX","index","children","visibleRanges","animationStyle","context","useContext","loop","data","width","height","vertical","customConfig","mode","modeConfig","size","shouldUpdate","setShouldUpdate","useState","offsetXConfig","snapDirection","showLength","type","viewCount","x","animationValue","value","animatedStyle","updateView","useCallback","negativeRange","positiveRange","position"],"mappings":"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","sourcesContent":["import React from 'react';\nimport type { ViewStyle } from 'react-native';\nimport Animated, {\n AnimatedStyleProp,\n runOnJS,\n useAnimatedReaction,\n useAnimatedStyle,\n useDerivedValue,\n} from 'react-native-reanimated';\nimport { IOpts, useOffsetX } from '../hooks/useOffsetX';\nimport type { IVisibleRanges } from '../hooks/useVisibleRanges';\nimport { LazyView } from '../LazyView';\nimport { CTX } from '../store';\nimport type { ILayoutConfig } from './stack';\n\nexport type TAnimationStyle = (value: number) => AnimatedStyleProp<ViewStyle>;\n\nexport const BaseLayout: React.FC<{\n index: number;\n handlerOffsetX: Animated.SharedValue<number>;\n visibleRanges: IVisibleRanges;\n animationStyle: TAnimationStyle;\n children: (ctx: {\n animationValue: Animated.SharedValue<number>;\n }) => React.ReactElement;\n}> = (props) => {\n const { handlerOffsetX, index, children, visibleRanges, animationStyle } =\n props;\n\n const context = React.useContext(CTX);\n const {\n props: {\n loop,\n data,\n width,\n height,\n vertical,\n customConfig,\n mode,\n modeConfig,\n },\n } = context;\n const size = vertical ? height : width;\n const [shouldUpdate, setShouldUpdate] = React.useState(false);\n let offsetXConfig: IOpts = {\n handlerOffsetX,\n index,\n size,\n data,\n loop,\n ...(typeof customConfig === 'function' ? customConfig() : {}),\n };\n\n if (mode === 'horizontal-stack') {\n const { snapDirection, showLength } = modeConfig as ILayoutConfig;\n\n offsetXConfig = {\n handlerOffsetX,\n index,\n size,\n data,\n loop,\n type: snapDirection === 'right' ? 'negative' : 'positive',\n viewCount: showLength,\n };\n }\n\n const x = useOffsetX(offsetXConfig, visibleRanges);\n const animationValue = useDerivedValue(() => x.value / size, [x, size]);\n const animatedStyle = useAnimatedStyle(\n // @ts-ignore\n () => animationStyle(x.value / size),\n [animationStyle]\n );\n\n const updateView = React.useCallback(\n (negativeRange: number[], positiveRange: number[]) => {\n setShouldUpdate(\n (index >= negativeRange[0] && index <= negativeRange[1]) ||\n (index >= positiveRange[0] && index <= positiveRange[1])\n );\n },\n [index]\n );\n\n useAnimatedReaction(\n () => visibleRanges.value,\n () => {\n runOnJS(updateView)(\n visibleRanges.value.negativeRange,\n visibleRanges.value.positiveRange\n );\n },\n [visibleRanges.value]\n );\n\n return (\n <Animated.View\n style={[\n {\n width: width || '100%',\n height: height || '100%',\n position: 'absolute',\n },\n animatedStyle,\n ]}\n >\n <LazyView shouldUpdate={shouldUpdate}>\n {children({ animationValue })}\n </LazyView>\n </Animated.View>\n );\n};\n"]}
1
+ {"version":3,"sources":["BaseLayout.tsx"],"names":["React","Animated","runOnJS","useAnimatedReaction","useAnimatedStyle","useDerivedValue","useCheckMounted","useOffsetX","LazyView","CTX","BaseLayout","props","mounted","handlerOffsetX","index","children","visibleRanges","animationStyle","context","useContext","loop","data","width","height","vertical","customConfig","mode","modeConfig","size","shouldUpdate","setShouldUpdate","useState","offsetXConfig","snapDirection","showLength","type","viewCount","x","animationValue","value","animatedStyle","updateView","useCallback","negativeRange","positiveRange","current","position"],"mappings":"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","sourcesContent":["import React from 'react';\nimport type { ViewStyle } from 'react-native';\nimport Animated, {\n AnimatedStyleProp,\n runOnJS,\n useAnimatedReaction,\n useAnimatedStyle,\n useDerivedValue,\n} from 'react-native-reanimated';\nimport { useCheckMounted } from 'src/hooks/useCheckMounted';\nimport { IOpts, useOffsetX } from '../hooks/useOffsetX';\nimport type { IVisibleRanges } from '../hooks/useVisibleRanges';\nimport { LazyView } from '../LazyView';\nimport { CTX } from '../store';\nimport type { ILayoutConfig } from './stack';\n\nexport type TAnimationStyle = (value: number) => AnimatedStyleProp<ViewStyle>;\n\nexport const BaseLayout: React.FC<{\n index: number;\n handlerOffsetX: Animated.SharedValue<number>;\n visibleRanges: IVisibleRanges;\n animationStyle: TAnimationStyle;\n children: (ctx: {\n animationValue: Animated.SharedValue<number>;\n }) => React.ReactElement;\n}> = (props) => {\n const mounted = useCheckMounted();\n const { handlerOffsetX, index, children, visibleRanges, animationStyle } =\n props;\n\n const context = React.useContext(CTX);\n const {\n props: {\n loop,\n data,\n width,\n height,\n vertical,\n customConfig,\n mode,\n modeConfig,\n },\n } = context;\n const size = vertical ? height : width;\n const [shouldUpdate, setShouldUpdate] = React.useState(false);\n let offsetXConfig: IOpts = {\n handlerOffsetX,\n index,\n size,\n data,\n loop,\n ...(typeof customConfig === 'function' ? customConfig() : {}),\n };\n\n if (mode === 'horizontal-stack') {\n const { snapDirection, showLength } = modeConfig as ILayoutConfig;\n\n offsetXConfig = {\n handlerOffsetX,\n index,\n size,\n data,\n loop,\n type: snapDirection === 'right' ? 'negative' : 'positive',\n viewCount: showLength,\n };\n }\n\n const x = useOffsetX(offsetXConfig, visibleRanges);\n const animationValue = useDerivedValue(() => x.value / size, [x, size]);\n const animatedStyle = useAnimatedStyle(\n // @ts-ignore\n () => animationStyle(x.value / size),\n [animationStyle]\n );\n\n const updateView = React.useCallback(\n (negativeRange: number[], positiveRange: number[]) => {\n mounted.current &&\n setShouldUpdate(\n (index >= negativeRange[0] && index <= negativeRange[1]) ||\n (index >= positiveRange[0] && index <= positiveRange[1])\n );\n },\n [index, mounted]\n );\n\n useAnimatedReaction(\n () => visibleRanges.value,\n () => {\n runOnJS(updateView)(\n visibleRanges.value.negativeRange,\n visibleRanges.value.positiveRange\n );\n },\n [visibleRanges.value]\n );\n\n return (\n <Animated.View\n style={[\n {\n width: width || '100%',\n height: height || '100%',\n position: 'absolute',\n },\n animatedStyle,\n ]}\n >\n <LazyView shouldUpdate={shouldUpdate}>\n {children({ animationValue })}\n </LazyView>\n </Animated.View>\n );\n};\n"]}
@@ -7,6 +7,7 @@ export const ParallaxLayout = props => {
7
7
  handlerOffsetX,
8
8
  parallaxScrollingOffset = 100,
9
9
  parallaxScrollingScale = 0.8,
10
+ parallaxAdjacentItemScale = Math.pow(parallaxScrollingScale, 2),
10
11
  index,
11
12
  width,
12
13
  height,
@@ -29,7 +30,7 @@ export const ParallaxLayout = props => {
29
30
  const value = x.value / size;
30
31
  const translate = interpolate(value, [-1, 0, 1], [-size + parallaxScrollingOffset, 0, size - parallaxScrollingOffset], Extrapolate.EXTEND);
31
32
  const zIndex = interpolate(value, [-1, 0, 1], [0, size, 0], Extrapolate.CLAMP);
32
- const scale = interpolate(value, [-1, 0, 1], [Math.pow(parallaxScrollingScale, 2), parallaxScrollingScale, Math.pow(parallaxScrollingScale, 2)], Extrapolate.CLAMP);
33
+ const scale = interpolate(value, [-1, 0, 1], [parallaxAdjacentItemScale, parallaxScrollingScale, parallaxAdjacentItemScale], Extrapolate.CLAMP);
33
34
  return {
34
35
  transform: [vertical ? {
35
36
  translateY: translate
@@ -1 +1 @@
1
- {"version":3,"sources":["ParallaxLayout.tsx"],"names":["React","Animated","Extrapolate","interpolate","runOnJS","useAnimatedReaction","useAnimatedStyle","useOffsetX","LazyView","ParallaxLayout","props","handlerOffsetX","parallaxScrollingOffset","parallaxScrollingScale","index","width","height","loop","data","children","visibleRanges","vertical","shouldUpdate","setShouldUpdate","useState","size","x","offsetXStyle","value","translate","EXTEND","zIndex","CLAMP","scale","Math","pow","transform","translateY","translateX","updateView","useCallback","negativeRange","positiveRange","position"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Animated, {\n Extrapolate,\n interpolate,\n runOnJS,\n useAnimatedReaction,\n useAnimatedStyle,\n} from 'react-native-reanimated';\nimport type { ComputedDirectionTypes } from 'src/types';\nimport { useOffsetX } from '../hooks/useOffsetX';\nimport type { IVisibleRanges } from '../hooks/useVisibleRanges';\nimport { LazyView } from '../LazyView';\n\nexport const ParallaxLayout: React.FC<\n ComputedDirectionTypes<{\n loop?: boolean;\n parallaxScrollingOffset?: number;\n parallaxScrollingScale?: number;\n handlerOffsetX: Animated.SharedValue<number>;\n index: number;\n data: unknown[];\n visibleRanges: IVisibleRanges;\n }>\n> = (props) => {\n const {\n handlerOffsetX,\n parallaxScrollingOffset = 100,\n parallaxScrollingScale = 0.8,\n index,\n width,\n height,\n loop,\n data,\n children,\n visibleRanges,\n vertical,\n } = props;\n\n const [shouldUpdate, setShouldUpdate] = React.useState(false);\n\n const size = props.vertical ? props.height : props.width;\n\n const x = useOffsetX(\n {\n handlerOffsetX,\n index,\n size,\n data,\n loop,\n },\n visibleRanges\n );\n\n const offsetXStyle = useAnimatedStyle(() => {\n const value = x.value / size;\n\n const translate = interpolate(\n value,\n [-1, 0, 1],\n [\n -size + parallaxScrollingOffset,\n 0,\n size - parallaxScrollingOffset,\n ],\n Extrapolate.EXTEND\n );\n\n const zIndex = interpolate(\n value,\n [-1, 0, 1],\n [0, size, 0],\n Extrapolate.CLAMP\n );\n\n const scale = interpolate(\n value,\n [-1, 0, 1],\n [\n Math.pow(parallaxScrollingScale, 2),\n parallaxScrollingScale,\n Math.pow(parallaxScrollingScale, 2),\n ],\n Extrapolate.CLAMP\n );\n\n return {\n transform: [\n vertical\n ? {\n translateY: translate,\n }\n : {\n translateX: translate,\n },\n {\n scale,\n },\n ],\n zIndex,\n };\n }, [loop, vertical, parallaxScrollingOffset]);\n\n const updateView = React.useCallback(\n (negativeRange: number[], positiveRange: number[]) => {\n setShouldUpdate(\n (index >= negativeRange[0] && index <= negativeRange[1]) ||\n (index >= positiveRange[0] && index <= positiveRange[1])\n );\n },\n [index]\n );\n\n useAnimatedReaction(\n () => visibleRanges.value,\n () => {\n runOnJS(updateView)(\n visibleRanges.value.negativeRange,\n visibleRanges.value.positiveRange\n );\n },\n [visibleRanges.value]\n );\n\n return (\n <Animated.View\n style={[\n {\n width: width || '100%',\n height: height || '100%',\n position: 'absolute',\n },\n offsetXStyle,\n ]}\n >\n <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>\n </Animated.View>\n );\n};\n"]}
1
+ {"version":3,"sources":["ParallaxLayout.tsx"],"names":["React","Animated","Extrapolate","interpolate","runOnJS","useAnimatedReaction","useAnimatedStyle","useOffsetX","LazyView","ParallaxLayout","props","handlerOffsetX","parallaxScrollingOffset","parallaxScrollingScale","parallaxAdjacentItemScale","Math","pow","index","width","height","loop","data","children","visibleRanges","vertical","shouldUpdate","setShouldUpdate","useState","size","x","offsetXStyle","value","translate","EXTEND","zIndex","CLAMP","scale","transform","translateY","translateX","updateView","useCallback","negativeRange","positiveRange","position"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Animated, {\n Extrapolate,\n interpolate,\n runOnJS,\n useAnimatedReaction,\n useAnimatedStyle,\n} from 'react-native-reanimated';\nimport type { ComputedDirectionTypes } from 'src/types';\nimport { useOffsetX } from '../hooks/useOffsetX';\nimport type { IVisibleRanges } from '../hooks/useVisibleRanges';\nimport { LazyView } from '../LazyView';\nimport type { ILayoutConfig } from './parallax';\n\nexport const ParallaxLayout: React.FC<\n ComputedDirectionTypes<\n {\n loop?: boolean;\n handlerOffsetX: Animated.SharedValue<number>;\n index: number;\n data: unknown[];\n visibleRanges: IVisibleRanges;\n } & ILayoutConfig\n >\n> = (props) => {\n const {\n handlerOffsetX,\n parallaxScrollingOffset = 100,\n parallaxScrollingScale = 0.8,\n parallaxAdjacentItemScale = Math.pow(parallaxScrollingScale, 2),\n index,\n width,\n height,\n loop,\n data,\n children,\n visibleRanges,\n vertical,\n } = props;\n\n const [shouldUpdate, setShouldUpdate] = React.useState(false);\n\n const size = props.vertical ? props.height : props.width;\n\n const x = useOffsetX(\n {\n handlerOffsetX,\n index,\n size,\n data,\n loop,\n },\n visibleRanges\n );\n\n const offsetXStyle = useAnimatedStyle(() => {\n const value = x.value / size;\n\n const translate = interpolate(\n value,\n [-1, 0, 1],\n [\n -size + parallaxScrollingOffset,\n 0,\n size - parallaxScrollingOffset,\n ],\n Extrapolate.EXTEND\n );\n\n const zIndex = interpolate(\n value,\n [-1, 0, 1],\n [0, size, 0],\n Extrapolate.CLAMP\n );\n\n const scale = interpolate(\n value,\n [-1, 0, 1],\n [\n parallaxAdjacentItemScale,\n parallaxScrollingScale,\n parallaxAdjacentItemScale,\n ],\n Extrapolate.CLAMP\n );\n\n return {\n transform: [\n vertical\n ? {\n translateY: translate,\n }\n : {\n translateX: translate,\n },\n {\n scale,\n },\n ],\n zIndex,\n };\n }, [loop, vertical, parallaxScrollingOffset]);\n\n const updateView = React.useCallback(\n (negativeRange: number[], positiveRange: number[]) => {\n setShouldUpdate(\n (index >= negativeRange[0] && index <= negativeRange[1]) ||\n (index >= positiveRange[0] && index <= positiveRange[1])\n );\n },\n [index]\n );\n\n useAnimatedReaction(\n () => visibleRanges.value,\n () => {\n runOnJS(updateView)(\n visibleRanges.value.negativeRange,\n visibleRanges.value.positiveRange\n );\n },\n [visibleRanges.value]\n );\n\n return (\n <Animated.View\n style={[\n {\n width: width || '100%',\n height: height || '100%',\n position: 'absolute',\n },\n offsetXStyle,\n ]}\n >\n <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>\n </Animated.View>\n );\n};\n"]}
@@ -1,19 +1,21 @@
1
1
  import { Extrapolate, interpolate } from 'react-native-reanimated';
2
- export function parallaxLayout(baseConfig, modeConfig = {}) {
2
+ export function parallaxLayout(baseConfig) {
3
+ let modeConfig = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
3
4
  const {
4
5
  size,
5
6
  vertical
6
7
  } = baseConfig;
7
8
  const {
8
9
  parallaxScrollingOffset = 100,
9
- parallaxScrollingScale = 0.8
10
+ parallaxScrollingScale = 0.8,
11
+ parallaxAdjacentItemScale = Math.pow(parallaxScrollingScale, 2)
10
12
  } = modeConfig;
11
13
  return value => {
12
14
  'worklet';
13
15
 
14
16
  const translate = interpolate(value, [-1, 0, 1], [-size + parallaxScrollingOffset, 0, size - parallaxScrollingOffset]);
15
17
  const zIndex = interpolate(value, [-1, 0, 1], [0, size, 0], Extrapolate.CLAMP);
16
- const scale = interpolate(value, [-1, 0, 1], [Math.pow(parallaxScrollingScale, 2), parallaxScrollingScale, Math.pow(parallaxScrollingScale, 2)], Extrapolate.CLAMP);
18
+ const scale = interpolate(value, [-1, 0, 1], [parallaxAdjacentItemScale, parallaxScrollingScale, parallaxAdjacentItemScale], Extrapolate.CLAMP);
17
19
  return {
18
20
  transform: [vertical ? {
19
21
  translateY: translate
@@ -1 +1 @@
1
- {"version":3,"sources":["parallax.ts"],"names":["Extrapolate","interpolate","parallaxLayout","baseConfig","modeConfig","size","vertical","parallaxScrollingOffset","parallaxScrollingScale","value","translate","zIndex","CLAMP","scale","Math","pow","transform","translateY","translateX"],"mappings":"AAAA,SAASA,WAAT,EAAsBC,WAAtB,QAAyC,yBAAzC;AA6BA,OAAO,SAASC,cAAT,CACHC,UADG,EAEHC,UAAyB,GAAG,EAFzB,EAGL;AACE,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,MAAqBH,UAA3B;AACA,QAAM;AAAEI,IAAAA,uBAAuB,GAAG,GAA5B;AAAiCC,IAAAA,sBAAsB,GAAG;AAA1D,MACFJ,UADJ;AAGA,SAAQK,KAAD,IAAmB;AACtB;;AACA,UAAMC,SAAS,GAAGT,WAAW,CACzBQ,KADyB,EAEzB,CAAC,CAAC,CAAF,EAAK,CAAL,EAAQ,CAAR,CAFyB,EAGzB,CAAC,CAACJ,IAAD,GAAQE,uBAAT,EAAkC,CAAlC,EAAqCF,IAAI,GAAGE,uBAA5C,CAHyB,CAA7B;AAMA,UAAMI,MAAM,GAAGV,WAAW,CACtBQ,KADsB,EAEtB,CAAC,CAAC,CAAF,EAAK,CAAL,EAAQ,CAAR,CAFsB,EAGtB,CAAC,CAAD,EAAIJ,IAAJ,EAAU,CAAV,CAHsB,EAItBL,WAAW,CAACY,KAJU,CAA1B;AAOA,UAAMC,KAAK,GAAGZ,WAAW,CACrBQ,KADqB,EAErB,CAAC,CAAC,CAAF,EAAK,CAAL,EAAQ,CAAR,CAFqB,EAGrB,CACIK,IAAI,CAACC,GAAL,CAASP,sBAAT,EAAiC,CAAjC,CADJ,EAEIA,sBAFJ,EAGIM,IAAI,CAACC,GAAL,CAASP,sBAAT,EAAiC,CAAjC,CAHJ,CAHqB,EAQrBR,WAAW,CAACY,KARS,CAAzB;AAWA,WAAO;AACHI,MAAAA,SAAS,EAAE,CACPV,QAAQ,GACF;AACIW,QAAAA,UAAU,EAAEP;AADhB,OADE,GAIF;AACIQ,QAAAA,UAAU,EAAER;AADhB,OALC,EAQP;AACIG,QAAAA;AADJ,OARO,CADR;AAaHF,MAAAA;AAbG,KAAP;AAeH,GAzCD;AA0CH","sourcesContent":["import { Extrapolate, interpolate } from 'react-native-reanimated';\nimport type { ComputedDirectionTypes } from '../types';\n\ntype TBaseConfig = {\n size: number;\n vertical: boolean;\n};\n\ninterface ILayoutConfig {\n /**\n * When use default Layout props,this prop can be control prev/next item offset.\n * @default 100\n */\n parallaxScrollingOffset?: number;\n /**\n * When use default Layout props,this prop can be control prev/next item offset.\n * @default 0.8\n */\n parallaxScrollingScale?: number;\n}\n\nexport type TParallaxModeProps = ComputedDirectionTypes<{\n /**\n * Carousel Animated transitions.\n */\n mode?: 'parallax';\n modeConfig?: ILayoutConfig;\n}>;\n\nexport function parallaxLayout(\n baseConfig: TBaseConfig,\n modeConfig: ILayoutConfig = {}\n) {\n const { size, vertical } = baseConfig;\n const { parallaxScrollingOffset = 100, parallaxScrollingScale = 0.8 } =\n modeConfig;\n\n return (value: number) => {\n 'worklet';\n const translate = interpolate(\n value,\n [-1, 0, 1],\n [-size + parallaxScrollingOffset, 0, size - parallaxScrollingOffset]\n );\n\n const zIndex = interpolate(\n value,\n [-1, 0, 1],\n [0, size, 0],\n Extrapolate.CLAMP\n );\n\n const scale = interpolate(\n value,\n [-1, 0, 1],\n [\n Math.pow(parallaxScrollingScale, 2),\n parallaxScrollingScale,\n Math.pow(parallaxScrollingScale, 2),\n ],\n Extrapolate.CLAMP\n );\n\n return {\n transform: [\n vertical\n ? {\n translateY: translate,\n }\n : {\n translateX: translate,\n },\n {\n scale,\n },\n ],\n zIndex,\n };\n };\n}\n"]}
1
+ {"version":3,"sources":["parallax.ts"],"names":["Extrapolate","interpolate","parallaxLayout","baseConfig","modeConfig","size","vertical","parallaxScrollingOffset","parallaxScrollingScale","parallaxAdjacentItemScale","Math","pow","value","translate","zIndex","CLAMP","scale","transform","translateY","translateX"],"mappings":"AAAA,SAASA,WAAT,EAAsBC,WAAtB,QAAyC,yBAAzC;AAkCA,OAAO,SAASC,cAAT,CACHC,UADG,EAGL;AAAA,MADEC,UACF,uEAD8B,EAC9B;AACE,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,MAAqBH,UAA3B;AACA,QAAM;AACFI,IAAAA,uBAAuB,GAAG,GADxB;AAEFC,IAAAA,sBAAsB,GAAG,GAFvB;AAGFC,IAAAA,yBAAyB,GAAGC,IAAI,CAACC,GAAL,CAASH,sBAAT,EAAiC,CAAjC;AAH1B,MAIFJ,UAJJ;AAMA,SAAQQ,KAAD,IAAmB;AACtB;;AACA,UAAMC,SAAS,GAAGZ,WAAW,CACzBW,KADyB,EAEzB,CAAC,CAAC,CAAF,EAAK,CAAL,EAAQ,CAAR,CAFyB,EAGzB,CAAC,CAACP,IAAD,GAAQE,uBAAT,EAAkC,CAAlC,EAAqCF,IAAI,GAAGE,uBAA5C,CAHyB,CAA7B;AAMA,UAAMO,MAAM,GAAGb,WAAW,CACtBW,KADsB,EAEtB,CAAC,CAAC,CAAF,EAAK,CAAL,EAAQ,CAAR,CAFsB,EAGtB,CAAC,CAAD,EAAIP,IAAJ,EAAU,CAAV,CAHsB,EAItBL,WAAW,CAACe,KAJU,CAA1B;AAOA,UAAMC,KAAK,GAAGf,WAAW,CACrBW,KADqB,EAErB,CAAC,CAAC,CAAF,EAAK,CAAL,EAAQ,CAAR,CAFqB,EAGrB,CACIH,yBADJ,EAEID,sBAFJ,EAGIC,yBAHJ,CAHqB,EAQrBT,WAAW,CAACe,KARS,CAAzB;AAWA,WAAO;AACHE,MAAAA,SAAS,EAAE,CACPX,QAAQ,GACF;AACIY,QAAAA,UAAU,EAAEL;AADhB,OADE,GAIF;AACIM,QAAAA,UAAU,EAAEN;AADhB,OALC,EAQP;AACIG,QAAAA;AADJ,OARO,CADR;AAaHF,MAAAA;AAbG,KAAP;AAeH,GAzCD;AA0CH","sourcesContent":["import { Extrapolate, interpolate } from 'react-native-reanimated';\nimport type { ComputedDirectionTypes } from '../types';\n\ntype TBaseConfig = {\n size: number;\n vertical: boolean;\n};\n\nexport interface ILayoutConfig {\n /**\n * control prev/next item offset.\n * @default 100\n */\n parallaxScrollingOffset?: number;\n /**\n * control prev/current/next item offset.\n * @default 0.8\n */\n parallaxScrollingScale?: number;\n /**\n * control prev/next item offset.\n * @default Math.pow(parallaxScrollingScale, 2)\n */\n parallaxAdjacentItemScale?: number;\n}\n\nexport type TParallaxModeProps = ComputedDirectionTypes<{\n /**\n * Carousel Animated transitions.\n */\n mode?: 'parallax';\n modeConfig?: ILayoutConfig;\n}>;\n\nexport function parallaxLayout(\n baseConfig: TBaseConfig,\n modeConfig: ILayoutConfig = {}\n) {\n const { size, vertical } = baseConfig;\n const {\n parallaxScrollingOffset = 100,\n parallaxScrollingScale = 0.8,\n parallaxAdjacentItemScale = Math.pow(parallaxScrollingScale, 2),\n } = modeConfig;\n\n return (value: number) => {\n 'worklet';\n const translate = interpolate(\n value,\n [-1, 0, 1],\n [-size + parallaxScrollingOffset, 0, size - parallaxScrollingOffset]\n );\n\n const zIndex = interpolate(\n value,\n [-1, 0, 1],\n [0, size, 0],\n Extrapolate.CLAMP\n );\n\n const scale = interpolate(\n value,\n [-1, 0, 1],\n [\n parallaxAdjacentItemScale,\n parallaxScrollingScale,\n parallaxAdjacentItemScale,\n ],\n Extrapolate.CLAMP\n );\n\n return {\n transform: [\n vertical\n ? {\n translateY: translate,\n }\n : {\n translateX: translate,\n },\n {\n scale,\n },\n ],\n zIndex,\n };\n };\n}\n"]}
@@ -2,7 +2,8 @@ import { useMemo } from 'react';
2
2
  import { Dimensions } from 'react-native';
3
3
  import { Extrapolate, interpolate } from 'react-native-reanimated';
4
4
  const screen = Dimensions.get('window');
5
- export function horizontalStackLayout(modeConfig = {}) {
5
+ export function horizontalStackLayout() {
6
+ let modeConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
6
7
  return _value => {
7
8
  'worklet';
8
9
 
@@ -63,7 +64,9 @@ export function horizontalStackLayout(modeConfig = {}) {
63
64
  return styles;
64
65
  };
65
66
  }
66
- export function useHorizontalStackLayout(customAnimationConfig = {}, customConfig = {}) {
67
+ export function useHorizontalStackLayout() {
68
+ let customAnimationConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
69
+ let customConfig = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
67
70
  const config = useMemo(() => ({
68
71
  type: customAnimationConfig.snapDirection === 'right' ? 'negative' : 'positive',
69
72
  viewCount: customAnimationConfig.showLength,
@@ -74,7 +77,8 @@ export function useHorizontalStackLayout(customAnimationConfig = {}, customConfi
74
77
  config
75
78
  };
76
79
  }
77
- export function verticalStackLayout(modeConfig = {}) {
80
+ export function verticalStackLayout() {
81
+ let modeConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
78
82
  return _value => {
79
83
  'worklet';
80
84
 
@@ -1 +1 @@
1
- {"version":3,"sources":["stack.ts"],"names":["useMemo","Dimensions","Extrapolate","interpolate","screen","get","horizontalStackLayout","modeConfig","_value","showLength","snapDirection","moveSize","width","stackInterval","scaleInterval","opacityInterval","rotateZDeg","transform","validLength","value","inputRange","getCommonVariables","zIndex","opacity","getCommonStyles","styles","translateX","scale","rotateZ","CLAMP","push","useHorizontalStackLayout","customAnimationConfig","customConfig","config","type","viewCount","layout","verticalStackLayout","translateY","opts","easeInOutCubic","v","Math","pow","page","floor","abs","diff","Error","Number","MIN_VALUE"],"mappings":"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","sourcesContent":["import { useMemo } from 'react';\nimport { Dimensions, TransformsStyle, ViewStyle } from 'react-native';\nimport { Extrapolate, interpolate } from 'react-native-reanimated';\nimport type { ComputedDirectionTypes, CustomConfig } from '../types';\n\nconst screen = Dimensions.get('window');\n\nexport interface ILayoutConfig {\n showLength?: number;\n moveSize?: number;\n stackInterval?: number;\n scaleInterval?: number;\n opacityInterval?: number;\n rotateZDeg?: number;\n snapDirection?: 'left' | 'right';\n}\n\nexport type TStackModeProps = ComputedDirectionTypes<{\n /**\n * Carousel Animated transitions.\n */\n mode?: 'horizontal-stack' | 'vertical-stack';\n /**\n * Stack animation style.\n * @default\n * mode: 'vertical',\n * snapDirection: 'right',\n * moveSize: window.width,\n * stackInterval: 30,\n * scaleInterval: 0.08,\n * rotateZDeg: 135,\n */\n modeConfig?: ILayoutConfig;\n}>;\n\nexport function horizontalStackLayout(modeConfig: ILayoutConfig = {}) {\n return (_value: number) => {\n 'worklet';\n\n const {\n showLength,\n snapDirection = 'left',\n moveSize = screen.width,\n stackInterval = 18,\n scaleInterval = 0.04,\n opacityInterval = 0.1,\n rotateZDeg = 30,\n } = modeConfig;\n\n const transform: TransformsStyle['transform'] = [];\n const { validLength, value, inputRange } = getCommonVariables({\n showLength: showLength!,\n value: _value,\n snapDirection,\n });\n const { zIndex, opacity } = getCommonStyles({\n validLength,\n value,\n opacityInterval,\n snapDirection,\n });\n\n const styles: ViewStyle = {\n transform,\n zIndex,\n opacity,\n };\n\n let translateX: number;\n let scale: number;\n let rotateZ: string;\n\n if (snapDirection === 'left') {\n translateX = interpolate(\n value,\n inputRange,\n [-moveSize, 0, validLength * stackInterval],\n Extrapolate.CLAMP\n );\n scale = interpolate(\n value,\n inputRange,\n [1, 1, 1 - validLength * scaleInterval],\n Extrapolate.CLAMP\n );\n rotateZ = `${interpolate(\n value,\n inputRange,\n [-rotateZDeg, 0, 0],\n Extrapolate.CLAMP\n )}deg`;\n } else if (snapDirection === 'right') {\n translateX = interpolate(\n value,\n inputRange,\n [-validLength * stackInterval, 0, moveSize],\n Extrapolate.CLAMP\n );\n scale = interpolate(\n value,\n inputRange,\n [1 - validLength * scaleInterval, 1, 1],\n Extrapolate.CLAMP\n );\n rotateZ = `${interpolate(\n value,\n inputRange,\n [0, 0, rotateZDeg],\n Extrapolate.CLAMP\n )}deg`;\n }\n\n transform.push(\n {\n translateX: translateX!,\n },\n {\n scale: scale!,\n },\n {\n rotateZ: rotateZ!,\n }\n );\n\n return styles;\n };\n}\n\nexport function useHorizontalStackLayout(\n customAnimationConfig: ILayoutConfig = {},\n customConfig: CustomConfig = {}\n) {\n const config = useMemo(\n () => ({\n type:\n customAnimationConfig.snapDirection === 'right'\n ? 'negative'\n : 'positive',\n viewCount: customAnimationConfig.showLength,\n ...customConfig,\n }),\n [customAnimationConfig, customConfig]\n );\n\n return {\n layout: horizontalStackLayout(customAnimationConfig),\n config,\n };\n}\n\nexport function verticalStackLayout(modeConfig: ILayoutConfig = {}) {\n return (_value: number) => {\n 'worklet';\n\n const {\n showLength,\n snapDirection = 'left',\n moveSize = screen.width,\n stackInterval = 18,\n scaleInterval = 0.04,\n opacityInterval = 0.1,\n rotateZDeg = 30,\n } = modeConfig;\n const transform: TransformsStyle['transform'] = [];\n const { validLength, value, inputRange } = getCommonVariables({\n showLength: showLength!,\n value: _value,\n snapDirection,\n });\n const { zIndex, opacity } = getCommonStyles({\n validLength,\n value,\n opacityInterval,\n snapDirection,\n });\n\n const styles: ViewStyle = {\n transform,\n zIndex,\n opacity,\n };\n\n let translateX: number;\n let scale: number;\n let rotateZ: string;\n let translateY: number;\n\n if (snapDirection === 'left') {\n translateX = interpolate(\n value,\n inputRange,\n [-moveSize, 0, 0],\n Extrapolate.CLAMP\n );\n scale = interpolate(\n value,\n inputRange,\n [1, 1, 1 - validLength * scaleInterval],\n Extrapolate.CLAMP\n );\n rotateZ = `${interpolate(\n value,\n inputRange,\n [-rotateZDeg, 0, 0],\n Extrapolate.CLAMP\n )}deg`;\n translateY = interpolate(\n value,\n inputRange,\n [0, 0, validLength * stackInterval],\n Extrapolate.CLAMP\n );\n } else if (snapDirection === 'right') {\n translateX = interpolate(\n value,\n inputRange,\n [0, 0, moveSize],\n Extrapolate.CLAMP\n );\n scale = interpolate(\n value,\n inputRange,\n [1 - validLength * scaleInterval, 1, 1],\n Extrapolate.CLAMP\n );\n rotateZ = `${interpolate(\n value,\n inputRange,\n [0, 0, rotateZDeg],\n Extrapolate.CLAMP\n )}deg`;\n translateY = interpolate(\n value,\n inputRange,\n [validLength * stackInterval, 0, 0],\n Extrapolate.CLAMP\n );\n }\n\n transform.push(\n {\n translateX: translateX!,\n },\n {\n scale: scale!,\n },\n {\n rotateZ: rotateZ!,\n },\n {\n translateY: translateY!,\n }\n );\n\n return styles;\n };\n}\n\nfunction getCommonVariables(opts: {\n value: number;\n showLength: number;\n snapDirection: 'left' | 'right';\n}) {\n 'worklet';\n\n const { showLength, value: _value, snapDirection } = opts;\n function easeInOutCubic(v: number): number {\n return v < 0.5 ? 4 * v * v * v : 1 - Math.pow(-2 * v + 2, 3) / 2;\n }\n const page = Math.floor(Math.abs(_value));\n const diff = Math.abs(_value) % 1;\n const value =\n _value < 0\n ? -(page + easeInOutCubic(diff))\n : page + easeInOutCubic(diff);\n const validLength = showLength! - 1;\n\n let inputRange: [number, number, number];\n\n if (snapDirection === 'left') {\n inputRange = [-1, 0, validLength];\n } else if (snapDirection === 'right') {\n inputRange = [-validLength, 0, 1];\n } else {\n throw Error('snapDirection must be set to either left or right');\n }\n\n return {\n inputRange,\n validLength,\n value,\n };\n}\n\nfunction getCommonStyles(opts: {\n value: number;\n validLength: number;\n opacityInterval: number;\n snapDirection: 'left' | 'right';\n}) {\n 'worklet';\n\n const { snapDirection, validLength, value, opacityInterval } = opts;\n\n let zIndex: number;\n let opacity: number;\n\n if (snapDirection === 'left') {\n zIndex =\n Math.floor(\n interpolate(\n value,\n [-1.5, -1, -1 + Number.MIN_VALUE, 0, validLength],\n [\n Number.MIN_VALUE,\n validLength,\n validLength,\n validLength - 1,\n -1,\n ]\n ) * 10000\n ) / 100;\n\n opacity = interpolate(\n value,\n [-1, 0, validLength - 1, validLength],\n [0.25, 1, 1 - (validLength - 1) * opacityInterval, 0.25]\n );\n } else if (snapDirection === 'right') {\n zIndex =\n Math.floor(\n interpolate(\n value,\n [-validLength, 0, 1 - Number.MIN_VALUE, 1, 1.5],\n [\n 1,\n validLength - 1,\n validLength,\n validLength,\n Number.MIN_VALUE,\n ]\n ) * 10000\n ) / 100;\n opacity = interpolate(\n value,\n [-validLength, 1 - validLength, 0, 1],\n [0.25, 1 - (validLength - 1) * opacityInterval, 1, 0.25]\n );\n } else {\n throw Error('snapDirection must be set to either left or right');\n }\n\n return {\n zIndex,\n opacity,\n };\n}\n"]}
1
+ {"version":3,"sources":["stack.ts"],"names":["useMemo","Dimensions","Extrapolate","interpolate","screen","get","horizontalStackLayout","modeConfig","_value","showLength","snapDirection","moveSize","width","stackInterval","scaleInterval","opacityInterval","rotateZDeg","transform","validLength","value","inputRange","getCommonVariables","zIndex","opacity","getCommonStyles","styles","translateX","scale","rotateZ","CLAMP","push","useHorizontalStackLayout","customAnimationConfig","customConfig","config","type","viewCount","layout","verticalStackLayout","translateY","opts","easeInOutCubic","v","Math","pow","page","floor","abs","diff","Error","Number","MIN_VALUE"],"mappings":"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","sourcesContent":["import { useMemo } from 'react';\nimport { Dimensions, TransformsStyle, ViewStyle } from 'react-native';\nimport { Extrapolate, interpolate } from 'react-native-reanimated';\nimport type { ComputedDirectionTypes, CustomConfig } from '../types';\n\nconst screen = Dimensions.get('window');\n\nexport interface ILayoutConfig {\n showLength?: number;\n moveSize?: number;\n stackInterval?: number;\n scaleInterval?: number;\n opacityInterval?: number;\n rotateZDeg?: number;\n snapDirection?: 'left' | 'right';\n}\n\nexport type TStackModeProps = ComputedDirectionTypes<{\n /**\n * Carousel Animated transitions.\n */\n mode?: 'horizontal-stack' | 'vertical-stack';\n /**\n * Stack animation style.\n * @default\n * mode: 'vertical',\n * snapDirection: 'right',\n * moveSize: window.width,\n * stackInterval: 30,\n * scaleInterval: 0.08,\n * rotateZDeg: 135,\n */\n modeConfig?: ILayoutConfig;\n}>;\n\nexport function horizontalStackLayout(modeConfig: ILayoutConfig = {}) {\n return (_value: number) => {\n 'worklet';\n\n const {\n showLength,\n snapDirection = 'left',\n moveSize = screen.width,\n stackInterval = 18,\n scaleInterval = 0.04,\n opacityInterval = 0.1,\n rotateZDeg = 30,\n } = modeConfig;\n\n const transform: TransformsStyle['transform'] = [];\n const { validLength, value, inputRange } = getCommonVariables({\n showLength: showLength!,\n value: _value,\n snapDirection,\n });\n const { zIndex, opacity } = getCommonStyles({\n validLength,\n value,\n opacityInterval,\n snapDirection,\n });\n\n const styles: ViewStyle = {\n transform,\n zIndex,\n opacity,\n };\n\n let translateX: number;\n let scale: number;\n let rotateZ: string;\n\n if (snapDirection === 'left') {\n translateX = interpolate(\n value,\n inputRange,\n [-moveSize, 0, validLength * stackInterval],\n Extrapolate.CLAMP\n );\n scale = interpolate(\n value,\n inputRange,\n [1, 1, 1 - validLength * scaleInterval],\n Extrapolate.CLAMP\n );\n rotateZ = `${interpolate(\n value,\n inputRange,\n [-rotateZDeg, 0, 0],\n Extrapolate.CLAMP\n )}deg`;\n } else if (snapDirection === 'right') {\n translateX = interpolate(\n value,\n inputRange,\n [-validLength * stackInterval, 0, moveSize],\n Extrapolate.CLAMP\n );\n scale = interpolate(\n value,\n inputRange,\n [1 - validLength * scaleInterval, 1, 1],\n Extrapolate.CLAMP\n );\n rotateZ = `${interpolate(\n value,\n inputRange,\n [0, 0, rotateZDeg],\n Extrapolate.CLAMP\n )}deg`;\n }\n\n transform.push(\n {\n translateX: translateX!,\n },\n {\n scale: scale!,\n },\n {\n rotateZ: rotateZ!,\n }\n );\n\n return styles;\n };\n}\n\nexport function useHorizontalStackLayout(\n customAnimationConfig: ILayoutConfig = {},\n customConfig: CustomConfig = {}\n) {\n const config = useMemo(\n () => ({\n type:\n customAnimationConfig.snapDirection === 'right'\n ? 'negative'\n : 'positive',\n viewCount: customAnimationConfig.showLength,\n ...customConfig,\n }),\n [customAnimationConfig, customConfig]\n );\n\n return {\n layout: horizontalStackLayout(customAnimationConfig),\n config,\n };\n}\n\nexport function verticalStackLayout(modeConfig: ILayoutConfig = {}) {\n return (_value: number) => {\n 'worklet';\n\n const {\n showLength,\n snapDirection = 'left',\n moveSize = screen.width,\n stackInterval = 18,\n scaleInterval = 0.04,\n opacityInterval = 0.1,\n rotateZDeg = 30,\n } = modeConfig;\n const transform: TransformsStyle['transform'] = [];\n const { validLength, value, inputRange } = getCommonVariables({\n showLength: showLength!,\n value: _value,\n snapDirection,\n });\n const { zIndex, opacity } = getCommonStyles({\n validLength,\n value,\n opacityInterval,\n snapDirection,\n });\n\n const styles: ViewStyle = {\n transform,\n zIndex,\n opacity,\n };\n\n let translateX: number;\n let scale: number;\n let rotateZ: string;\n let translateY: number;\n\n if (snapDirection === 'left') {\n translateX = interpolate(\n value,\n inputRange,\n [-moveSize, 0, 0],\n Extrapolate.CLAMP\n );\n scale = interpolate(\n value,\n inputRange,\n [1, 1, 1 - validLength * scaleInterval],\n Extrapolate.CLAMP\n );\n rotateZ = `${interpolate(\n value,\n inputRange,\n [-rotateZDeg, 0, 0],\n Extrapolate.CLAMP\n )}deg`;\n translateY = interpolate(\n value,\n inputRange,\n [0, 0, validLength * stackInterval],\n Extrapolate.CLAMP\n );\n } else if (snapDirection === 'right') {\n translateX = interpolate(\n value,\n inputRange,\n [0, 0, moveSize],\n Extrapolate.CLAMP\n );\n scale = interpolate(\n value,\n inputRange,\n [1 - validLength * scaleInterval, 1, 1],\n Extrapolate.CLAMP\n );\n rotateZ = `${interpolate(\n value,\n inputRange,\n [0, 0, rotateZDeg],\n Extrapolate.CLAMP\n )}deg`;\n translateY = interpolate(\n value,\n inputRange,\n [validLength * stackInterval, 0, 0],\n Extrapolate.CLAMP\n );\n }\n\n transform.push(\n {\n translateX: translateX!,\n },\n {\n scale: scale!,\n },\n {\n rotateZ: rotateZ!,\n },\n {\n translateY: translateY!,\n }\n );\n\n return styles;\n };\n}\n\nfunction getCommonVariables(opts: {\n value: number;\n showLength: number;\n snapDirection: 'left' | 'right';\n}) {\n 'worklet';\n\n const { showLength, value: _value, snapDirection } = opts;\n function easeInOutCubic(v: number): number {\n return v < 0.5 ? 4 * v * v * v : 1 - Math.pow(-2 * v + 2, 3) / 2;\n }\n const page = Math.floor(Math.abs(_value));\n const diff = Math.abs(_value) % 1;\n const value =\n _value < 0\n ? -(page + easeInOutCubic(diff))\n : page + easeInOutCubic(diff);\n const validLength = showLength! - 1;\n\n let inputRange: [number, number, number];\n\n if (snapDirection === 'left') {\n inputRange = [-1, 0, validLength];\n } else if (snapDirection === 'right') {\n inputRange = [-validLength, 0, 1];\n } else {\n throw Error('snapDirection must be set to either left or right');\n }\n\n return {\n inputRange,\n validLength,\n value,\n };\n}\n\nfunction getCommonStyles(opts: {\n value: number;\n validLength: number;\n opacityInterval: number;\n snapDirection: 'left' | 'right';\n}) {\n 'worklet';\n\n const { snapDirection, validLength, value, opacityInterval } = opts;\n\n let zIndex: number;\n let opacity: number;\n\n if (snapDirection === 'left') {\n zIndex =\n Math.floor(\n interpolate(\n value,\n [-1.5, -1, -1 + Number.MIN_VALUE, 0, validLength],\n [\n Number.MIN_VALUE,\n validLength,\n validLength,\n validLength - 1,\n -1,\n ]\n ) * 10000\n ) / 100;\n\n opacity = interpolate(\n value,\n [-1, 0, validLength - 1, validLength],\n [0.25, 1, 1 - (validLength - 1) * opacityInterval, 0.25]\n );\n } else if (snapDirection === 'right') {\n zIndex =\n Math.floor(\n interpolate(\n value,\n [-validLength, 0, 1 - Number.MIN_VALUE, 1, 1.5],\n [\n 1,\n validLength - 1,\n validLength,\n validLength,\n Number.MIN_VALUE,\n ]\n ) * 10000\n ) / 100;\n opacity = interpolate(\n value,\n [-validLength, 1 - validLength, 0, 1],\n [0.25, 1 - (validLength - 1) * opacityInterval, 1, 0.25]\n );\n } else {\n throw Error('snapDirection must be set to either left or right');\n }\n\n return {\n zIndex,\n opacity,\n };\n}\n"]}
@@ -2,7 +2,7 @@
2
2
  * In worklet
3
3
  * e.g. runOnJS(lop)(...);
4
4
  */
5
- export function log(...msg) {
6
- console.log(...msg);
5
+ export function log() {
6
+ console.log(...arguments);
7
7
  }
8
8
  //# sourceMappingURL=log.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["log.ts"],"names":["log","msg","console"],"mappings":"AAAA;AACA;AACA;AACA;AACA,OAAO,SAASA,GAAT,CAAa,GAAGC,GAAhB,EAA0B;AAC7BC,EAAAA,OAAO,CAACF,GAAR,CAAY,GAAGC,GAAf;AACH","sourcesContent":["/**\n * In worklet\n * e.g. runOnJS(lop)(...);\n */\nexport function log(...msg: any) {\n console.log(...msg);\n}\n"]}
1
+ {"version":3,"sources":["log.ts"],"names":["log","console"],"mappings":"AAAA;AACA;AACA;AACA;AACA,OAAO,SAASA,GAAT,GAA0B;AAC7BC,EAAAA,OAAO,CAACD,GAAR,CAAY,YAAZ;AACH","sourcesContent":["/**\n * In worklet\n * e.g. runOnJS(lop)(...);\n */\nexport function log(...msg: any) {\n console.log(...msg);\n}\n"]}
@@ -1,7 +1,8 @@
1
+ import Animated from 'react-native-reanimated';
1
2
  export declare enum DATA_LENGTH {
2
3
  SINGLE_ITEM = 1,
3
4
  DOUBLE_ITEM = 2
4
5
  }
5
6
  export declare const Easing: {
6
- easeOutQuart: (value: number) => number;
7
+ easeOutQuart: Animated.EasingFunction;
7
8
  };
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare function useCheckMounted(): React.MutableRefObject<boolean>;
@@ -2,12 +2,11 @@ import React from 'react';
2
2
  import Animated from 'react-native-reanimated';
3
3
  import type { ComputedDirectionTypes } from 'src/types';
4
4
  import type { IVisibleRanges } from '../hooks/useVisibleRanges';
5
+ import type { ILayoutConfig } from './parallax';
5
6
  export declare const ParallaxLayout: React.FC<ComputedDirectionTypes<{
6
7
  loop?: boolean;
7
- parallaxScrollingOffset?: number;
8
- parallaxScrollingScale?: number;
9
8
  handlerOffsetX: Animated.SharedValue<number>;
10
9
  index: number;
11
10
  data: unknown[];
12
11
  visibleRanges: IVisibleRanges;
13
- }>>;
12
+ } & ILayoutConfig>>;
@@ -3,17 +3,22 @@ declare type TBaseConfig = {
3
3
  size: number;
4
4
  vertical: boolean;
5
5
  };
6
- interface ILayoutConfig {
6
+ export interface ILayoutConfig {
7
7
  /**
8
- * When use default Layout props,this prop can be control prev/next item offset.
8
+ * control prev/next item offset.
9
9
  * @default 100
10
10
  */
11
11
  parallaxScrollingOffset?: number;
12
12
  /**
13
- * When use default Layout props,this prop can be control prev/next item offset.
13
+ * control prev/current/next item offset.
14
14
  * @default 0.8
15
15
  */
16
16
  parallaxScrollingScale?: number;
17
+ /**
18
+ * control prev/next item offset.
19
+ * @default Math.pow(parallaxScrollingScale, 2)
20
+ */
21
+ parallaxAdjacentItemScale?: number;
17
22
  }
18
23
  export declare type TParallaxModeProps = ComputedDirectionTypes<{
19
24
  /**
@@ -36,13 +36,15 @@ export declare type CustomConfig = {
36
36
  type?: 'negative' | 'positive';
37
37
  viewCount?: number;
38
38
  };
39
- export declare type WithAnimation = {
39
+ export declare type WithSpringAnimation = {
40
40
  type: 'spring';
41
41
  config: WithSpringConfig;
42
- } | {
42
+ };
43
+ export declare type WithTimingAnimation = {
43
44
  type: 'timing';
44
45
  config: WithTimingConfig;
45
46
  };
47
+ export declare type WithAnimation = WithSpringAnimation | WithTimingAnimation;
46
48
  export declare type TCarouselProps<T = any> = {
47
49
  ref?: React.Ref<ICarouselInstance>;
48
50
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-reanimated-carousel",
3
- "version": "2.3.0",
3
+ "version": "2.3.2-beta.1",
4
4
  "description": "Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.",
5
5
  "main": "lib/commonjs/index",
6
6
  "types": "lib/typescript/index.d.ts",
@@ -60,7 +60,8 @@
60
60
  "@release-it/conventional-changelog": "^2.0.0",
61
61
  "@types/jest": "^26.0.0",
62
62
  "@types/react": "^16.9.19",
63
- "@types/react-native": "0.62.13",
63
+ "@types/react-native": "^0.66.16",
64
+ "@types/react-native-snap-carousel": "^3.8.5",
64
65
  "babel-plugin-inline-dotenv": "^1.6.0",
65
66
  "babel-plugin-module-resolver": "^4.1.0",
66
67
  "commitlint": "^11.0.0",
@@ -79,6 +80,7 @@
79
80
  "react-native-gesture-handler": "^1.10.3",
80
81
  "react-native-reanimated": "^2.2.0",
81
82
  "release-it": "^14.2.2",
83
+ "sponsorkit": "^0.1.3",
82
84
  "typescript": "^4.0.8"
83
85
  },
84
86
  "peerDependencies": {
@@ -15,10 +15,11 @@ import Animated, {
15
15
  } from 'react-native-reanimated';
16
16
  import { Easing } from './constants';
17
17
  import { CTX } from './store';
18
- import type { WithAnimation } from './types';
18
+ import type { WithTimingAnimation } from './types';
19
19
  import { dealWithAnimation } from './utils/dealWithAnimation';
20
20
 
21
21
  type GestureContext = {
22
+ validStart: boolean;
22
23
  panOffset: number;
23
24
  max: number;
24
25
  };
@@ -75,7 +76,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
75
76
  }
76
77
  };
77
78
 
78
- const defaultWithAnimation: WithAnimation = {
79
+ const defaultWithAnimation: WithTimingAnimation = {
79
80
  type: 'timing',
80
81
  config: {
81
82
  duration: scrollAnimationDuration,
@@ -210,12 +211,16 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
210
211
  {
211
212
  onStart: (_, ctx) => {
212
213
  touching.value = true;
213
- cancelAnimation(translation);
214
+ ctx.validStart = true;
214
215
  onScrollBegin && runOnJS(onScrollBegin)();
215
216
  ctx.max = (maxPage - 1) * size;
216
217
  ctx.panOffset = translation.value;
217
218
  },
218
219
  onActive: (e, ctx) => {
220
+ if (ctx.validStart) {
221
+ ctx.validStart = false;
222
+ cancelAnimation(translation);
223
+ }
219
224
  touching.value = true;
220
225
  const { translationX, translationY } = e;
221
226
  let panTranslation = isHorizontal.value
@@ -1,4 +1,4 @@
1
- import { Easing as _Easing } from 'react-native-reanimated';
1
+ import Animated, { Easing as _Easing } from 'react-native-reanimated';
2
2
 
3
3
  export enum DATA_LENGTH {
4
4
  SINGLE_ITEM = 1,
@@ -6,5 +6,10 @@ export enum DATA_LENGTH {
6
6
  }
7
7
 
8
8
  export const Easing = {
9
- easeOutQuart: _Easing.bezier(0.25, 1, 0.5, 1),
9
+ easeOutQuart: _Easing.bezier(
10
+ 0.25,
11
+ 1,
12
+ 0.5,
13
+ 1
14
+ ) as unknown as Animated.EasingFunction,
10
15
  };
@@ -5,7 +5,7 @@ import { runOnJS, useSharedValue } from 'react-native-reanimated';
5
5
  import type {
6
6
  TCarouselActionOptions,
7
7
  TCarouselProps,
8
- WithAnimation,
8
+ WithTimingAnimation,
9
9
  } from '../types';
10
10
  import { dealWithAnimation } from '@/utils/dealWithAnimation';
11
11
 
@@ -132,7 +132,7 @@ export function useCarouselController(options: IOpts): ICarouselController {
132
132
  }
133
133
  };
134
134
 
135
- const defaultWithAnimation: WithAnimation = {
135
+ const defaultWithAnimation: WithTimingAnimation = {
136
136
  type: 'timing',
137
137
  config: { duration, easing: Easing.easeOutQuart },
138
138
  };
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+
3
+ export function useCheckMounted() {
4
+ const mounted = React.useRef(false);
5
+
6
+ React.useEffect(() => {
7
+ mounted.current = true;
8
+ return () => {
9
+ mounted.current = false;
10
+ };
11
+ }, []);
12
+
13
+ return mounted;
14
+ }
@@ -7,6 +7,7 @@ import Animated, {
7
7
  useAnimatedStyle,
8
8
  useDerivedValue,
9
9
  } from 'react-native-reanimated';
10
+ import { useCheckMounted } from 'src/hooks/useCheckMounted';
10
11
  import { IOpts, useOffsetX } from '../hooks/useOffsetX';
11
12
  import type { IVisibleRanges } from '../hooks/useVisibleRanges';
12
13
  import { LazyView } from '../LazyView';
@@ -24,6 +25,7 @@ export const BaseLayout: React.FC<{
24
25
  animationValue: Animated.SharedValue<number>;
25
26
  }) => React.ReactElement;
26
27
  }> = (props) => {
28
+ const mounted = useCheckMounted();
27
29
  const { handlerOffsetX, index, children, visibleRanges, animationStyle } =
28
30
  props;
29
31
 
@@ -75,12 +77,13 @@ export const BaseLayout: React.FC<{
75
77
 
76
78
  const updateView = React.useCallback(
77
79
  (negativeRange: number[], positiveRange: number[]) => {
78
- setShouldUpdate(
79
- (index >= negativeRange[0] && index <= negativeRange[1]) ||
80
- (index >= positiveRange[0] && index <= positiveRange[1])
81
- );
80
+ mounted.current &&
81
+ setShouldUpdate(
82
+ (index >= negativeRange[0] && index <= negativeRange[1]) ||
83
+ (index >= positiveRange[0] && index <= positiveRange[1])
84
+ );
82
85
  },
83
- [index]
86
+ [index, mounted]
84
87
  );
85
88
 
86
89
  useAnimatedReaction(
@@ -10,22 +10,24 @@ import type { ComputedDirectionTypes } from 'src/types';
10
10
  import { useOffsetX } from '../hooks/useOffsetX';
11
11
  import type { IVisibleRanges } from '../hooks/useVisibleRanges';
12
12
  import { LazyView } from '../LazyView';
13
+ import type { ILayoutConfig } from './parallax';
13
14
 
14
15
  export const ParallaxLayout: React.FC<
15
- ComputedDirectionTypes<{
16
- loop?: boolean;
17
- parallaxScrollingOffset?: number;
18
- parallaxScrollingScale?: number;
19
- handlerOffsetX: Animated.SharedValue<number>;
20
- index: number;
21
- data: unknown[];
22
- visibleRanges: IVisibleRanges;
23
- }>
16
+ ComputedDirectionTypes<
17
+ {
18
+ loop?: boolean;
19
+ handlerOffsetX: Animated.SharedValue<number>;
20
+ index: number;
21
+ data: unknown[];
22
+ visibleRanges: IVisibleRanges;
23
+ } & ILayoutConfig
24
+ >
24
25
  > = (props) => {
25
26
  const {
26
27
  handlerOffsetX,
27
28
  parallaxScrollingOffset = 100,
28
29
  parallaxScrollingScale = 0.8,
30
+ parallaxAdjacentItemScale = Math.pow(parallaxScrollingScale, 2),
29
31
  index,
30
32
  width,
31
33
  height,
@@ -76,9 +78,9 @@ export const ParallaxLayout: React.FC<
76
78
  value,
77
79
  [-1, 0, 1],
78
80
  [
79
- Math.pow(parallaxScrollingScale, 2),
81
+ parallaxAdjacentItemScale,
80
82
  parallaxScrollingScale,
81
- Math.pow(parallaxScrollingScale, 2),
83
+ parallaxAdjacentItemScale,
82
84
  ],
83
85
  Extrapolate.CLAMP
84
86
  );