diff --git a/node_modules/react-native-skeleton-content/lib/BoneContainer.d.ts b/node_modules/react-native-skeleton-content/lib/BoneContainer.d.ts
new file mode 100644
index 0000000..eb6d650
--- /dev/null
+++ b/node_modules/react-native-skeleton-content/lib/BoneContainer.d.ts
@@ -0,0 +1,11 @@
+import React from 'react';
+import { ICustomViewStyle } from './Constants';
+type BoneContainerProps = {
+ layoutStyle: ICustomViewStyle;
+ childrenBones: JSX.Element[];
+ id: number | string;
+ container?: React.ComponentType;
+ containerProps?: any;
+};
+declare const BoneContainer: ({ layoutStyle, childrenBones, id, container, containerProps }: BoneContainerProps) => React.JSX.Element;
+export default BoneContainer;
diff --git a/node_modules/react-native-skeleton-content/lib/BoneContainer.js b/node_modules/react-native-skeleton-content/lib/BoneContainer.js
new file mode 100644
index 0000000..6f51a42
--- /dev/null
+++ b/node_modules/react-native-skeleton-content/lib/BoneContainer.js
@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+ return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const BoneContainer = ({ layoutStyle, childrenBones, id, container, containerProps }) => {
+ const Wrapper = container || react_native_1.View;
+ return (
+ {childrenBones}
+ );
+};
+exports.default = BoneContainer;
diff --git a/node_modules/react-native-skeleton-content/lib/BoneHelper.d.ts b/node_modules/react-native-skeleton-content/lib/BoneHelper.d.ts
new file mode 100644
index 0000000..1810265
--- /dev/null
+++ b/node_modules/react-native-skeleton-content/lib/BoneHelper.d.ts
@@ -0,0 +1,17 @@
+import { AnimatedTransform, SharedValue } from 'react-native-reanimated';
+import { ICustomViewStyle, ISize, AnimationType, AnimationDirection, IDirection } from './Constants';
+declare const BoneHelper: {
+ getBoneWidth: (boneLayout: ICustomViewStyle, componentSize: {
+ width: number;
+ height: number;
+ }) => number;
+ getBoneHeight: (boneLayout: ICustomViewStyle, componentSize: {
+ width: number;
+ height: number;
+ }) => number;
+ getBoneStyle: (boneLayout: ICustomViewStyle, componentSize: ISize, animationType: AnimationType, animationDirection: AnimationDirection, boneColor: string) => ICustomViewStyle;
+ getGradientSize: (boneLayout: ICustomViewStyle, componentSize: ISize, animationDirection: AnimationDirection) => ICustomViewStyle;
+ getGradientTransform: (boneLayout: ICustomViewStyle, componentSize: ISize, animationValue: SharedValue<0 | 1>, animationDirection: AnimationDirection) => AnimatedTransform;
+ getGradientEndDirection: (boneLayout: ICustomViewStyle, componentSize: ISize, animationType: AnimationType, animationDirection: AnimationDirection) => IDirection;
+};
+export default BoneHelper;
diff --git a/node_modules/react-native-skeleton-content/lib/BoneHelper.js b/node_modules/react-native-skeleton-content/lib/BoneHelper.js
new file mode 100644
index 0000000..b23ae92
--- /dev/null
+++ b/node_modules/react-native-skeleton-content/lib/BoneHelper.js
@@ -0,0 +1,193 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_native_reanimated_1 = require("react-native-reanimated");
+const Constants_1 = require("./Constants");
+const getBoneWidth = (boneLayout, componentSize) => {
+ 'worklet';
+ // if (typeof boneLayout.width === 'string')
+ // boneLayout.width
+ // else
+ // boneLayout.width
+ // return componentSize.width;
+ return ((typeof boneLayout.width === 'string'
+ ? componentSize.width
+ : boneLayout.width) || 0);
+};
+const getBoneHeight = (boneLayout, componentSize) => {
+ 'worklet';
+ return componentSize.height;
+ // return (
+ // (typeof boneLayout.height === 'string'
+ // ? componentSize.height
+ // : boneLayout.height) || 0
+ // );
+};
+const getBoneStyle = (boneLayout, componentSize, animationType, animationDirection, boneColor) => {
+ const { backgroundColor, borderRadius } = boneLayout;
+ const boneWidth = getBoneWidth(boneLayout, componentSize);
+ const boneHeight = getBoneHeight(boneLayout, componentSize);
+ const boneStyle = Object.assign({ width: boneWidth, height: boneHeight, borderRadius: borderRadius || Constants_1.DEFAULT_BORDER_RADIUS }, boneLayout);
+ if (animationType !== 'pulse') {
+ boneStyle.overflow = 'hidden';
+ boneStyle.backgroundColor = backgroundColor || boneColor;
+ }
+ if (animationDirection === 'diagonalDownRight' ||
+ animationDirection === 'diagonalDownLeft' ||
+ animationDirection === 'diagonalTopRight' ||
+ animationDirection === 'diagonalTopLeft') {
+ boneStyle.justifyContent = 'center';
+ boneStyle.alignItems = 'center';
+ }
+ return boneStyle;
+};
+const getGradientSize = (boneLayout, componentSize, animationDirection) => {
+ 'worklet';
+ const boneWidth = getBoneWidth(boneLayout, componentSize);
+ const boneHeight = getBoneHeight(boneLayout, componentSize);
+ const gradientStyle = {};
+ if (animationDirection === 'diagonalDownRight' ||
+ animationDirection === 'diagonalDownLeft' ||
+ animationDirection === 'diagonalTopRight' ||
+ animationDirection === 'diagonalTopLeft') {
+ gradientStyle.width = boneWidth;
+ gradientStyle.height = boneHeight;
+ if (boneHeight >= boneWidth) {
+ gradientStyle.height *= 1.5;
+ }
+ else {
+ gradientStyle.width *= 1.5;
+ }
+ }
+ return gradientStyle;
+};
+const getPositionRange = (boneLayout, componentSize, animationDirection) => {
+ 'worklet';
+ // use layout dimensions for percentages (string type)
+ const boneWidth = getBoneWidth(boneLayout, componentSize);
+ const boneHeight = getBoneHeight(boneLayout, componentSize);
+ if (animationDirection === 'horizontalRight') {
+ return [-boneWidth, +boneWidth];
+ }
+ if (animationDirection === 'horizontalLeft') {
+ return [+boneWidth, -boneWidth];
+ }
+ if (animationDirection === 'verticalDown') {
+ return [-boneHeight, +boneHeight];
+ }
+ if (animationDirection === 'verticalTop') {
+ return [+boneHeight, -boneHeight];
+ }
+ return [];
+};
+const getGradientTransform = (boneLayout, componentSize, animationValue, animationDirection) => {
+ 'worklet';
+ let transform = [];
+ const boneWidth = getBoneWidth(boneLayout, componentSize);
+ const boneHeight = getBoneHeight(boneLayout, componentSize);
+ if (animationDirection === 'verticalTop' ||
+ animationDirection === 'verticalDown' ||
+ animationDirection === 'horizontalLeft' ||
+ animationDirection === 'horizontalRight') {
+ const interpolatedPosition = (0, react_native_reanimated_1.interpolate)(animationValue.value, [0, 1], getPositionRange(boneLayout, componentSize, animationDirection));
+ if (animationDirection === 'verticalTop' ||
+ animationDirection === 'verticalDown') {
+ transform = [{ translateY: interpolatedPosition }];
+ }
+ else {
+ transform = [{ translateX: interpolatedPosition }];
+ }
+ }
+ else if (animationDirection === 'diagonalDownRight' ||
+ animationDirection === 'diagonalTopRight' ||
+ animationDirection === 'diagonalDownLeft' ||
+ animationDirection === 'diagonalTopLeft') {
+ const diagonal = Math.sqrt(boneHeight * boneHeight + boneWidth * boneWidth);
+ const mainDimension = Math.max(boneHeight, boneWidth);
+ const oppositeDimension = mainDimension === boneWidth ? boneHeight : boneWidth;
+ const diagonalAngle = Math.acos(mainDimension / diagonal);
+ let rotateAngle = animationDirection === 'diagonalDownRight' ||
+ animationDirection === 'diagonalTopLeft'
+ ? Math.PI / 2 - diagonalAngle
+ : Math.PI / 2 + diagonalAngle;
+ const additionalRotate = animationDirection === 'diagonalDownRight' ||
+ animationDirection === 'diagonalTopLeft'
+ ? 2 * diagonalAngle
+ : -2 * diagonalAngle;
+ const distanceFactor = (diagonal + oppositeDimension) / 2;
+ if (mainDimension === boneWidth && boneWidth !== boneHeight) {
+ rotateAngle += additionalRotate;
+ }
+ const sinComponent = Math.sin(diagonalAngle) * distanceFactor;
+ const cosComponent = Math.cos(diagonalAngle) * distanceFactor;
+ let xOutputRange = [0, 0];
+ let yOutputRange = [0, 0];
+ if (animationDirection === 'diagonalDownRight' ||
+ animationDirection === 'diagonalTopLeft') {
+ xOutputRange =
+ animationDirection === 'diagonalDownRight'
+ ? [-sinComponent, sinComponent]
+ : [sinComponent, -sinComponent];
+ yOutputRange =
+ animationDirection === 'diagonalDownRight'
+ ? [-cosComponent, cosComponent]
+ : [cosComponent, -cosComponent];
+ }
+ else {
+ xOutputRange =
+ animationDirection === 'diagonalDownLeft'
+ ? [-sinComponent, sinComponent]
+ : [sinComponent, -sinComponent];
+ yOutputRange =
+ animationDirection === 'diagonalDownLeft'
+ ? [cosComponent, -cosComponent]
+ : [-cosComponent, cosComponent];
+ if (mainDimension === boneHeight && boneWidth !== boneHeight) {
+ xOutputRange.reverse();
+ yOutputRange.reverse();
+ }
+ }
+ let translateX = (0, react_native_reanimated_1.interpolate)(animationValue.value, [0, 1], xOutputRange);
+ let translateY = (0, react_native_reanimated_1.interpolate)(animationValue.value, [0, 1], yOutputRange);
+ // swapping the translates if width is the main dim
+ if (mainDimension === boneWidth) {
+ [translateX, translateY] = [translateY, translateX];
+ }
+ const rotate = `${rotateAngle}rad`;
+ transform = [{ translateX }, { translateY }, { rotate }];
+ }
+ return transform;
+};
+const getGradientEndDirection = (boneLayout, componentSize, animationType, animationDirection) => {
+ let direction = { x: 0, y: 0 };
+ if (animationType === 'shiver') {
+ if (animationDirection === 'horizontalLeft' ||
+ animationDirection === 'horizontalRight') {
+ direction = { x: 1, y: 0 };
+ }
+ else if (animationDirection === 'verticalTop' ||
+ animationDirection === 'verticalDown') {
+ direction = { x: 0, y: 1 };
+ }
+ else if (animationDirection === 'diagonalTopRight' ||
+ animationDirection === 'diagonalDownRight' ||
+ animationDirection === 'diagonalDownLeft' ||
+ animationDirection === 'diagonalTopLeft') {
+ const boneWidth = getBoneWidth(boneLayout, componentSize);
+ const boneHeight = getBoneHeight(boneLayout, componentSize);
+ if (boneWidth && boneHeight && boneWidth > boneHeight) {
+ return { x: 0, y: 1 };
+ }
+ return { x: 1, y: 0 };
+ }
+ }
+ return direction;
+};
+const BoneHelper = {
+ getBoneWidth,
+ getBoneHeight,
+ getBoneStyle,
+ getGradientSize,
+ getGradientTransform,
+ getGradientEndDirection,
+};
+exports.default = BoneHelper;
diff --git a/node_modules/react-native-skeleton-content/lib/Bones/BoneContainer.d.ts b/node_modules/react-native-skeleton-content/lib/Bones/BoneContainer.d.ts
new file mode 100644
index 0000000..1760475
--- /dev/null
+++ b/node_modules/react-native-skeleton-content/lib/Bones/BoneContainer.d.ts
@@ -0,0 +1,11 @@
+import React from 'react';
+import { ICustomViewStyle } from '../Constants';
+type BoneContainerProps = {
+ layoutStyle: ICustomViewStyle;
+ childrenBones: JSX.Element[];
+ id: number | string;
+ container?: React.ComponentType;
+ containerProps?: any;
+};
+declare const BoneContainer: ({ layoutStyle, childrenBones, id, container, containerProps }: BoneContainerProps) => React.JSX.Element;
+export default BoneContainer;
diff --git a/node_modules/react-native-skeleton-content/lib/Bones/BoneContainer.js b/node_modules/react-native-skeleton-content/lib/Bones/BoneContainer.js
new file mode 100644
index 0000000..6f51a42
--- /dev/null
+++ b/node_modules/react-native-skeleton-content/lib/Bones/BoneContainer.js
@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+ return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const BoneContainer = ({ layoutStyle, childrenBones, id, container, containerProps }) => {
+ const Wrapper = container || react_native_1.View;
+ return (
+ {childrenBones}
+ );
+};
+exports.default = BoneContainer;
diff --git a/node_modules/react-native-skeleton-content/lib/Bones/Bones.d.ts b/node_modules/react-native-skeleton-content/lib/Bones/Bones.d.ts
new file mode 100644
index 0000000..b15e85b
--- /dev/null
+++ b/node_modules/react-native-skeleton-content/lib/Bones/Bones.d.ts
@@ -0,0 +1,7 @@
+import { ICustomViewStyle } from '../Constants';
+type BonesProps = {
+ bonesLayout: ICustomViewStyle[] | undefined;
+ childrenItems: any;
+};
+declare const Bones: ({ bonesLayout, childrenItems }: BonesProps) => any;
+export default Bones;
diff --git a/node_modules/react-native-skeleton-content/lib/Bones/Bones.js b/node_modules/react-native-skeleton-content/lib/Bones/Bones.js
new file mode 100644
index 0000000..edf72ad
--- /dev/null
+++ b/node_modules/react-native-skeleton-content/lib/Bones/Bones.js
@@ -0,0 +1,76 @@
+"use strict";
+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 __rest = (this && this.__rest) || function (s, e) {
+ var t = {};
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+ t[p] = s[p];
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+ t[p[i]] = s[p[i]];
+ }
+ return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+ return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const BoneContainer_1 = __importDefault(require("./BoneContainer"));
+const ShiverBone_1 = __importDefault(require("./ShiverBone"));
+const StaticBone_1 = __importDefault(require("./StaticBone"));
+const SkeletonContentContext_1 = require("../SkeletonContentContext");
+const Bones = ({ bonesLayout, childrenItems }) => {
+ const { animationType, prefix } = (0, react_1.useContext)(SkeletonContentContext_1.SkeletonContentContext);
+ if (bonesLayout === null || bonesLayout === void 0 ? void 0 : bonesLayout.length) {
+ return Array(bonesLayout.length)
+ .fill(undefined)
+ .map((_, i) => {
+ var _a;
+ // has a nested layout
+ if ((_a = bonesLayout[i].children) === null || _a === void 0 ? void 0 : _a.length) {
+ const containerPrefix = bonesLayout[i].key || `bone_container_${i}`;
+ const _b = bonesLayout[i], { children: childBones, container, containerProps } = _b, layoutStyle = __rest(_b, ["children", "container", "containerProps"]);
+ return ( (Object.assign(Object.assign({}, it), { key: `nested_${index}` }))),
+ childrenItems: []
+ })} id={containerPrefix} container={container} containerProps={containerProps}/>);
+ }
+ if (animationType === 'pulse' || animationType === 'none') {
+ return ();
+ }
+ return ();
+ });
+ // no layout, matching children's layout
+ }
+ return react_1.default.Children.map(childrenItems, (child, i) => {
+ const styling = child.props.style || {};
+ if (animationType === 'pulse' || animationType === 'none') {
+ return ;
+ }
+ return ;
+ });
+};
+exports.default = Bones;
diff --git a/node_modules/react-native-skeleton-content/lib/Bones/ShiverBone.d.ts b/node_modules/react-native-skeleton-content/lib/Bones/ShiverBone.d.ts
new file mode 100644
index 0000000..450bde5
--- /dev/null
+++ b/node_modules/react-native-skeleton-content/lib/Bones/ShiverBone.d.ts
@@ -0,0 +1,8 @@
+///
+import { ICustomViewStyle } from '../Constants';
+type ShiverBoneProps = {
+ layoutStyle: ICustomViewStyle;
+ id: number | string;
+};
+declare const ShiverBone: ({ layoutStyle, id }: ShiverBoneProps) => JSX.Element;
+export default ShiverBone;
diff --git a/node_modules/react-native-skeleton-content/lib/Bones/ShiverBone.js b/node_modules/react-native-skeleton-content/lib/Bones/ShiverBone.js
new file mode 100644
index 0000000..cc09d1e
--- /dev/null
+++ b/node_modules/react-native-skeleton-content/lib/Bones/ShiverBone.js
@@ -0,0 +1,56 @@
+"use strict";
+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 });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const expo_linear_gradient_1 = require("expo-linear-gradient");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const BoneHelper_1 = __importDefault(require("../BoneHelper"));
+const SkeletonContentContext_1 = require("../SkeletonContentContext");
+const styles = react_native_1.StyleSheet.create({
+ absoluteGradient: {
+ height: '100%',
+ position: 'absolute',
+ width: '100%'
+ },
+ gradientChild: {
+ flex: 1
+ }
+});
+const { getBoneStyle, getGradientTransform, getGradientSize, getGradientEndDirection } = BoneHelper_1.default;
+const ShiverBone = ({ layoutStyle, id }) => {
+ const { animationValue, animationType, animationDirection, componentSize, boneColor, highlightColor } = (0, react_1.useContext)(SkeletonContentContext_1.SkeletonContentContext);
+ const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => (Object.assign({ transform: getGradientTransform(layoutStyle, componentSize, animationValue, animationDirection) }, getGradientSize(layoutStyle, componentSize, animationDirection))));
+ const gradientEndDirection = react_1.default.useMemo(() => getGradientEndDirection(layoutStyle, componentSize, animationType, animationDirection), [layoutStyle, componentSize, animationType, animationDirection]);
+ return (
+
+
+
+ );
+};
+exports.default = ShiverBone;
diff --git a/node_modules/react-native-skeleton-content/lib/Bones/StaticBone.d.ts b/node_modules/react-native-skeleton-content/lib/Bones/StaticBone.d.ts
new file mode 100644
index 0000000..f2228b6
--- /dev/null
+++ b/node_modules/react-native-skeleton-content/lib/Bones/StaticBone.d.ts
@@ -0,0 +1,8 @@
+///
+import { ICustomViewStyle } from '../Constants';
+type StaticBoneProps = {
+ layoutStyle: ICustomViewStyle;
+ id: number | string;
+};
+declare const StaticBone: ({ layoutStyle, id }: StaticBoneProps) => JSX.Element;
+export default StaticBone;
diff --git a/node_modules/react-native-skeleton-content/lib/Bones/StaticBone.js b/node_modules/react-native-skeleton-content/lib/Bones/StaticBone.js
new file mode 100644
index 0000000..cbf85d7
--- /dev/null
+++ b/node_modules/react-native-skeleton-content/lib/Bones/StaticBone.js
@@ -0,0 +1,47 @@
+"use strict";
+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 });
+const react_1 = __importStar(require("react"));
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const BoneHelper_1 = __importDefault(require("../BoneHelper"));
+const SkeletonContentContext_1 = require("../SkeletonContentContext");
+const useStaticBoneStyle = (props) => {
+ const animatedPulseStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+ backgroundColor: (0, react_native_reanimated_1.interpolateColor)(props.animationValue.value, [0, 1], [props.boneColor, props.highlightColor])
+ }));
+ return [
+ BoneHelper_1.default.getBoneStyle(props.layoutStyle, props.componentSize, props.animationType, props.animationDirection, props.boneColor),
+ ...(props.animationType === 'none' ? [] : [animatedPulseStyle])
+ ];
+};
+const StaticBone = ({ layoutStyle, id }) => {
+ const contextProps = (0, react_1.useContext)(SkeletonContentContext_1.SkeletonContentContext);
+ const style = useStaticBoneStyle(Object.assign({ layoutStyle }, contextProps));
+ return ;
+};
+exports.default = StaticBone;
diff --git a/node_modules/react-native-skeleton-content/lib/Constants.d.ts b/node_modules/react-native-skeleton-content/lib/Constants.d.ts
index f19a1a6..8e387f9 100644
--- a/node_modules/react-native-skeleton-content/lib/Constants.d.ts
+++ b/node_modules/react-native-skeleton-content/lib/Constants.d.ts
@@ -1,33 +1,39 @@
+///
import { StyleProp, ViewStyle } from 'react-native';
-import Animated from 'react-native-reanimated';
-declare type _animationType = 'none' | 'shiver' | 'pulse' | undefined;
-declare type _animationDirection = 'horizontalLeft' | 'horizontalRight' | 'verticalTop' | 'verticalDown' | 'diagonalDownLeft' | 'diagonalDownRight' | 'diagonalTopLeft' | 'diagonalTopRight' | undefined;
+import { EasingFn, EasingFunctionFactory } from 'react-native-reanimated';
+export type AnimationType = 'none' | 'shiver' | 'pulse' | undefined;
+export type AnimationDirection = 'horizontalLeft' | 'horizontalRight' | 'verticalTop' | 'verticalDown' | 'diagonalDownLeft' | 'diagonalDownRight' | 'diagonalTopLeft' | 'diagonalTopRight' | undefined;
export interface ICustomViewStyle extends ViewStyle {
children?: ICustomViewStyle[];
key?: number | string;
+ container?: React.ComponentType;
+ containerProps?: any;
}
export interface ISkeletonContentProps {
isLoading: boolean;
layout?: ICustomViewStyle[];
duration?: number;
containerStyle?: StyleProp;
- animationType?: _animationType;
- animationDirection?: _animationDirection;
+ animationType?: AnimationType;
+ animationDirection?: AnimationDirection;
boneColor?: string;
highlightColor?: string;
- easing?: Animated.EasingNodeFunction;
+ easing?: EasingFn;
children?: any;
}
export interface IDirection {
x: number;
y: number;
}
+export interface ISize {
+ width: number;
+ height: number;
+}
export declare const DEFAULT_BORDER_RADIUS = 4;
export declare const DEFAULT_DURATION = 1200;
-export declare const DEFAULT_ANIMATION_TYPE: _animationType;
-export declare const DEFAULT_ANIMATION_DIRECTION: _animationDirection;
+export declare const DEFAULT_ANIMATION_TYPE: AnimationType;
+export declare const DEFAULT_ANIMATION_DIRECTION: AnimationDirection;
export declare const DEFAULT_BONE_COLOR = "#E1E9EE";
export declare const DEFAULT_HIGHLIGHT_COLOR = "#F2F8FC";
-export declare const DEFAULT_EASING: Animated.EasingNodeFunction;
+export declare const DEFAULT_EASING: EasingFunctionFactory;
export declare const DEFAULT_LOADING = true;
-export {};
diff --git a/node_modules/react-native-skeleton-content/lib/Constants.js b/node_modules/react-native-skeleton-content/lib/Constants.js
index 27b1cf6..dc5fc26 100644
--- a/node_modules/react-native-skeleton-content/lib/Constants.js
+++ b/node_modules/react-native-skeleton-content/lib/Constants.js
@@ -8,5 +8,5 @@ exports.DEFAULT_ANIMATION_TYPE = 'shiver';
exports.DEFAULT_ANIMATION_DIRECTION = 'horizontalRight';
exports.DEFAULT_BONE_COLOR = '#E1E9EE';
exports.DEFAULT_HIGHLIGHT_COLOR = '#F2F8FC';
-exports.DEFAULT_EASING = react_native_reanimated_1.EasingNode.bezier(0.5, 0, 0.25, 1);
+exports.DEFAULT_EASING = react_native_reanimated_1.Easing.bezier(0.5, 0, 0.25, 1);
exports.DEFAULT_LOADING = true;
diff --git a/node_modules/react-native-skeleton-content/lib/SkeletonContent.d.ts b/node_modules/react-native-skeleton-content/lib/SkeletonContent.d.ts
index 107005c..9a7df7e 100644
--- a/node_modules/react-native-skeleton-content/lib/SkeletonContent.d.ts
+++ b/node_modules/react-native-skeleton-content/lib/SkeletonContent.d.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
import { ISkeletonContentProps } from './Constants';
declare const _default: React.NamedExoticComponent;
export default _default;
diff --git a/node_modules/react-native-skeleton-content/lib/SkeletonContent.js b/node_modules/react-native-skeleton-content/lib/SkeletonContent.js
index 8e17c25..f76a556 100644
--- a/node_modules/react-native-skeleton-content/lib/SkeletonContent.js
+++ b/node_modules/react-native-skeleton-content/lib/SkeletonContent.js
@@ -1,7 +1,11 @@
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
- Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -18,289 +22,59 @@ var __importStar = (this && this.__importStar) || function (mod) {
__setModuleDefault(result, mod);
return result;
};
-var __rest = (this && this.__rest) || function (s, e) {
- var t = {};
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
- t[p] = s[p];
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
- t[p[i]] = s[p[i]];
- }
- return t;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+ return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
+const react_1 = __importStar(require("react"));
const react_native_1 = require("react-native");
-const expo_linear_gradient_1 = require("expo-linear-gradient");
-const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-const v1_1 = require("react-native-redash/lib/module/v1");
+const react_native_reanimated_1 = require("react-native-reanimated");
+const Bones_1 = __importDefault(require("./Bones/Bones"));
const Constants_1 = require("./Constants");
-const { useCode, set, cond, eq } = react_native_reanimated_1.default;
-const { useState, useCallback } = React;
+const SkeletonContentContextProvider_1 = __importDefault(require("./SkeletonContentContextProvider"));
+const useLayout_1 = require("./useLayout"); // eslint-disable-line
const styles = react_native_1.StyleSheet.create({
- absoluteGradient: {
- height: '100%',
- position: 'absolute',
- width: '100%',
- },
container: {
alignItems: 'center',
flex: 1,
- justifyContent: 'center',
- },
- gradientChild: {
- flex: 1,
- },
+ justifyContent: 'center'
+ }
});
-const useLayout = () => {
- const [size, setSize] = useState({ width: 0, height: 0 });
- const onLayout = useCallback((event) => {
- const { width, height } = event.nativeEvent.layout;
- setSize({ width, height });
+const SkeletonContent = ({ containerStyle = styles.container, easing = Constants_1.DEFAULT_EASING, duration = Constants_1.DEFAULT_DURATION, layout = [], animationType = Constants_1.DEFAULT_ANIMATION_TYPE, animationDirection = Constants_1.DEFAULT_ANIMATION_DIRECTION, isLoading = Constants_1.DEFAULT_LOADING, boneColor = Constants_1.DEFAULT_BONE_COLOR, highlightColor = Constants_1.DEFAULT_HIGHLIGHT_COLOR, children }) => {
+ const shiverValue = animationType === 'shiver' ? 1 : 0;
+ const [componentSize, onLayout] = (0, useLayout_1.useLayout)();
+ const animationValue = (0, react_native_reanimated_1.useSharedValue)(0);
+ // const animationValue = useDerivedValue(() => {
+ // if (isLoading) {
+ // if (shiverValue === 1) {
+ // return withRepeat(withTiming(1, { duration, easing }), -1);
+ // }
+ // return withRepeat(
+ // withTiming(1, { duration: duration / 2, easing }),
+ // -1,
+ // true
+ // );
+ // }
+ // return 0;
+ // });
+ (0, react_1.useEffect)(() => {
+ animationValue.value = (0, react_native_reanimated_1.withRepeat)((0, react_native_reanimated_1.withTiming)(1, {
+ duration,
+ easing,
+ }), -1);
}, []);
- return [size, onLayout];
-};
-const SkeletonContent = ({ containerStyle = styles.container, easing = Constants_1.DEFAULT_EASING, duration = Constants_1.DEFAULT_DURATION, layout = [], animationType = Constants_1.DEFAULT_ANIMATION_TYPE, animationDirection = Constants_1.DEFAULT_ANIMATION_DIRECTION, isLoading = Constants_1.DEFAULT_LOADING, boneColor = Constants_1.DEFAULT_BONE_COLOR, highlightColor = Constants_1.DEFAULT_HIGHLIGHT_COLOR, children, }) => {
- const animationValue = (0, v1_1.useValue)(0);
- const loadingValue = (0, v1_1.useValue)(isLoading ? 1 : 0);
- const shiverValue = (0, v1_1.useValue)(animationType === 'shiver' ? 1 : 0);
- const [componentSize, onLayout] = useLayout();
- useCode(() => cond(eq(loadingValue, 1), [
- cond(eq(shiverValue, 1), [
- set(animationValue, (0, v1_1.loop)({
- duration,
- easing,
- })),
- ], [
- set(animationValue, (0, v1_1.loop)({
- duration: duration / 2,
- easing,
- boomerang: true,
- })),
- ]),
- ]), [loadingValue, shiverValue, animationValue]);
- const getBoneWidth = (boneLayout) => (typeof boneLayout.width === 'string'
- ? componentSize.width
- : boneLayout.width) || 0;
- const getBoneHeight = (boneLayout) => (typeof boneLayout.height === 'string'
- ? componentSize.height
- : boneLayout.height) || 0;
- const getGradientEndDirection = (boneLayout) => {
- let direction = { x: 0, y: 0 };
- if (animationType === 'shiver') {
- if (animationDirection === 'horizontalLeft' ||
- animationDirection === 'horizontalRight') {
- direction = { x: 1, y: 0 };
- }
- else if (animationDirection === 'verticalTop' ||
- animationDirection === 'verticalDown') {
- direction = { x: 0, y: 1 };
- }
- else if (animationDirection === 'diagonalTopRight' ||
- animationDirection === 'diagonalDownRight' ||
- animationDirection === 'diagonalDownLeft' ||
- animationDirection === 'diagonalTopLeft') {
- const boneWidth = getBoneWidth(boneLayout);
- const boneHeight = getBoneHeight(boneLayout);
- if (boneWidth && boneHeight && boneWidth > boneHeight)
- return { x: 0, y: 1 };
- return { x: 1, y: 0 };
- }
- }
- return direction;
- };
- const getBoneStyles = (boneLayout) => {
- const { backgroundColor, borderRadius } = boneLayout;
- const boneWidth = getBoneWidth(boneLayout);
- const boneHeight = getBoneHeight(boneLayout);
- const boneStyle = Object.assign({ width: boneWidth, height: boneHeight, borderRadius: borderRadius || Constants_1.DEFAULT_BORDER_RADIUS }, boneLayout);
- if (animationType !== 'pulse') {
- boneStyle.overflow = 'hidden';
- boneStyle.backgroundColor = backgroundColor || boneColor;
- }
- if (animationDirection === 'diagonalDownRight' ||
- animationDirection === 'diagonalDownLeft' ||
- animationDirection === 'diagonalTopRight' ||
- animationDirection === 'diagonalTopLeft') {
- boneStyle.justifyContent = 'center';
- boneStyle.alignItems = 'center';
- }
- return boneStyle;
- };
- const getGradientSize = (boneLayout) => {
- const boneWidth = getBoneWidth(boneLayout);
- const boneHeight = getBoneHeight(boneLayout);
- const gradientStyle = {};
- if (animationDirection === 'diagonalDownRight' ||
- animationDirection === 'diagonalDownLeft' ||
- animationDirection === 'diagonalTopRight' ||
- animationDirection === 'diagonalTopLeft') {
- gradientStyle.width = boneWidth;
- gradientStyle.height = boneHeight;
- if (boneHeight >= boneWidth)
- gradientStyle.height *= 1.5;
- else
- gradientStyle.width *= 1.5;
- }
- return gradientStyle;
- };
- const getStaticBoneStyles = (boneLayout) => {
- const pulseStyles = [
- getBoneStyles(boneLayout),
- {
- backgroundColor: (0, v1_1.interpolateColor)(animationValue, {
- inputRange: [0, 1],
- outputRange: [boneColor, highlightColor],
- }),
- },
- ];
- if (animationType === 'none')
- pulseStyles.pop();
- return pulseStyles;
- };
- const getPositionRange = (boneLayout) => {
- const outputRange = [];
- // use layout dimensions for percentages (string type)
- const boneWidth = getBoneWidth(boneLayout);
- const boneHeight = getBoneHeight(boneLayout);
- if (animationDirection === 'horizontalRight') {
- outputRange.push(-boneWidth, +boneWidth);
- }
- else if (animationDirection === 'horizontalLeft') {
- outputRange.push(+boneWidth, -boneWidth);
- }
- else if (animationDirection === 'verticalDown') {
- outputRange.push(-boneHeight, +boneHeight);
- }
- else if (animationDirection === 'verticalTop') {
- outputRange.push(+boneHeight, -boneHeight);
- }
- return outputRange;
- };
- const getGradientTransform = (boneLayout) => {
- let transform = {};
- const boneWidth = getBoneWidth(boneLayout);
- const boneHeight = getBoneHeight(boneLayout);
- if (animationDirection === 'verticalTop' ||
- animationDirection === 'verticalDown' ||
- animationDirection === 'horizontalLeft' ||
- animationDirection === 'horizontalRight') {
- const interpolatedPosition = (0, react_native_reanimated_1.interpolateNode)(animationValue, {
- inputRange: [0, 1],
- outputRange: getPositionRange(boneLayout),
- });
- if (animationDirection === 'verticalTop' ||
- animationDirection === 'verticalDown') {
- transform = { translateY: interpolatedPosition };
- }
- else {
- transform = { translateX: interpolatedPosition };
- }
- }
- else if (animationDirection === 'diagonalDownRight' ||
- animationDirection === 'diagonalTopRight' ||
- animationDirection === 'diagonalDownLeft' ||
- animationDirection === 'diagonalTopLeft') {
- const diagonal = Math.sqrt(boneHeight * boneHeight + boneWidth * boneWidth);
- const mainDimension = Math.max(boneHeight, boneWidth);
- const oppositeDimension = mainDimension === boneWidth ? boneHeight : boneWidth;
- const diagonalAngle = Math.acos(mainDimension / diagonal);
- let rotateAngle = animationDirection === 'diagonalDownRight' ||
- animationDirection === 'diagonalTopLeft'
- ? Math.PI / 2 - diagonalAngle
- : Math.PI / 2 + diagonalAngle;
- const additionalRotate = animationDirection === 'diagonalDownRight' ||
- animationDirection === 'diagonalTopLeft'
- ? 2 * diagonalAngle
- : -2 * diagonalAngle;
- const distanceFactor = (diagonal + oppositeDimension) / 2;
- if (mainDimension === boneWidth && boneWidth !== boneHeight)
- rotateAngle += additionalRotate;
- const sinComponent = Math.sin(diagonalAngle) * distanceFactor;
- const cosComponent = Math.cos(diagonalAngle) * distanceFactor;
- let xOutputRange;
- let yOutputRange;
- if (animationDirection === 'diagonalDownRight' ||
- animationDirection === 'diagonalTopLeft') {
- xOutputRange =
- animationDirection === 'diagonalDownRight'
- ? [-sinComponent, sinComponent]
- : [sinComponent, -sinComponent];
- yOutputRange =
- animationDirection === 'diagonalDownRight'
- ? [-cosComponent, cosComponent]
- : [cosComponent, -cosComponent];
- }
- else {
- xOutputRange =
- animationDirection === 'diagonalDownLeft'
- ? [-sinComponent, sinComponent]
- : [sinComponent, -sinComponent];
- yOutputRange =
- animationDirection === 'diagonalDownLeft'
- ? [cosComponent, -cosComponent]
- : [-cosComponent, cosComponent];
- if (mainDimension === boneHeight && boneWidth !== boneHeight) {
- xOutputRange.reverse();
- yOutputRange.reverse();
- }
- }
- let translateX = (0, react_native_reanimated_1.interpolateNode)(animationValue, {
- inputRange: [0, 1],
- outputRange: xOutputRange,
- });
- let translateY = (0, react_native_reanimated_1.interpolateNode)(animationValue, {
- inputRange: [0, 1],
- outputRange: yOutputRange,
- });
- // swapping the translates if width is the main dim
- if (mainDimension === boneWidth)
- [translateX, translateY] = [translateY, translateX];
- const rotate = `${rotateAngle}rad`;
- transform = { translateX, translateY, rotate };
- }
- return transform;
- };
- const getBoneContainer = (layoutStyle, childrenBones, key) => (
- {childrenBones}
- );
- const getStaticBone = (layoutStyle, key) => ();
- const getShiverBone = (layoutStyle, key) => {
- const animatedStyle = Object.assign({ transform: [getGradientTransform(layoutStyle)] }, getGradientSize(layoutStyle));
- return (
-
-
-
- );
- };
- const getBones = (bonesLayout, childrenItems, prefix = '') => {
- if (bonesLayout && bonesLayout.length > 0) {
- const iterator = new Array(bonesLayout.length).fill(0);
- return iterator.map((_, i) => {
- // has a nested layout
- if (bonesLayout[i].children && bonesLayout[i].children.length > 0) {
- const containerPrefix = bonesLayout[i].key || `bone_container_${i}`;
- const _a = bonesLayout[i], { children: childBones } = _a, layoutStyle = __rest(_a, ["children"]);
- return getBoneContainer(layoutStyle, getBones(childBones, [], containerPrefix), containerPrefix);
- }
- if (animationType === 'pulse' || animationType === 'none') {
- return getStaticBone(bonesLayout[i], prefix ? `${prefix}_${i}` : i);
- }
- return getShiverBone(bonesLayout[i], prefix ? `${prefix}_${i}` : i);
- });
- // no layout, matching children's layout
- }
- return React.Children.map(childrenItems, (child, i) => {
- const styling = child.props.style || {};
- if (animationType === 'pulse' || animationType === 'none') {
- return getStaticBone(styling, i);
- }
- return getShiverBone(styling, i);
- });
+ const contextProps = {
+ animationValue,
+ animationType,
+ animationDirection,
+ componentSize,
+ boneColor,
+ highlightColor
};
return (
- {isLoading ? getBones(layout, children) : children}
- );
+ {isLoading ? (
+
+ ) : (children)}
+ );
};
-exports.default = React.memo(SkeletonContent);
+exports.default = react_1.default.memo(SkeletonContent);
diff --git a/node_modules/react-native-skeleton-content/lib/SkeletonContentContext.d.ts b/node_modules/react-native-skeleton-content/lib/SkeletonContentContext.d.ts
new file mode 100644
index 0000000..5ce1e8f
--- /dev/null
+++ b/node_modules/react-native-skeleton-content/lib/SkeletonContentContext.d.ts
@@ -0,0 +1,13 @@
+///
+import { SharedValue } from 'react-native-reanimated';
+import { AnimationDirection, AnimationType, ISize } from './Constants';
+export type SkeletonContextProps = {
+ animationValue: SharedValue<0 | 1>;
+ animationType: AnimationType;
+ animationDirection: AnimationDirection;
+ componentSize: ISize;
+ boneColor: string;
+ highlightColor: string;
+ prefix?: string | number;
+};
+export declare const SkeletonContentContext: import("react").Context;
diff --git a/node_modules/react-native-skeleton-content/lib/SkeletonContentContext.js b/node_modules/react-native-skeleton-content/lib/SkeletonContentContext.js
new file mode 100644
index 0000000..fc35003
--- /dev/null
+++ b/node_modules/react-native-skeleton-content/lib/SkeletonContentContext.js
@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonContentContext = void 0;
+const react_1 = require("react");
+exports.SkeletonContentContext = (0, react_1.createContext)(undefined);
diff --git a/node_modules/react-native-skeleton-content/lib/SkeletonContentContextProvider.d.ts b/node_modules/react-native-skeleton-content/lib/SkeletonContentContextProvider.d.ts
new file mode 100644
index 0000000..53e8f78
--- /dev/null
+++ b/node_modules/react-native-skeleton-content/lib/SkeletonContentContextProvider.d.ts
@@ -0,0 +1,4 @@
+import React, { ProviderProps } from 'react';
+import { SkeletonContextProps } from './SkeletonContentContext';
+declare const SkeletonContentContextProvider: ({ value, children }: ProviderProps) => React.JSX.Element;
+export default SkeletonContentContextProvider;
diff --git a/node_modules/react-native-skeleton-content/lib/SkeletonContentContextProvider.js b/node_modules/react-native-skeleton-content/lib/SkeletonContentContextProvider.js
new file mode 100644
index 0000000..4522bd2
--- /dev/null
+++ b/node_modules/react-native-skeleton-content/lib/SkeletonContentContextProvider.js
@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+ return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const SkeletonContentContext_1 = require("./SkeletonContentContext");
+const SkeletonContentContextProvider = ({ value, children }) => (
+ {children}
+ );
+exports.default = SkeletonContentContextProvider;
diff --git a/node_modules/react-native-skeleton-content/lib/__tests__/SkeletonContent.test.d.ts b/node_modules/react-native-skeleton-content/lib/__tests__/SkeletonContent.test.d.ts
deleted file mode 100644
index cb0ff5c..0000000
--- a/node_modules/react-native-skeleton-content/lib/__tests__/SkeletonContent.test.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export {};
diff --git a/node_modules/react-native-skeleton-content/lib/__tests__/SkeletonContent.test.js b/node_modules/react-native-skeleton-content/lib/__tests__/SkeletonContent.test.js
deleted file mode 100644
index 85276d6..0000000
--- a/node_modules/react-native-skeleton-content/lib/__tests__/SkeletonContent.test.js
+++ /dev/null
@@ -1,309 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
- return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_native_1 = require("react-native");
-const react_1 = __importDefault(require("react"));
-const react_native_reanimated_1 = __importDefault(require("react-native-reanimated"));
-const expo_linear_gradient_1 = require("expo-linear-gradient");
-const react_test_renderer_1 = require("react-test-renderer");
-const SkeletonContent_1 = __importDefault(require("../SkeletonContent"));
-const Constants_1 = require("../Constants");
-const staticStyles = {
- borderRadius: Constants_1.DEFAULT_BORDER_RADIUS,
- overflow: 'hidden',
- backgroundColor: Constants_1.DEFAULT_BONE_COLOR,
-};
-describe('SkeletonComponent test suite', () => {
- it('should render empty alone', () => {
- const tree = (0, react_test_renderer_1.create)().toJSON();
- expect(tree).toMatchSnapshot();
- });
- it('should have the correct layout when loading', () => {
- const layout = [
- {
- width: 240,
- height: 100,
- marginBottom: 10,
- },
- {
- width: 180,
- height: 40,
- borderRadius: 20,
- backgroundColor: 'grey',
- },
- ];
- const props = {
- layout,
- isLoading: true,
- animationType: 'none',
- };
- const instance = (0, react_test_renderer_1.create)();
- const component = instance.root;
- const bones = component.findAllByType(react_native_reanimated_1.default.View);
- // two bones and parent component
- expect(bones.length).toEqual(layout.length + 1);
- expect(bones[0].props.style).toEqual({
- alignItems: 'center',
- flex: 1,
- justifyContent: 'center',
- });
- // default props that are not set
- expect(bones[1].props.style).toEqual([Object.assign(Object.assign({}, layout[0]), staticStyles)]);
- expect(bones[2].props.style).toEqual([
- Object.assign({ overflow: 'hidden' }, layout[1]),
- ]);
- expect(instance.toJSON()).toMatchSnapshot();
- });
- it('should render the correct bones for children', () => {
- const props = {
- isLoading: true,
- animationType: 'shiver',
- };
- const w1 = { height: 100, width: 200 };
- const w2 = { height: 120, width: 20 };
- const w3 = { height: 80, width: 240 };
- const children = [w1, w2, w3];
- function TestComponent({ isLoading, animationType, }) {
- return (
- {children.map((c) => ())}
- );
- }
- const instance = (0, react_test_renderer_1.create)();
- let component = instance.root;
- // finding children count
- let bones = component.findAllByType(expo_linear_gradient_1.LinearGradient);
- expect(bones.length).toEqual(children.length);
- // finding styles of wrapper views
- bones = component.findAllByType(react_native_reanimated_1.default.View);
- expect(bones[1].props.style).toEqual(Object.assign(Object.assign({}, staticStyles), w1));
- expect(bones[3].props.style).toEqual(Object.assign(Object.assign({}, staticStyles), w2));
- expect(bones[5].props.style).toEqual(Object.assign(Object.assign({}, staticStyles), w3));
- // re-update with pulse animation
- instance.update();
- component = instance.root;
- bones = component.findAllByType(react_native_reanimated_1.default.View);
- // cannot test interpolated background color
- expect(bones[1].props.style).toEqual([
- Object.assign(Object.assign({}, w1), { borderRadius: Constants_1.DEFAULT_BORDER_RADIUS }),
- { backgroundColor: { ' __value': 4278190080 } },
- ]);
- expect(bones[2].props.style).toEqual([
- Object.assign(Object.assign({}, w2), { borderRadius: Constants_1.DEFAULT_BORDER_RADIUS }),
- { backgroundColor: { ' __value': 4278190080 } },
- ]);
- expect(bones[3].props.style).toEqual([
- Object.assign(Object.assign({}, w3), { borderRadius: Constants_1.DEFAULT_BORDER_RADIUS }),
- { backgroundColor: { ' __value': 4278190080 } },
- ]);
- expect(instance.toJSON()).toMatchSnapshot();
- });
- it('should have correct props and layout between loading states', () => {
- const w1 = { width: 240, height: 100, marginBottom: 10 };
- const w2 = { width: 180, height: 40 };
- const layout = [w1, w2];
- const props = {
- layout,
- isLoading: true,
- animationType: 'shiver',
- };
- const childStyle = { fontSize: 24 };
- const instance = (0, react_test_renderer_1.create)(
-
- );
- const component = instance.root;
- let bones = component.findAllByType(expo_linear_gradient_1.LinearGradient);
- // one animated view child for each bone + parent
- expect(bones.length).toEqual(layout.length);
- bones = component.findAllByType(react_native_reanimated_1.default.View);
- expect(bones[1].props.style).toEqual(Object.assign(Object.assign({}, staticStyles), w1));
- expect(bones[3].props.style).toEqual(Object.assign(Object.assign({}, staticStyles), w2));
- let children = component.findAllByType(react_native_1.Text);
- // no child since it's loading
- expect(children.length).toEqual(0);
- // update props
- instance.update(
-
- );
- bones = instance.root.findAllByType(expo_linear_gradient_1.LinearGradient);
- expect(bones.length).toEqual(0);
- children = instance.root.findAllByType(react_native_1.Text);
- expect(children.length).toEqual(1);
- expect(children[0].props.style).toEqual(childStyle);
- // re-update to loading state
- instance.update(
-
- );
- bones = instance.root.findAllByType(expo_linear_gradient_1.LinearGradient);
- expect(bones.length).toEqual(layout.length);
- bones = component.findAllByType(react_native_reanimated_1.default.View);
- expect(bones[1].props.style).toEqual(Object.assign(Object.assign({}, staticStyles), w1));
- expect(bones[3].props.style).toEqual(Object.assign(Object.assign({}, staticStyles), w2));
- children = instance.root.findAllByType(react_native_1.Text);
- // no child since it's loading
- expect(children.length).toEqual(0);
- // snapshot
- expect(instance.toJSON()).toMatchSnapshot();
- });
- it('should support nested layouts', () => {
- const layout = [
- {
- flexDirection: 'row',
- width: 320,
- height: 300,
- children: [
- {
- width: 200,
- height: 120,
- },
- {
- width: 180,
- height: 100,
- },
- ],
- },
- {
- width: 180,
- height: 40,
- borderRadius: 20,
- backgroundColor: 'grey',
- },
- ];
- const props = {
- layout,
- isLoading: true,
- animationType: 'shiver',
- };
- const instance = (0, react_test_renderer_1.create)();
- const component = instance.root;
- let bones = component.findAllByType(expo_linear_gradient_1.LinearGradient);
- // three overall bones
- expect(bones.length).toEqual(3);
- bones = component.findAllByType(react_native_reanimated_1.default.View);
- expect(bones[1].props.style).toEqual({
- flexDirection: 'row',
- width: 320,
- height: 300,
- });
- // testing that styles for nested layout and last child persist
- expect(bones[2].props.style).toEqual(Object.assign(Object.assign({}, staticStyles), layout[0].children[0]));
- expect(bones[4].props.style).toEqual(Object.assign(Object.assign({}, staticStyles), layout[0].children[1]));
- expect(bones[6].props.style).toEqual(Object.assign(Object.assign({}, staticStyles), layout[1]));
- expect(instance.toJSON()).toMatchSnapshot();
- });
- it('should support percentage for child size', () => {
- const parentHeight = 300;
- const parentWidth = 320;
- const containerStyle = {
- width: parentWidth,
- height: parentHeight,
- };
- const layout = [
- {
- width: '20%',
- height: '50%',
- borderRadius: 20,
- backgroundColor: 'grey',
- },
- {
- width: '50%',
- height: '10%',
- borderRadius: 10,
- },
- ];
- const props = {
- layout,
- isLoading: true,
- animationType: 'shiver',
- containerStyle,
- };
- const instance = (0, react_test_renderer_1.create)();
- const component = instance.root;
- let bones = component.findAllByType(expo_linear_gradient_1.LinearGradient);
- expect(bones.length).toEqual(layout.length);
- // get parent
- bones = component.findAllByType(react_native_reanimated_1.default.View);
- // testing that styles of childs corresponds to percentages
- expect(bones[1].props.style).toEqual(Object.assign(Object.assign({}, staticStyles), layout[0]));
- expect(bones[3].props.style).toEqual(Object.assign(Object.assign({}, staticStyles), layout[1]));
- expect(instance.toJSON()).toMatchSnapshot();
- });
- it('should have the correct gradient properties', () => {
- let customProps = {
- layout: [
- {
- width: 240,
- height: 100,
- marginBottom: 10,
- },
- ],
- isLoading: true,
- animationDirection: 'diagonalDownLeft',
- };
- function TestComponent(props) {
- return (
-
- );
- }
- const component = (0, react_test_renderer_1.create)();
- let gradient = component.root.findByType(expo_linear_gradient_1.LinearGradient);
- expect(gradient).toBeDefined();
- expect(gradient.props.start).toEqual({ x: 0, y: 0 });
- expect(gradient.props.end).toEqual({ x: 0, y: 1 });
- // change layout on diagonal component
- customProps = Object.assign(Object.assign({}, customProps), { layout: [
- {
- width: 240,
- height: 300,
- },
- ] });
- component.update(
-
- );
- gradient = component.root.findByType(expo_linear_gradient_1.LinearGradient);
- expect(gradient).toBeDefined();
- expect(gradient.props.start).toEqual({ x: 0, y: 0 });
- expect(gradient.props.end).toEqual({ x: 1, y: 0 });
- component.update(
-
- );
- gradient = component.root.findByType(expo_linear_gradient_1.LinearGradient);
- expect(gradient).toBeDefined();
- expect(gradient.props.start).toEqual({ x: 0, y: 0 });
- expect(gradient.props.end).toEqual({ x: 1, y: 0 });
- component.update(
-
- );
- gradient = component.root.findByType(expo_linear_gradient_1.LinearGradient);
- expect(gradient).toBeDefined();
- expect(gradient.props.start).toEqual({ x: 0, y: 0 });
- expect(gradient.props.end).toEqual({ x: 0, y: 1 });
- component.update(
-
- );
- gradient = component.root.findByType(expo_linear_gradient_1.LinearGradient);
- expect(gradient).toBeDefined();
- expect(gradient.props.start).toEqual({ x: 0, y: 0 });
- expect(gradient.props.end).toEqual({ x: 0, y: 1 });
- component.update(
-
- );
- gradient = component.root.findByType(expo_linear_gradient_1.LinearGradient);
- expect(gradient).toBeDefined();
- expect(gradient.props.start).toEqual({ x: 0, y: 0 });
- expect(gradient.props.end).toEqual({ x: 1, y: 0 });
- component.update(
-
- );
- gradient = component.root.findByType(expo_linear_gradient_1.LinearGradient);
- expect(gradient).toBeDefined();
- expect(gradient.props.start).toEqual({ x: 0, y: 0 });
- expect(gradient.props.end).toEqual({ x: 1, y: 0 });
- expect(gradient.props.colors).toEqual([
- Constants_1.DEFAULT_BONE_COLOR,
- Constants_1.DEFAULT_HIGHLIGHT_COLOR,
- Constants_1.DEFAULT_BONE_COLOR,
- ]);
- });
-});
diff --git a/node_modules/react-native-skeleton-content/lib/useLayout.d.ts b/node_modules/react-native-skeleton-content/lib/useLayout.d.ts
new file mode 100644
index 0000000..d99ba69
--- /dev/null
+++ b/node_modules/react-native-skeleton-content/lib/useLayout.d.ts
@@ -0,0 +1,16 @@
+import type { ViewProps } from 'react-native';
+import { ISize } from './Constants';
+type OnLayout = ViewProps['onLayout'];
+export type ViewLayout = {
+ x: number;
+ y: number;
+ width: number;
+ height: number;
+};
+export type ViewLayoutEvent = {
+ nativeEvent: {
+ layout: ViewLayout;
+ };
+};
+export declare const useLayout: () => [ISize, OnLayout];
+export {};
diff --git a/node_modules/react-native-skeleton-content/lib/useLayout.js b/node_modules/react-native-skeleton-content/lib/useLayout.js
new file mode 100644
index 0000000..1f1e285
--- /dev/null
+++ b/node_modules/react-native-skeleton-content/lib/useLayout.js
@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLayout = void 0;
+const react_1 = require("react");
+const useLayout = () => {
+ const [size, setSize] = (0, react_1.useState)({ width: 0, height: 0 });
+ const onLayout = (0, react_1.useCallback)((event) => {
+ const { width, height } = event.nativeEvent.layout;
+ setSize({ width, height });
+ }, []);
+ return [size, onLayout];
+};
+exports.useLayout = useLayout;