react-native-reanimated-carousel
Version:
Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.
2 lines • 9.01 kB
JavaScript
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ParallaxLayout=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireDefault(require("react"));var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _useOffsetX=require("../hooks/useOffsetX");var _LazyView=require("../LazyView");var _jsxRuntime=require("react/jsx-runtime");var _this=this,_jsxFileName="/home/runner/work/react-native-reanimated-carousel/react-native-reanimated-carousel/src/layouts/ParallaxLayout.tsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var _worklet_2396750619736_init_data={code:"function anonymous() {\n const {\n x,\n size,\n interpolate,\n parallaxScrollingOffset,\n Extrapolate,\n parallaxAdjacentItemScale,\n parallaxScrollingScale,\n vertical\n } = this._closure;\n const value = x.value / size;\n const translate = interpolate(value, [-1, 0, 1], [-size + parallaxScrollingOffset, 0, size - parallaxScrollingOffset], Extrapolate.EXTEND);\n const zIndex = interpolate(value, [-1, 0, 1], [0, size, 0], Extrapolate.CLAMP);\n const scale = interpolate(value, [-1, 0, 1], [parallaxAdjacentItemScale, parallaxScrollingScale, parallaxAdjacentItemScale], Extrapolate.CLAMP);\n return {\n transform: [vertical ? {\n translateY: translate\n } : {\n translateX: translate\n }, {\n scale: scale\n }],\n zIndex: zIndex\n };\n}",location:"/home/runner/work/react-native-reanimated-carousel/react-native-reanimated-carousel/src/layouts/ParallaxLayout.tsx",sourceMap:"{\"version\":3,\"names\":[\"anonymous\",\"x\",\"size\",\"interpolate\",\"parallaxScrollingOffset\",\"Extrapolate\",\"parallaxAdjacentItemScale\",\"parallaxScrollingScale\",\"vertical\",\"_closure\",\"value\",\"translate\",\"EXTEND\",\"zIndex\",\"CLAMP\",\"scale\",\"transform\",\"translateY\",\"translateX\"],\"sources\":[\"/home/runner/work/react-native-reanimated-carousel/react-native-reanimated-carousel/src/layouts/ParallaxLayout.tsx\"],\"mappings\":\"AAwDwC,SAAAA,SAAMA,CAAA;EAAA;IAAAC,CAAA;IAAAC,IAAA;IAAAC,WAAA;IAAAC,uBAAA;IAAAC,WAAA;IAAAC,yBAAA;IAAAC,sBAAA;IAAAC;EAAA,SAAAC,QAAA;EAC1C,MAAMC,KAAK,GAAGT,CAAC,CAACS,KAAK,GAAGR,IAAI;EAE5B,MAAMS,SAAS,GAAGR,WAAW,CAC3BO,KAAK,EACL,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EACV,CACE,CAACR,IAAI,GAAGE,uBAAuB,EAC/B,CAAC,EACDF,IAAI,GAAGE,uBAAuB,CAC/B,EACDC,WAAW,CAACO,MACd,CAAC;EAED,MAAMC,MAAM,GAAGV,WAAW,CACxBO,KAAK,EACL,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EACV,CAAC,CAAC,EAAER,IAAI,EAAE,CAAC,CAAC,EACZG,WAAW,CAACS,KACd,CAAC;EAED,MAAMC,KAAK,GAAGZ,WAAW,CACvBO,KAAK,EACL,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EACV,CACEJ,yBAAyB,EACzBC,sBAAsB,EACtBD,yBAAyB,CAC1B,EACDD,WAAW,CAACS,KACd,CAAC;EAED,OAAO;IACLE,SAAS,EAAE,CACTR,QAAQ,GACJ;MACAS,UAAU,EAAEN;IACd,CAAC,GACC;MACAO,UAAU,EAAEP;IACd,CAAC,EACH;MACEI,KAAA,EAAAA;IACF,CAAC,CACF;IACDF,MAAA,EAAAA;EACF,CAAC;AACH\"}"};var _worklet_11113070436332_init_data={code:"function anonymous() {\n const {\n visibleRanges\n } = this._closure;\n return visibleRanges.value;\n}",location:"/home/runner/work/react-native-reanimated-carousel/react-native-reanimated-carousel/src/layouts/ParallaxLayout.tsx",sourceMap:"{\"version\":3,\"names\":[\"anonymous\",\"visibleRanges\",\"_closure\",\"value\"],\"sources\":[\"/home/runner/work/react-native-reanimated-carousel/react-native-reanimated-carousel/src/layouts/ParallaxLayout.tsx\"],\"mappings\":\"AAoHI,SAAAA,UAAA;EAAA;IAAAC;EAAA,SAAAC,QAAA;EAAA,OAAMD,aAAc,CAAAE,KAAA;AAAA\"}"};var _worklet_15128277149381_init_data={code:"function anonymous() {\n const {\n runOnJS,\n updateView,\n visibleRanges\n } = this._closure;\n runOnJS(updateView)(visibleRanges.value.negativeRange, visibleRanges.value.positiveRange);\n}",location:"/home/runner/work/react-native-reanimated-carousel/react-native-reanimated-carousel/src/layouts/ParallaxLayout.tsx",sourceMap:"{\"version\":3,\"names\":[\"anonymous\",\"runOnJS\",\"updateView\",\"visibleRanges\",\"_closure\",\"value\",\"negativeRange\",\"positiveRange\"],\"sources\":[\"/home/runner/work/react-native-reanimated-carousel/react-native-reanimated-carousel/src/layouts/ParallaxLayout.tsx\"],\"mappings\":\"AAqHI,SAAAA,SAAMA,CAAA;EAAA;IAAAC,OAAA;IAAAC,UAAA;IAAAC;EAAA,SAAAC,QAAA;EACJH,OAAO,CAACC,UAAU,CAAC,CACjBC,aAAa,CAACE,KAAK,CAACC,aAAa,EACjCH,aAAa,CAACE,KAAK,CAACE,aACtB,CAAC;AACH\"}"};var ParallaxLayout=function ParallaxLayout(props){var handlerOffset=props.handlerOffset,_props$parallaxScroll=props.parallaxScrollingOffset,parallaxScrollingOffset=_props$parallaxScroll===void 0?100:_props$parallaxScroll,_props$parallaxScroll2=props.parallaxScrollingScale,parallaxScrollingScale=_props$parallaxScroll2===void 0?0.8:_props$parallaxScroll2,_props$parallaxAdjace=props.parallaxAdjacentItemScale,parallaxAdjacentItemScale=_props$parallaxAdjace===void 0?parallaxScrollingScale**2:_props$parallaxAdjace,index=props.index,width=props.width,height=props.height,loop=props.loop,dataLength=props.dataLength,children=props.children,visibleRanges=props.visibleRanges,vertical=props.vertical;var _React$useState=_react.default.useState(false),_React$useState2=(0,_slicedToArray2.default)(_React$useState,2),shouldUpdate=_React$useState2[0],setShouldUpdate=_React$useState2[1];var size=props.vertical?props.height:props.width;var x=(0,_useOffsetX.useOffsetX)({handlerOffset:handlerOffset,index:index,size:size,dataLength:dataLength,loop:loop},visibleRanges);var offsetXStyle=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _e=[new global.Error(),-9,-27];var _f=function _f(){var value=x.value/size;var translate=(0,_reactNativeReanimated.interpolate)(value,[-1,0,1],[-size+parallaxScrollingOffset,0,size-parallaxScrollingOffset],_reactNativeReanimated.Extrapolate.EXTEND);var zIndex=(0,_reactNativeReanimated.interpolate)(value,[-1,0,1],[0,size,0],_reactNativeReanimated.Extrapolate.CLAMP);var scale=(0,_reactNativeReanimated.interpolate)(value,[-1,0,1],[parallaxAdjacentItemScale,parallaxScrollingScale,parallaxAdjacentItemScale],_reactNativeReanimated.Extrapolate.CLAMP);return{transform:[vertical?{translateY:translate}:{translateX:translate},{scale:scale}],zIndex:zIndex};};_f._closure={x:x,size:size,interpolate:_reactNativeReanimated.interpolate,parallaxScrollingOffset:parallaxScrollingOffset,Extrapolate:_reactNativeReanimated.Extrapolate,parallaxAdjacentItemScale:parallaxAdjacentItemScale,parallaxScrollingScale:parallaxScrollingScale,vertical:vertical};_f.__initData=_worklet_2396750619736_init_data;_f.__workletHash=2396750619736;_f.__stackDetails=_e;_f.__version="3.3.0";return _f;}(),[loop,vertical,parallaxScrollingOffset]);var updateView=_react.default.useCallback(function(negativeRange,positiveRange){setShouldUpdate(index>=negativeRange[0]&&index<=negativeRange[1]||index>=positiveRange[0]&&index<=positiveRange[1]);},[index]);(0,_reactNativeReanimated.useAnimatedReaction)(function(){var _e=[new global.Error(),-2,-27];var _f=function _f(){return visibleRanges.value;};_f._closure={visibleRanges:visibleRanges};_f.__initData=_worklet_11113070436332_init_data;_f.__workletHash=11113070436332;_f.__stackDetails=_e;_f.__version="3.3.0";return _f;}(),function(){var _e=[new global.Error(),-4,-27];var _f=function _f(){(0,_reactNativeReanimated.runOnJS)(updateView)(visibleRanges.value.negativeRange,visibleRanges.value.positiveRange);};_f._closure={runOnJS:_reactNativeReanimated.runOnJS,updateView:updateView,visibleRanges:visibleRanges};_f.__initData=_worklet_15128277149381_init_data;_f.__workletHash=15128277149381;_f.__stackDetails=_e;_f.__version="3.3.0";return _f;}(),[visibleRanges.value]);return(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{style:[{width:width||"100%",height:height||"100%",position:"absolute"},offsetXStyle],children:(0,_jsxRuntime.jsx)(_LazyView.LazyView,{shouldUpdate:shouldUpdate,children:children})});};exports.ParallaxLayout=ParallaxLayout;
//# sourceMappingURL=ParallaxLayout.js.map