react-native-reanimated-carousel
Version:
Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.
2 lines • 7.67 kB
JavaScript
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _reactNativeGestureHandler=require("react-native-gesture-handler");var _reactNativeReanimated=require("react-native-reanimated");var _useAutoPlay2=require("./hooks/useAutoPlay");var _useCarouselController=require("./hooks/useCarouselController");var _useCommonVariables=require("./hooks/useCommonVariables");var _useInitProps=require("./hooks/useInitProps");var _useLayoutConfig=require("./hooks/useLayoutConfig");var _useOnProgressChange=require("./hooks/useOnProgressChange");var _usePropsErrorBoundary=require("./hooks/usePropsErrorBoundary");var _useVisibleRanges=require("./hooks/useVisibleRanges");var _BaseLayout=require("./layouts/BaseLayout");var _ScrollViewGesture=require("./ScrollViewGesture");var _store=require("./store");var _computedWithAutoFillData=require("./utils/computedWithAutoFillData");var _jsxRuntime=require("react/jsx-runtime");var _this=this,_jsxFileName="/home/runner/work/react-native-reanimated-carousel/react-native-reanimated-carousel/src/Carousel.tsx";var _worklet_10125235996566_init_data={code:"function anonymous() {\n const {\n size,\n dataLength,\n handlerOffset,\n loop\n } = this._closure;\n const totalSize = size * dataLength;\n const x = handlerOffset.value % totalSize;\n if (!loop) return handlerOffset.value;\n return isNaN(x) ? 0 : x;\n}",location:"/home/runner/work/react-native-reanimated-carousel/react-native-reanimated-carousel/src/Carousel.tsx",sourceMap:"{\"version\":3,\"names\":[\"anonymous\",\"size\",\"dataLength\",\"handlerOffset\",\"loop\",\"_closure\",\"totalSize\",\"x\",\"value\",\"isNaN\"],\"sources\":[\"/home/runner/work/react-native-reanimated-carousel/react-native-reanimated-carousel/src/Carousel.tsx\"],\"mappings\":\"AA2DoC,SAAAA,SAAMA,CAAA;EAAA;IAAAC,IAAA;IAAAC,UAAA;IAAAC,aAAA;IAAAC;EAAA,SAAAC,QAAA;EACpC,MAAMC,SAAS,GAAGL,IAAI,GAAGC,UAAU;EACnC,MAAMK,CAAC,GAAGJ,aAAa,CAACK,KAAK,GAAGF,SAAS;EAEzC,IAAI,CAACF,IAAI,EACP,OAAOD,aAAa,CAACK,KAAK;EAE5B,OAAOC,KAAK,CAACF,CAAC,CAAC,GAAG,CAAC,GAAGA,CAAC;AACzB\"}"};var Carousel=_react.default.forwardRef(function(_props,ref){var props=(0,_useInitProps.useInitProps)(_props);var testID=props.testID,loop=props.loop,autoFillData=props.autoFillData,data=props.data,dataLength=props.dataLength,rawData=props.rawData,rawDataLength=props.rawDataLength,mode=props.mode,style=props.style,width=props.width,height=props.height,vertical=props.vertical,autoPlay=props.autoPlay,windowSize=props.windowSize,autoPlayReverse=props.autoPlayReverse,autoPlayInterval=props.autoPlayInterval,scrollAnimationDuration=props.scrollAnimationDuration,withAnimation=props.withAnimation,renderItem=props.renderItem,onScrollEnd=props.onScrollEnd,onSnapToItem=props.onSnapToItem,_onScrollBegin=props.onScrollBegin,onProgressChange=props.onProgressChange,customAnimation=props.customAnimation,defaultIndex=props.defaultIndex;var commonVariables=(0,_useCommonVariables.useCommonVariables)(props);var size=commonVariables.size,handlerOffset=commonVariables.handlerOffset;var offsetX=(0,_reactNativeReanimated.useDerivedValue)(function(){var _e=[new global.Error(),-5,-27];var _f=function _f(){var totalSize=size*dataLength;var x=handlerOffset.value%totalSize;if(!loop)return handlerOffset.value;return isNaN(x)?0:x;};_f._closure={size:size,dataLength:dataLength,handlerOffset:handlerOffset,loop:loop};_f.__initData=_worklet_10125235996566_init_data;_f.__workletHash=10125235996566;_f.__stackDetails=_e;_f.__version="3.3.0";return _f;}(),[loop,size,dataLength]);(0,_usePropsErrorBoundary.usePropsErrorBoundary)(Object.assign({},props,{dataLength:dataLength}));(0,_useOnProgressChange.useOnProgressChange)({autoFillData:autoFillData,loop:loop,size:size,offsetX:offsetX,rawDataLength:rawDataLength,onProgressChange:onProgressChange});var carouselController=(0,_useCarouselController.useCarouselController)({loop:loop,size:size,dataLength:dataLength,autoFillData:autoFillData,handlerOffset:handlerOffset,withAnimation:withAnimation,defaultIndex:defaultIndex,onScrollEnd:function onScrollEnd(){return(0,_reactNativeReanimated.runOnJS)(_onScrollEnd)();},onScrollBegin:function onScrollBegin(){return!!_onScrollBegin&&(0,_reactNativeReanimated.runOnJS)(_onScrollBegin)();},duration:scrollAnimationDuration});var next=carouselController.next,prev=carouselController.prev,scrollTo=carouselController.scrollTo,getSharedIndex=carouselController.getSharedIndex,getCurrentIndex=carouselController.getCurrentIndex;var _useAutoPlay=(0,_useAutoPlay2.useAutoPlay)({autoPlay:autoPlay,autoPlayInterval:autoPlayInterval,autoPlayReverse:autoPlayReverse,carouselController:carouselController}),startAutoPlay=_useAutoPlay.start,pauseAutoPlay=_useAutoPlay.pause;var _onScrollEnd=_react.default.useCallback(function(){var _sharedIndex=Math.round(getSharedIndex());var realIndex=(0,_computedWithAutoFillData.computedRealIndexWithAutoFillData)({index:_sharedIndex,dataLength:rawDataLength,loop:loop,autoFillData:autoFillData});if(onSnapToItem)onSnapToItem(realIndex);if(onScrollEnd)onScrollEnd(realIndex);},[loop,autoFillData,rawDataLength,getSharedIndex,onSnapToItem,onScrollEnd]);var scrollViewGestureOnScrollBegin=_react.default.useCallback(function(){pauseAutoPlay();_onScrollBegin==null?void 0:_onScrollBegin();},[_onScrollBegin,pauseAutoPlay]);var scrollViewGestureOnScrollEnd=_react.default.useCallback(function(){startAutoPlay();_onScrollEnd();},[_onScrollEnd,startAutoPlay]);var scrollViewGestureOnTouchBegin=_react.default.useCallback(pauseAutoPlay,[pauseAutoPlay]);var scrollViewGestureOnTouchEnd=_react.default.useCallback(startAutoPlay,[startAutoPlay]);_react.default.useImperativeHandle(ref,function(){return{next:next,prev:prev,getCurrentIndex:getCurrentIndex,scrollTo:scrollTo};},[getCurrentIndex,next,prev,scrollTo]);var visibleRanges=(0,_useVisibleRanges.useVisibleRanges)({total:dataLength,viewSize:size,translation:handlerOffset,windowSize:windowSize});var layoutConfig=(0,_useLayoutConfig.useLayoutConfig)(Object.assign({},props,{size:size}));var renderLayout=_react.default.useCallback(function(item,i){var realIndex=(0,_computedWithAutoFillData.computedRealIndexWithAutoFillData)({index:i,dataLength:rawDataLength,loop:loop,autoFillData:autoFillData});return(0,_jsxRuntime.jsx)(_BaseLayout.BaseLayout,{index:i,handlerOffset:offsetX,visibleRanges:visibleRanges,animationStyle:customAnimation||layoutConfig,children:function children(_ref){var animationValue=_ref.animationValue;return renderItem({item:item,index:realIndex,animationValue:animationValue});}},i);},[loop,rawData,offsetX,visibleRanges,autoFillData,renderItem,layoutConfig,customAnimation]);return(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.GestureHandlerRootView,{children:(0,_jsxRuntime.jsx)(_store.CTX.Provider,{value:{props:props,common:commonVariables},children:(0,_jsxRuntime.jsx)(_ScrollViewGesture.ScrollViewGesture,{size:size,translation:handlerOffset,style:[styles.container,{width:width||"100%",height:height||"100%"},style,vertical?styles.itemsVertical:styles.itemsHorizontal],testID:testID,onScrollBegin:scrollViewGestureOnScrollBegin,onScrollEnd:scrollViewGestureOnScrollEnd,onTouchBegin:scrollViewGestureOnTouchBegin,onTouchEnd:scrollViewGestureOnTouchEnd,children:data.map(renderLayout)},mode)})});});var _default=Carousel;exports.default=_default;var styles=_reactNative.StyleSheet.create({container:{overflow:"hidden"},itemsHorizontal:{flexDirection:"row"},itemsVertical:{flexDirection:"column"}});
//# sourceMappingURL=Carousel.js.map