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.
- package/README.md +8 -0
- package/lib/commonjs/Carousel.js +1 -1
- package/lib/commonjs/Carousel.js.map +1 -1
- package/lib/commonjs/ScrollViewGesture.js +1 -1
- package/lib/commonjs/ScrollViewGesture.js.map +1 -1
- package/lib/commonjs/constants/index.js.map +1 -1
- package/lib/commonjs/hooks/useCarouselController.js.map +1 -1
- package/lib/commonjs/hooks/useCheckMounted.js +2 -0
- package/lib/commonjs/hooks/useCheckMounted.js.map +1 -0
- package/lib/commonjs/hooks/useInitProps.js +1 -1
- package/lib/commonjs/hooks/useInitProps.js.map +1 -1
- package/lib/commonjs/layouts/BaseLayout.js +1 -1
- package/lib/commonjs/layouts/BaseLayout.js.map +1 -1
- package/lib/commonjs/layouts/ParallaxLayout.js +1 -1
- package/lib/commonjs/layouts/ParallaxLayout.js.map +1 -1
- package/lib/commonjs/layouts/parallax.js +1 -1
- package/lib/commonjs/layouts/parallax.js.map +1 -1
- package/lib/commonjs/layouts/stack.js +1 -1
- package/lib/commonjs/layouts/stack.js.map +1 -1
- package/lib/module/Carousel.js +10 -7
- package/lib/module/Carousel.js.map +1 -1
- package/lib/module/ScrollViewGesture.js +6 -1
- package/lib/module/ScrollViewGesture.js.map +1 -1
- package/lib/module/constants/index.js.map +1 -1
- package/lib/module/hooks/useCarouselController.js +8 -4
- package/lib/module/hooks/useCarouselController.js.map +1 -1
- package/lib/module/hooks/useCheckMounted.js +12 -0
- package/lib/module/hooks/useCheckMounted.js.map +1 -0
- package/lib/module/layouts/BaseLayout.js +4 -2
- package/lib/module/layouts/BaseLayout.js.map +1 -1
- package/lib/module/layouts/ParallaxLayout.js +2 -1
- package/lib/module/layouts/ParallaxLayout.js.map +1 -1
- package/lib/module/layouts/parallax.js +5 -3
- package/lib/module/layouts/parallax.js.map +1 -1
- package/lib/module/layouts/stack.js +7 -3
- package/lib/module/layouts/stack.js.map +1 -1
- package/lib/module/utils/log.js +2 -2
- package/lib/module/utils/log.js.map +1 -1
- package/lib/typescript/constants/index.d.ts +2 -1
- package/lib/typescript/hooks/useCheckMounted.d.ts +2 -0
- package/lib/typescript/layouts/ParallaxLayout.d.ts +2 -3
- package/lib/typescript/layouts/parallax.d.ts +8 -3
- package/lib/typescript/types.d.ts +4 -2
- package/package.json +4 -2
- package/src/ScrollViewGesture.tsx +8 -3
- package/src/constants/index.ts +7 -2
- package/src/hooks/useCarouselController.tsx +2 -2
- package/src/hooks/useCheckMounted.ts +14 -0
- package/src/layouts/BaseLayout.tsx +8 -5
- package/src/layouts/ParallaxLayout.tsx +13 -11
- package/src/layouts/parallax.ts +15 -7
- 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":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,QAAP,IAEIC,OAFJ,EAGIC,mBAHJ,EAIIC,gBAJJ,EAKIC,eALJ,QAMO,yBANP;AAOA,SAAgBC,UAAhB,QAAkC,qBAAlC;AAEA,SAASC,QAAT,QAAyB,aAAzB;AACA,SAASC,GAAT,QAAoB,UAApB;AAKA,OAAO,MAAMC,UAQX,GAAIC,KAAD,IAAW;AACZ,QAAM;
|
|
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], [
|
|
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","
|
|
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
|
|
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], [
|
|
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","
|
|
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(
|
|
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(
|
|
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(
|
|
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"]}
|
package/lib/module/utils/log.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["log.ts"],"names":["log","
|
|
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"]}
|
|
@@ -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
|
-
*
|
|
8
|
+
* control prev/next item offset.
|
|
9
9
|
* @default 100
|
|
10
10
|
*/
|
|
11
11
|
parallaxScrollingOffset?: number;
|
|
12
12
|
/**
|
|
13
|
-
*
|
|
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
|
|
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.
|
|
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.
|
|
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 {
|
|
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:
|
|
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
|
-
|
|
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
|
package/src/constants/index.ts
CHANGED
|
@@ -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(
|
|
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
|
-
|
|
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:
|
|
135
|
+
const defaultWithAnimation: WithTimingAnimation = {
|
|
136
136
|
type: 'timing',
|
|
137
137
|
config: { duration, easing: Easing.easeOutQuart },
|
|
138
138
|
};
|
|
@@ -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
|
-
|
|
79
|
-
(
|
|
80
|
-
(index >=
|
|
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
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
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
|
-
|
|
81
|
+
parallaxAdjacentItemScale,
|
|
80
82
|
parallaxScrollingScale,
|
|
81
|
-
|
|
83
|
+
parallaxAdjacentItemScale,
|
|
82
84
|
],
|
|
83
85
|
Extrapolate.CLAMP
|
|
84
86
|
);
|