@kirz/react-native-toolkit
Version:
Toolkit to speed up React Native development
37 lines • 1.42 kB
JavaScript
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React from 'react';
import { View } from 'react-native';
import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
import { scaleX } from '../index';
export function AutoplayCarouselProgressBarItem(_ref) {
let {
index,
progress,
activeColor,
inactiveColor,
spacing = scaleX(5),
...props
} = _ref;
const progressStyle = useAnimatedStyle(() => {
const scrollValue = interpolate(progress.value, [index, index + 1], [0, 100], Extrapolation.CLAMP);
return {
width: `${scrollValue}%`
};
}, [index]);
return /*#__PURE__*/React.createElement(View, _extends({}, props, {
style: [{
borderRadius: scaleX(15),
backgroundColor: inactiveColor,
flex: 1,
position: 'relative',
overflow: 'hidden'
}, props.style]
}), /*#__PURE__*/React.createElement(Animated.View, {
style: [{
position: 'absolute',
backgroundColor: activeColor,
height: '100%'
}, progressStyle]
}));
}
//# sourceMappingURL=AutoplayCarouselProgressBarItem.js.map