@razorpay/blade/build/lib/native/components/Skeleton/PulseAnimation.native.js

The Design System that powers Razorpay

import Animated, { useSharedValue, withRepeat, withSequence, withTiming, cancelAnimation, useAnimatedStyle, interpolateColor } from 'react-native-reanimated';
import React__default from 'react';
import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
import 'react-native';
import '@babel/runtime/helpers/slicedToArray';
import { castNativeType } from '../../utils/platform/castUtils.js';
import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.native.js';
import useTheme from '../BladeProvider/useTheme.js';
import 'styled-components/native';
import '@gorhom/portal';
import 'react-native-gesture-handler';
import '../BottomSheet/BottomSheetStack.js';
import { jsx } from 'react/jsx-runtime';

var AnimatedBox=Animated.createAnimatedComponent(BaseBox);var _PulseAnimation=function _PulseAnimation(props,ref){var _useTheme=useTheme(),theme=_useTheme.theme;var durationPluseOff=theme.motion.duration.xmoderate;var durationPluseOn=theme.motion.duration['2xgentle'];var totalDuration=castNativeType(makeMotionTime(durationPluseOn+durationPluseOff));var easing=castNativeType(theme.motion.easing.emphasized);var progress=useSharedValue(0);var fadeIn=function fadeIn(){'worklet';var animations={opacity:withTiming(1,{duration:totalDuration,easing:easing})};var initialValues={opacity:0};return {initialValues:initialValues,animations:animations};};React__default.useEffect(function(){var pulsatingAnimationTimingConfig={duration:totalDuration,easing:easing};progress.value=withRepeat(withSequence(withTiming(0,pulsatingAnimationTimingConfig),withTiming(1,pulsatingAnimationTimingConfig)),-1,true);return function(){cancelAnimation(progress);};},[easing,progress,totalDuration]);var pulseAnimatedStyle=useAnimatedStyle(function(){return {backgroundColor:interpolateColor(progress.value,[1,0],[theme.colors.interactive.background.gray.highlighted,theme.colors.interactive.background.gray.default])};});return jsx(AnimatedBox,Object.assign({ref:ref,entering:fadeIn,style:pulseAnimatedStyle},props));};var PulseAnimation=React__default.forwardRef(_PulseAnimation);

export { PulseAnimation };
//# sourceMappingURL=PulseAnimation.native.js.map