react-native-gradient-shimmer
Version:
⚛ A pure JavaScript, performant, typed shimmer component for Android and iOS.
146 lines • 6.43 kB
JavaScript
;
// MIT License
//
// Copyright (c) 2023 Douglas Nassif Roma Junior
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.gradientShimmerDefaultProps = void 0;
const react_1 = __importStar(require("react"));
const react_native_1 = require("react-native");
const AnimationProvider_1 = require("./AnimationProvider");
const BaseLinearGradient_1 = __importDefault(require("./BaseLinearGradient"));
const isRealPositiveNumber = (value) => {
return Boolean(typeof value === 'number' && Number.isFinite(value) && value > 0);
};
exports.gradientShimmerDefaultProps = {
duration: 1500,
highlightWidth: 200,
highlightColor: 'rgb(210,210,210)',
backgroundColor: 'rgb(200,200,200)',
animating: true,
easing: react_native_1.Easing.linear,
};
const GradientShimmer = ({ duration = exports.gradientShimmerDefaultProps.duration, highlightWidth = exports.gradientShimmerDefaultProps.highlightWidth, highlightColor = exports.gradientShimmerDefaultProps.highlightColor, backgroundColor = exports.gradientShimmerDefaultProps.backgroundColor, animating = exports.gradientShimmerDefaultProps.animating, easing = exports.gradientShimmerDefaultProps.easing, testID = undefined, style = undefined, height, width, LinearGradientComponent, }) => {
const { registerAnimation } = (0, react_1.useContext)(AnimationProvider_1.AnimationContext) || {};
const componentId = (0, react_1.useId)();
const startPosition = 0 - highlightWidth;
const position = (0, react_1.useRef)(new react_native_1.Animated.Value(startPosition));
const containerStyles = (0, react_1.useMemo)(() => {
const styles = [
style,
{
overflow: 'hidden',
backgroundColor,
height,
width,
},
];
return react_native_1.StyleSheet.flatten(styles);
}, [height, style, width, backgroundColor]);
const linearLayoutStyles = (0, react_1.useMemo)(() => ({
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
width: highlightWidth,
transform: [
{
translateX: position.current,
},
],
}), [highlightWidth]);
const calculatedWidth = (0, react_1.useMemo)(() => {
const { width: flatWidth } = containerStyles;
if (!isRealPositiveNumber(flatWidth)) {
console.error('GradientShimmer requires `width` to be real positive numbers.');
return 100;
}
return flatWidth;
}, [containerStyles]);
const endPosition = calculatedWidth + highlightWidth;
(0, react_1.useEffect)(() => {
position.current.setValue(startPosition);
if (!animating) {
return undefined;
}
const animation = react_native_1.Animated.sequence([
react_native_1.Animated.timing(position.current, {
toValue: endPosition,
duration: duration,
easing,
useNativeDriver: true,
}),
react_native_1.Animated.timing(position.current, {
toValue: startPosition,
duration: 0,
useNativeDriver: true,
}),
]);
if (registerAnimation) {
registerAnimation?.(componentId, animation);
return () => {
registerAnimation?.(componentId, undefined);
};
}
const loop = react_native_1.Animated.loop(animation);
loop.start();
return () => {
loop.stop();
};
}, [
animating,
duration,
startPosition,
endPosition,
easing,
registerAnimation,
componentId,
]);
return (react_1.default.createElement(react_native_1.View, { testID: testID, style: containerStyles },
react_1.default.createElement(BaseLinearGradient_1.default, { LinearGradient: LinearGradientComponent, style: linearLayoutStyles, highlightColor: highlightColor, backgroundColor: backgroundColor })));
};
exports.default = (0, react_1.memo)(GradientShimmer);
//# sourceMappingURL=GradientShimmer.js.map