react-native-reanimated-carousel 1.0.10 → 1.0.11
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/lib/commonjs/CarouselItem.js +1 -2
- package/lib/commonjs/CarouselItem.js.map +1 -1
- package/lib/commonjs/layouts/ParallaxLayout.js +1 -2
- package/lib/commonjs/layouts/ParallaxLayout.js.map +1 -1
- package/lib/module/CarouselItem.js +2 -2
- package/lib/module/CarouselItem.js.map +1 -1
- package/lib/module/layouts/ParallaxLayout.js +2 -2
- package/lib/module/layouts/ParallaxLayout.js.map +1 -1
- package/package.json +1 -1
- package/src/CarouselItem.tsx +6 -2
- package/src/layouts/ParallaxLayout.tsx +2 -1
|
@@ -61,10 +61,9 @@ const CarouselItem = props => {
|
|
|
61
61
|
setShouldUpdate(index >= negativeRange[0] && index <= negativeRange[1] || index >= positiveRange[0] && index <= positiveRange[1]);
|
|
62
62
|
}, [index]);
|
|
63
63
|
|
|
64
|
-
_reactNativeReanimated.
|
|
64
|
+
(0, _reactNativeReanimated.useAnimatedReaction)(() => visibleRanges.value, () => {
|
|
65
65
|
(0, _reactNativeReanimated.runOnJS)(updateView)(visibleRanges.value.negativeRange, visibleRanges.value.positiveRange);
|
|
66
66
|
}, [visibleRanges.value]);
|
|
67
|
-
|
|
68
67
|
return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
|
|
69
68
|
style: [offsetXStyle, {
|
|
70
69
|
width: width || '100%',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CarouselItem.tsx"],"names":["CarouselItem","props","handlerOffsetX","index","children","width","height","loop","data","visibleRanges","vertical","shouldUpdate","setShouldUpdate","React","useState","x","size","offsetXStyle","transform","translateY","value","translateX","updateView","useCallback","negativeRange","positiveRange"
|
|
1
|
+
{"version":3,"sources":["CarouselItem.tsx"],"names":["CarouselItem","props","handlerOffsetX","index","children","width","height","loop","data","visibleRanges","vertical","shouldUpdate","setShouldUpdate","React","useState","x","size","offsetXStyle","transform","translateY","value","translateX","updateView","useCallback","negativeRange","positiveRange"],"mappings":";;;;;;;AAAA;;AACA;;AAKA;;AAEA;;;;;;;;AAEO,MAAMA,YASX,GAAIC,KAAD,IAAW;AACZ,QAAM;AACFC,IAAAA,cADE;AAEFC,IAAAA,KAFE;AAGFC,IAAAA,QAHE;AAIFC,IAAAA,KAAK,GAAG,CAJN;AAKFC,IAAAA,MAAM,GAAG,CALP;AAMFC,IAAAA,IANE;AAOFC,IAAAA,IAPE;AAQFC,IAAAA,aARE;AASFC,IAAAA;AATE,MAUFT,KAVJ;;AAYA,QAAM,CAACU,YAAD,EAAeC,eAAf,IAAkCC,eAAMC,QAAN,CAAe,KAAf,CAAxC;;AAEA,QAAMC,CAAC,GAAG,4BACN;AACIb,IAAAA,cADJ;AAEIC,IAAAA,KAFJ;AAGIa,IAAAA,IAAI,EAAEN,QAAQ,GAAGJ,MAAH,GAAYD,KAH9B;AAIIG,IAAAA,IAJJ;AAKID,IAAAA;AALJ,GADM,EAQNE,aARM,CAAV;AAWA,QAAMQ,YAAY,GAAG,6CAAiB,MAAM;AACxC,QAAIP,QAAJ,EAAc;AACV,aAAO;AAAEQ,QAAAA,SAAS,EAAE,CAAC;AAAEC,UAAAA,UAAU,EAAEJ,CAAC,CAACK,KAAF,GAAUjB,KAAK,GAAGG;AAAhC,SAAD;AAAb,OAAP;AACH;;AACD,WAAO;AACHY,MAAAA,SAAS,EAAE,CAAC;AAAEG,QAAAA,UAAU,EAAEN,CAAC,CAACK,KAAF,GAAUjB,KAAK,GAAGE;AAAhC,OAAD;AADR,KAAP;AAGH,GAPoB,EAOlB,CAACK,QAAD,CAPkB,CAArB;;AASA,QAAMY,UAAU,GAAGT,eAAMU,WAAN,CACf,CAACC,aAAD,EAA0BC,aAA1B,KAAsD;AAClDb,IAAAA,eAAe,CACVT,KAAK,IAAIqB,aAAa,CAAC,CAAD,CAAtB,IAA6BrB,KAAK,IAAIqB,aAAa,CAAC,CAAD,CAApD,IACKrB,KAAK,IAAIsB,aAAa,CAAC,CAAD,CAAtB,IAA6BtB,KAAK,IAAIsB,aAAa,CAAC,CAAD,CAF7C,CAAf;AAIH,GANc,EAOf,CAACtB,KAAD,CAPe,CAAnB;;AAUA,kDACI,MAAMM,aAAa,CAACW,KADxB,EAEI,MAAM;AACF,wCAAQE,UAAR,EACIb,aAAa,CAACW,KAAd,CAAoBI,aADxB,EAEIf,aAAa,CAACW,KAAd,CAAoBK,aAFxB;AAIH,GAPL,EAQI,CAAChB,aAAa,CAACW,KAAf,CARJ;AAWA,sBACI,6BAAC,8BAAD,CAAU,IAAV;AACI,IAAA,KAAK,EAAE,CACHH,YADG,EAEH;AACIZ,MAAAA,KAAK,EAAEA,KAAK,IAAI,MADpB;AAEIC,MAAAA,MAAM,EAAEA,MAAM,IAAI;AAFtB,KAFG;AADX,kBASI,6BAAC,kBAAD;AAAU,IAAA,YAAY,EAAEK;AAAxB,KAAuCP,QAAvC,CATJ,CADJ;AAaH,CA9EM","sourcesContent":["import React from 'react';\nimport Animated, {\n runOnJS,\n useAnimatedReaction,\n useAnimatedStyle,\n} from 'react-native-reanimated';\nimport { useOffsetX } from './hooks/useOffsetX';\nimport type { IVisibleRanges } from './hooks/useVisibleRanges';\nimport { LazyView } from './LazyView';\n\nexport const CarouselItem: React.FC<{\n loop?: boolean;\n index: number;\n handlerOffsetX: Animated.SharedValue<number>;\n width?: number;\n height?: number;\n data: unknown[];\n visibleRanges: IVisibleRanges;\n vertical?: boolean;\n}> = (props) => {\n const {\n handlerOffsetX,\n index,\n children,\n width = 0,\n height = 0,\n loop,\n data,\n visibleRanges,\n vertical,\n } = props;\n\n const [shouldUpdate, setShouldUpdate] = React.useState(false);\n\n const x = useOffsetX(\n {\n handlerOffsetX,\n index,\n size: vertical ? height : width,\n data,\n loop,\n },\n visibleRanges\n );\n\n const offsetXStyle = useAnimatedStyle(() => {\n if (vertical) {\n return { transform: [{ translateY: x.value - index * height }] };\n }\n return {\n transform: [{ translateX: x.value - index * width }],\n };\n }, [vertical]);\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 offsetXStyle,\n {\n width: width || '100%',\n height: height || '100%',\n },\n ]}\n >\n <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>\n </Animated.View>\n );\n};\n"]}
|
|
@@ -87,10 +87,9 @@ const ParallaxLayout = props => {
|
|
|
87
87
|
setShouldUpdate(index >= negativeRange[0] && index <= negativeRange[1] || index >= positiveRange[0] && index <= positiveRange[1]);
|
|
88
88
|
}, [index]);
|
|
89
89
|
|
|
90
|
-
_reactNativeReanimated.
|
|
90
|
+
(0, _reactNativeReanimated.useAnimatedReaction)(() => visibleRanges.value, () => {
|
|
91
91
|
(0, _reactNativeReanimated.runOnJS)(updateView)(visibleRanges.value.negativeRange, visibleRanges.value.positiveRange);
|
|
92
92
|
}, [visibleRanges.value]);
|
|
93
|
-
|
|
94
93
|
return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
|
|
95
94
|
style: [layoutStyle, styles.container, offsetXStyle]
|
|
96
95
|
}, /*#__PURE__*/_react.default.createElement(_LazyView.LazyView, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ParallaxLayout.tsx"],"names":["ParallaxLayout","props","handlerOffsetX","parallaxScrollingOffset","parallaxScrollingScale","index","width","height","loop","data","children","visibleRanges","vertical","shouldUpdate","setShouldUpdate","React","useState","size","useMemo","layoutStyle","x","offsetXStyle","baseTranslateX","value","padding","extraOffset","zIndex","Extrapolate","CLAMP","scale","relatedTranslateX","transform","translateY","translateX","updateView","useCallback","negativeRange","positiveRange","
|
|
1
|
+
{"version":3,"sources":["ParallaxLayout.tsx"],"names":["ParallaxLayout","props","handlerOffsetX","parallaxScrollingOffset","parallaxScrollingScale","index","width","height","loop","data","children","visibleRanges","vertical","shouldUpdate","setShouldUpdate","React","useState","size","useMemo","layoutStyle","x","offsetXStyle","baseTranslateX","value","padding","extraOffset","zIndex","Extrapolate","CLAMP","scale","relatedTranslateX","transform","translateY","translateX","updateView","useCallback","negativeRange","positiveRange","styles","container","StyleSheet","create","alignSelf"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\nimport Animated, {\n Extrapolate,\n interpolate,\n runOnJS,\n useAnimatedReaction,\n useAnimatedStyle,\n} from 'react-native-reanimated';\nimport { useOffsetX } from '../hooks/useOffsetX';\nimport type { IVisibleRanges } from '../hooks/useVisibleRanges';\nimport { LazyView } from '../LazyView';\n\nexport const ParallaxLayout: React.FC<{\n loop?: boolean;\n parallaxScrollingOffset?: number;\n parallaxScrollingScale?: number;\n handlerOffsetX: Animated.SharedValue<number>;\n index: number;\n width: number;\n height: number;\n data: unknown[];\n visibleRanges: IVisibleRanges;\n vertical?: boolean;\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 = React.useMemo(\n () => (vertical ? height : width),\n [vertical, width, height]\n );\n\n const layoutStyle = React.useMemo(() => {\n return {\n width: !vertical\n ? width * parallaxScrollingScale\n : `${100 * parallaxScrollingScale}%`,\n height: vertical\n ? height * parallaxScrollingScale\n : `${100 * parallaxScrollingScale}%`,\n };\n }, [vertical, parallaxScrollingScale, width, height]);\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 baseTranslateX = x.value - index * size;\n const padding = (1 - parallaxScrollingScale) * size;\n const extraOffset = index * padding + padding / 2;\n\n const zIndex = interpolate(\n x.value,\n [-size, 0, size],\n [0, size, 0],\n Extrapolate.CLAMP\n );\n const scale = interpolate(\n x.value,\n [-size, 0, size],\n [parallaxScrollingScale, 1, parallaxScrollingScale],\n Extrapolate.CLAMP\n );\n const relatedTranslateX = interpolate(\n x.value,\n [-size, 0, size],\n [parallaxScrollingOffset, 0, -parallaxScrollingOffset],\n Extrapolate.CLAMP\n );\n\n if (vertical) {\n return {\n transform: [\n {\n translateY:\n baseTranslateX + extraOffset + relatedTranslateX,\n },\n { scale },\n ],\n zIndex,\n };\n }\n\n return {\n transform: [\n {\n translateX:\n baseTranslateX + extraOffset + relatedTranslateX,\n },\n { scale },\n ],\n zIndex,\n };\n }, [loop, vertical]);\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 style={[layoutStyle, styles.container, offsetXStyle]}>\n <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>\n </Animated.View>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n alignSelf: 'center',\n },\n});\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import Animated, { runOnJS, useAnimatedStyle } from 'react-native-reanimated';
|
|
2
|
+
import Animated, { runOnJS, useAnimatedReaction, useAnimatedStyle } from 'react-native-reanimated';
|
|
3
3
|
import { useOffsetX } from './hooks/useOffsetX';
|
|
4
4
|
import { LazyView } from './LazyView';
|
|
5
5
|
export const CarouselItem = props => {
|
|
@@ -40,7 +40,7 @@ export const CarouselItem = props => {
|
|
|
40
40
|
const updateView = React.useCallback((negativeRange, positiveRange) => {
|
|
41
41
|
setShouldUpdate(index >= negativeRange[0] && index <= negativeRange[1] || index >= positiveRange[0] && index <= positiveRange[1]);
|
|
42
42
|
}, [index]);
|
|
43
|
-
|
|
43
|
+
useAnimatedReaction(() => visibleRanges.value, () => {
|
|
44
44
|
runOnJS(updateView)(visibleRanges.value.negativeRange, visibleRanges.value.positiveRange);
|
|
45
45
|
}, [visibleRanges.value]);
|
|
46
46
|
return /*#__PURE__*/React.createElement(Animated.View, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CarouselItem.tsx"],"names":["React","Animated","runOnJS","useAnimatedStyle","useOffsetX","LazyView","CarouselItem","props","handlerOffsetX","index","children","width","height","loop","data","visibleRanges","vertical","shouldUpdate","setShouldUpdate","useState","x","size","offsetXStyle","transform","translateY","value","translateX","updateView","useCallback","negativeRange","positiveRange"
|
|
1
|
+
{"version":3,"sources":["CarouselItem.tsx"],"names":["React","Animated","runOnJS","useAnimatedReaction","useAnimatedStyle","useOffsetX","LazyView","CarouselItem","props","handlerOffsetX","index","children","width","height","loop","data","visibleRanges","vertical","shouldUpdate","setShouldUpdate","useState","x","size","offsetXStyle","transform","translateY","value","translateX","updateView","useCallback","negativeRange","positiveRange"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,QAAP,IACIC,OADJ,EAEIC,mBAFJ,EAGIC,gBAHJ,QAIO,yBAJP;AAKA,SAASC,UAAT,QAA2B,oBAA3B;AAEA,SAASC,QAAT,QAAyB,YAAzB;AAEA,OAAO,MAAMC,YASX,GAAIC,KAAD,IAAW;AACZ,QAAM;AACFC,IAAAA,cADE;AAEFC,IAAAA,KAFE;AAGFC,IAAAA,QAHE;AAIFC,IAAAA,KAAK,GAAG,CAJN;AAKFC,IAAAA,MAAM,GAAG,CALP;AAMFC,IAAAA,IANE;AAOFC,IAAAA,IAPE;AAQFC,IAAAA,aARE;AASFC,IAAAA;AATE,MAUFT,KAVJ;AAYA,QAAM,CAACU,YAAD,EAAeC,eAAf,IAAkCnB,KAAK,CAACoB,QAAN,CAAe,KAAf,CAAxC;AAEA,QAAMC,CAAC,GAAGhB,UAAU,CAChB;AACII,IAAAA,cADJ;AAEIC,IAAAA,KAFJ;AAGIY,IAAAA,IAAI,EAAEL,QAAQ,GAAGJ,MAAH,GAAYD,KAH9B;AAIIG,IAAAA,IAJJ;AAKID,IAAAA;AALJ,GADgB,EAQhBE,aARgB,CAApB;AAWA,QAAMO,YAAY,GAAGnB,gBAAgB,CAAC,MAAM;AACxC,QAAIa,QAAJ,EAAc;AACV,aAAO;AAAEO,QAAAA,SAAS,EAAE,CAAC;AAAEC,UAAAA,UAAU,EAAEJ,CAAC,CAACK,KAAF,GAAUhB,KAAK,GAAGG;AAAhC,SAAD;AAAb,OAAP;AACH;;AACD,WAAO;AACHW,MAAAA,SAAS,EAAE,CAAC;AAAEG,QAAAA,UAAU,EAAEN,CAAC,CAACK,KAAF,GAAUhB,KAAK,GAAGE;AAAhC,OAAD;AADR,KAAP;AAGH,GAPoC,EAOlC,CAACK,QAAD,CAPkC,CAArC;AASA,QAAMW,UAAU,GAAG5B,KAAK,CAAC6B,WAAN,CACf,CAACC,aAAD,EAA0BC,aAA1B,KAAsD;AAClDZ,IAAAA,eAAe,CACVT,KAAK,IAAIoB,aAAa,CAAC,CAAD,CAAtB,IAA6BpB,KAAK,IAAIoB,aAAa,CAAC,CAAD,CAApD,IACKpB,KAAK,IAAIqB,aAAa,CAAC,CAAD,CAAtB,IAA6BrB,KAAK,IAAIqB,aAAa,CAAC,CAAD,CAF7C,CAAf;AAIH,GANc,EAOf,CAACrB,KAAD,CAPe,CAAnB;AAUAP,EAAAA,mBAAmB,CACf,MAAMa,aAAa,CAACU,KADL,EAEf,MAAM;AACFxB,IAAAA,OAAO,CAAC0B,UAAD,CAAP,CACIZ,aAAa,CAACU,KAAd,CAAoBI,aADxB,EAEId,aAAa,CAACU,KAAd,CAAoBK,aAFxB;AAIH,GAPc,EAQf,CAACf,aAAa,CAACU,KAAf,CARe,CAAnB;AAWA,sBACI,oBAAC,QAAD,CAAU,IAAV;AACI,IAAA,KAAK,EAAE,CACHH,YADG,EAEH;AACIX,MAAAA,KAAK,EAAEA,KAAK,IAAI,MADpB;AAEIC,MAAAA,MAAM,EAAEA,MAAM,IAAI;AAFtB,KAFG;AADX,kBASI,oBAAC,QAAD;AAAU,IAAA,YAAY,EAAEK;AAAxB,KAAuCP,QAAvC,CATJ,CADJ;AAaH,CA9EM","sourcesContent":["import React from 'react';\nimport Animated, {\n runOnJS,\n useAnimatedReaction,\n useAnimatedStyle,\n} from 'react-native-reanimated';\nimport { useOffsetX } from './hooks/useOffsetX';\nimport type { IVisibleRanges } from './hooks/useVisibleRanges';\nimport { LazyView } from './LazyView';\n\nexport const CarouselItem: React.FC<{\n loop?: boolean;\n index: number;\n handlerOffsetX: Animated.SharedValue<number>;\n width?: number;\n height?: number;\n data: unknown[];\n visibleRanges: IVisibleRanges;\n vertical?: boolean;\n}> = (props) => {\n const {\n handlerOffsetX,\n index,\n children,\n width = 0,\n height = 0,\n loop,\n data,\n visibleRanges,\n vertical,\n } = props;\n\n const [shouldUpdate, setShouldUpdate] = React.useState(false);\n\n const x = useOffsetX(\n {\n handlerOffsetX,\n index,\n size: vertical ? height : width,\n data,\n loop,\n },\n visibleRanges\n );\n\n const offsetXStyle = useAnimatedStyle(() => {\n if (vertical) {\n return { transform: [{ translateY: x.value - index * height }] };\n }\n return {\n transform: [{ translateX: x.value - index * width }],\n };\n }, [vertical]);\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 offsetXStyle,\n {\n width: width || '100%',\n height: height || '100%',\n },\n ]}\n >\n <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>\n </Animated.View>\n );\n};\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { StyleSheet } from 'react-native';
|
|
3
|
-
import Animated, { Extrapolate, interpolate, runOnJS, useAnimatedStyle } from 'react-native-reanimated';
|
|
3
|
+
import Animated, { Extrapolate, interpolate, runOnJS, useAnimatedReaction, useAnimatedStyle } from 'react-native-reanimated';
|
|
4
4
|
import { useOffsetX } from '../hooks/useOffsetX';
|
|
5
5
|
import { LazyView } from '../LazyView';
|
|
6
6
|
export const ParallaxLayout = props => {
|
|
@@ -63,7 +63,7 @@ export const ParallaxLayout = props => {
|
|
|
63
63
|
const updateView = React.useCallback((negativeRange, positiveRange) => {
|
|
64
64
|
setShouldUpdate(index >= negativeRange[0] && index <= negativeRange[1] || index >= positiveRange[0] && index <= positiveRange[1]);
|
|
65
65
|
}, [index]);
|
|
66
|
-
|
|
66
|
+
useAnimatedReaction(() => visibleRanges.value, () => {
|
|
67
67
|
runOnJS(updateView)(visibleRanges.value.negativeRange, visibleRanges.value.positiveRange);
|
|
68
68
|
}, [visibleRanges.value]);
|
|
69
69
|
return /*#__PURE__*/React.createElement(Animated.View, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ParallaxLayout.tsx"],"names":["React","StyleSheet","Animated","Extrapolate","interpolate","runOnJS","useAnimatedStyle","useOffsetX","LazyView","ParallaxLayout","props","handlerOffsetX","parallaxScrollingOffset","parallaxScrollingScale","index","width","height","loop","data","children","visibleRanges","vertical","shouldUpdate","setShouldUpdate","useState","size","useMemo","layoutStyle","x","offsetXStyle","baseTranslateX","value","padding","extraOffset","zIndex","CLAMP","scale","relatedTranslateX","transform","translateY","translateX","updateView","useCallback","negativeRange","positiveRange","
|
|
1
|
+
{"version":3,"sources":["ParallaxLayout.tsx"],"names":["React","StyleSheet","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","useMemo","layoutStyle","x","offsetXStyle","baseTranslateX","value","padding","extraOffset","zIndex","CLAMP","scale","relatedTranslateX","transform","translateY","translateX","updateView","useCallback","negativeRange","positiveRange","styles","container","create","alignSelf"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\nimport Animated, {\n Extrapolate,\n interpolate,\n runOnJS,\n useAnimatedReaction,\n useAnimatedStyle,\n} from 'react-native-reanimated';\nimport { useOffsetX } from '../hooks/useOffsetX';\nimport type { IVisibleRanges } from '../hooks/useVisibleRanges';\nimport { LazyView } from '../LazyView';\n\nexport const ParallaxLayout: React.FC<{\n loop?: boolean;\n parallaxScrollingOffset?: number;\n parallaxScrollingScale?: number;\n handlerOffsetX: Animated.SharedValue<number>;\n index: number;\n width: number;\n height: number;\n data: unknown[];\n visibleRanges: IVisibleRanges;\n vertical?: boolean;\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 = React.useMemo(\n () => (vertical ? height : width),\n [vertical, width, height]\n );\n\n const layoutStyle = React.useMemo(() => {\n return {\n width: !vertical\n ? width * parallaxScrollingScale\n : `${100 * parallaxScrollingScale}%`,\n height: vertical\n ? height * parallaxScrollingScale\n : `${100 * parallaxScrollingScale}%`,\n };\n }, [vertical, parallaxScrollingScale, width, height]);\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 baseTranslateX = x.value - index * size;\n const padding = (1 - parallaxScrollingScale) * size;\n const extraOffset = index * padding + padding / 2;\n\n const zIndex = interpolate(\n x.value,\n [-size, 0, size],\n [0, size, 0],\n Extrapolate.CLAMP\n );\n const scale = interpolate(\n x.value,\n [-size, 0, size],\n [parallaxScrollingScale, 1, parallaxScrollingScale],\n Extrapolate.CLAMP\n );\n const relatedTranslateX = interpolate(\n x.value,\n [-size, 0, size],\n [parallaxScrollingOffset, 0, -parallaxScrollingOffset],\n Extrapolate.CLAMP\n );\n\n if (vertical) {\n return {\n transform: [\n {\n translateY:\n baseTranslateX + extraOffset + relatedTranslateX,\n },\n { scale },\n ],\n zIndex,\n };\n }\n\n return {\n transform: [\n {\n translateX:\n baseTranslateX + extraOffset + relatedTranslateX,\n },\n { scale },\n ],\n zIndex,\n };\n }, [loop, vertical]);\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 style={[layoutStyle, styles.container, offsetXStyle]}>\n <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>\n </Animated.View>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n alignSelf: 'center',\n },\n});\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-reanimated-carousel",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.11",
|
|
4
4
|
"description": "Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.",
|
|
5
5
|
"main": "lib/commonjs/index",
|
|
6
6
|
"module": "lib/module/index",
|
package/src/CarouselItem.tsx
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import Animated, {
|
|
2
|
+
import Animated, {
|
|
3
|
+
runOnJS,
|
|
4
|
+
useAnimatedReaction,
|
|
5
|
+
useAnimatedStyle,
|
|
6
|
+
} from 'react-native-reanimated';
|
|
3
7
|
import { useOffsetX } from './hooks/useOffsetX';
|
|
4
8
|
import type { IVisibleRanges } from './hooks/useVisibleRanges';
|
|
5
9
|
import { LazyView } from './LazyView';
|
|
@@ -58,7 +62,7 @@ export const CarouselItem: React.FC<{
|
|
|
58
62
|
[index]
|
|
59
63
|
);
|
|
60
64
|
|
|
61
|
-
|
|
65
|
+
useAnimatedReaction(
|
|
62
66
|
() => visibleRanges.value,
|
|
63
67
|
() => {
|
|
64
68
|
runOnJS(updateView)(
|
|
@@ -4,6 +4,7 @@ import Animated, {
|
|
|
4
4
|
Extrapolate,
|
|
5
5
|
interpolate,
|
|
6
6
|
runOnJS,
|
|
7
|
+
useAnimatedReaction,
|
|
7
8
|
useAnimatedStyle,
|
|
8
9
|
} from 'react-native-reanimated';
|
|
9
10
|
import { useOffsetX } from '../hooks/useOffsetX';
|
|
@@ -124,7 +125,7 @@ export const ParallaxLayout: React.FC<{
|
|
|
124
125
|
[index]
|
|
125
126
|
);
|
|
126
127
|
|
|
127
|
-
|
|
128
|
+
useAnimatedReaction(
|
|
128
129
|
() => visibleRanges.value,
|
|
129
130
|
() => {
|
|
130
131
|
runOnJS(updateView)(
|