UNPKG

@devloops/react-native-variant

Version:
2 lines 1.36 kB
var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _palette=require("../../Helpers/palette");var _jsxFileName="/Users/devloops/Desktop/reactNative/reactNativeMUI/src/Components/Carousel/PaginationItem.tsx";var PaginationItem=function PaginationItem(_ref){var active=_ref.active;var animate=(0,_react.useRef)(new _reactNative.Animated.Value(active?6:0)).current;(0,_react.useEffect)(function(){setWidth(active?6:0);},[active]);var setWidth=function setWidth(val){_reactNative.Animated.timing(animate,{toValue:val,duration:150,easing:_reactNative.Easing.linear}).start();};var animateStyle=_reactNative.StyleSheet.flatten({animate:{paddingHorizontal:animate,backgroundColor:animate.interpolate({inputRange:[0,1],outputRange:['#ffffff',_palette.blue200]})}});return _react.default.createElement(_reactNative.Animated.View,{style:[style.pagination,animateStyle.animate],__source:{fileName:_jsxFileName,lineNumber:27}});};var style=_reactNative.StyleSheet.create({pagination:{height:8,width:8,marginHorizontal:5,borderRadius:15,backgroundColor:'#f7f7f7'}});var _default=PaginationItem;exports.default=_default; //# sourceMappingURL=PaginationItem.js.map