@tecsinapse/react-native-kit 1.12.15 → 1.15.0

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.15.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.14.0...@tecsinapse/react-native-kit@1.15.0) (2022-02-14)
+
+**Note:** Version bump only for package @tecsinapse/react-native-kit
+
+
+
+
+
+# [1.14.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.13.0...@tecsinapse/react-native-kit@1.14.0) (2022-02-09)
+
+**Note:** Version bump only for package @tecsinapse/react-native-kit
+
+
+
+
+
+# [1.13.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.12.16...@tecsinapse/react-native-kit@1.13.0) (2022-02-02)
+
+**Note:** Version bump only for package @tecsinapse/react-native-kit
+
+
+
+
+
+## [1.12.16](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.12.15...@tecsinapse/react-native-kit@1.12.16) (2022-01-28)
+
+**Note:** Version bump only for package @tecsinapse/react-native-kit
+
+
+
+
+
 ## [1.12.15](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.12.14...@tecsinapse/react-native-kit@1.12.15) (2022-01-24)
 
 **Note:** Version bump only for package @tecsinapse/react-native-kit

package/dist/components/atoms/Skeleton/Pulse.d.ts

@@ -0,0 +1,2 @@
+import { IAnimationComponent } from './types';
+export declare const Pulse: ({ active, width, height, childrenLayout, }: IAnimationComponent) => JSX.Element;

package/dist/components/atoms/Skeleton/Pulse.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Pulse = void 0;
+
+var _reactNative = require("react-native");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _animation = require("./animation");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Pulse = ({
+  active = true,
+  width,
+  height,
+  childrenLayout
+}) => {
+  const animatedValue = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  (0, _react.useEffect)(() => {
+    (0, _animation.pulseAnimation)(active, animatedValue);
+  }, [active]);
+  return _react.default.createElement(_reactNative.Animated.View, {
+    style: {
+      width: width ?? childrenLayout.width,
+      height: height ?? childrenLayout.height,
+      backgroundColor: 'rgba(0,0,0,0.05)',
+      position: 'absolute',
+      top: childrenLayout.x ?? 0,
+      left: childrenLayout.y ?? 0,
+      zIndex: 2,
+      overflow: 'hidden',
+      opacity: animatedValue
+    }
+  });
+};
+
+exports.Pulse = Pulse;
+//# sourceMappingURL=Pulse.js.map

package/dist/components/atoms/Skeleton/Pulse.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/Skeleton/Pulse.tsx"],"names":["Pulse","active","width","height","childrenLayout","animatedValue","Animated","Value","current","backgroundColor","position","top","x","left","y","zIndex","overflow","opacity"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAGO,MAAMA,KAAK,GAAG,CAAC;AACpBC,EAAAA,MAAM,GAAG,IADW;AAEpBC,EAAAA,KAFoB;AAGpBC,EAAAA,MAHoB;AAIpBC,EAAAA;AAJoB,CAAD,KAKM;AACzB,QAAMC,aAAa,GAAG,mBAAO,IAAIC,sBAASC,KAAb,CAAmB,CAAnB,CAAP,EAA8BC,OAApD;AAEA,wBAAU,MAAM;AACd,mCAAeP,MAAf,EAAuBI,aAAvB;AACD,GAFD,EAEG,CAACJ,MAAD,CAFH;AAIA,SACE,6BAAC,qBAAD,CAAU,IAAV;AACE,IAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAEA,KAAK,IAAIE,cAAc,CAACF,KAD1B;AAELC,MAAAA,MAAM,EAAEA,MAAM,IAAIC,cAAc,CAACD,MAF5B;AAGLM,MAAAA,eAAe,EAAE,kBAHZ;AAILC,MAAAA,QAAQ,EAAE,UAJL;AAKLC,MAAAA,GAAG,EAAEP,cAAc,CAACQ,CAAf,IAAoB,CALpB;AAMLC,MAAAA,IAAI,EAAET,cAAc,CAACU,CAAf,IAAoB,CANrB;AAOLC,MAAAA,MAAM,EAAE,CAPH;AAQLC,MAAAA,QAAQ,EAAE,QARL;AASLC,MAAAA,OAAO,EAAEZ;AATJ;AADT,IADF;AAeD,CA3BM","sourcesContent":["import { Animated } from 'react-native';\nimport React, { useEffect, useRef } from 'react';\nimport { pulseAnimation } from './animation';\nimport { IAnimationComponent } from './types';\n\nexport const Pulse = ({\n  active = true,\n  width,\n  height,\n  childrenLayout,\n}: IAnimationComponent) => {\n  const animatedValue = useRef(new Animated.Value(0)).current;\n\n  useEffect(() => {\n    pulseAnimation(active, animatedValue);\n  }, [active]);\n\n  return (\n    <Animated.View\n      style={{\n        width: width ?? childrenLayout.width,\n        height: height ?? childrenLayout.height,\n        backgroundColor: 'rgba(0,0,0,0.05)',\n        position: 'absolute',\n        top: childrenLayout.x ?? 0,\n        left: childrenLayout.y ?? 0,\n        zIndex: 2,\n        overflow: 'hidden',\n        opacity: animatedValue,\n      }}\n    />\n  );\n};\n"],"file":"Pulse.js"}

package/dist/components/atoms/Skeleton/Skeleton.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { BorderRadiusType } from '@tecsinapse/react-core';
+import { ViewProps } from 'react-native';
+export interface SkeletonProps extends ViewProps {
+    width?: number;
+    height?: number;
+    radius?: BorderRadiusType;
+    active?: boolean;
+    animation?: 'wave' | 'pulse';
+}
+declare const Skeleton: React.FC<SkeletonProps>;
+export default Skeleton;

package/dist/components/atoms/Skeleton/Skeleton.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _styled = require("./styled");
+
+var _Wave = require("./Wave");
+
+var _Pulse = require("./Pulse");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || 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); }
+
+const Skeleton = ({
+  children,
+  width,
+  height,
+  radius,
+  active = true,
+  animation = 'wave',
+  ...rest
+}) => {
+  const [childrenLayout, setChildrenLayout] = (0, _react.useState)({
+    width: 0,
+    height: 0,
+    y: 0,
+    x: 0
+  });
+
+  if (!width && !height && !children) {
+    throw new Error('[Skeleton] You should provide children or specify width and height');
+  }
+
+  const getChildrenLayout = event => {
+    setChildrenLayout(event.nativeEvent.layout);
+  };
+
+  return _react.default.createElement(_styled.Wrapper, _extends({
+    width: width,
+    height: height,
+    radius: radius
+  }, rest), active && animation === 'wave' ? _react.default.createElement(_Wave.Wave, {
+    active: active,
+    width: width,
+    height: height,
+    childrenLayout: childrenLayout
+  }) : _react.default.createElement(_Pulse.Pulse, {
+    active: active,
+    width: width,
+    height: height,
+    childrenLayout: childrenLayout
+  }), _react.default.createElement(_reactNative.View, {
+    onLayout: event => getChildrenLayout(event),
+    style: {
+      opacity: active ? 0 : 1
+    },
+    pointerEvents: active ? 'none' : 'auto'
+  }, children));
+};
+
+var _default = Skeleton;
+exports.default = _default;
+//# sourceMappingURL=Skeleton.js.map

package/dist/components/atoms/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/Skeleton/Skeleton.tsx"],"names":["Skeleton","children","width","height","radius","active","animation","rest","childrenLayout","setChildrenLayout","y","x","Error","getChildrenLayout","event","nativeEvent","layout","opacity"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;AAWA,MAAMA,QAAiC,GAAG,CAAC;AACzCC,EAAAA,QADyC;AAEzCC,EAAAA,KAFyC;AAGzCC,EAAAA,MAHyC;AAIzCC,EAAAA,MAJyC;AAKzCC,EAAAA,MAAM,GAAG,IALgC;AAMzCC,EAAAA,SAAS,GAAG,MAN6B;AAOzC,KAAGC;AAPsC,CAAD,KAQpC;AACJ,QAAM,CAACC,cAAD,EAAiBC,iBAAjB,IAAsC,qBAAyB;AACnEP,IAAAA,KAAK,EAAE,CAD4D;AAEnEC,IAAAA,MAAM,EAAE,CAF2D;AAGnEO,IAAAA,CAAC,EAAE,CAHgE;AAInEC,IAAAA,CAAC,EAAE;AAJgE,GAAzB,CAA5C;;AAOA,MAAI,CAACT,KAAD,IAAU,CAACC,MAAX,IAAqB,CAACF,QAA1B,EAAoC;AAClC,UAAM,IAAIW,KAAJ,CACJ,oEADI,CAAN;AAGD;;AAED,QAAMC,iBAAiB,GAAIC,KAAD,IAA8B;AACtDL,IAAAA,iBAAiB,CAACK,KAAK,CAACC,WAAN,CAAkBC,MAAnB,CAAjB;AACD,GAFD;;AAIA,SACE,6BAAC,eAAD;AAAS,IAAA,KAAK,EAAEd,KAAhB;AAAuB,IAAA,MAAM,EAAEC,MAA/B;AAAuC,IAAA,MAAM,EAAEC;AAA/C,KAA2DG,IAA3D,GACGF,MAAM,IAAIC,SAAS,KAAK,MAAxB,GACC,6BAAC,UAAD;AACE,IAAA,MAAM,EAAED,MADV;AAEE,IAAA,KAAK,EAAEH,KAFT;AAGE,IAAA,MAAM,EAAEC,MAHV;AAIE,IAAA,cAAc,EAAEK;AAJlB,IADD,GAQC,6BAAC,YAAD;AACE,IAAA,MAAM,EAAEH,MADV;AAEE,IAAA,KAAK,EAAEH,KAFT;AAGE,IAAA,MAAM,EAAEC,MAHV;AAIE,IAAA,cAAc,EAAEK;AAJlB,IATJ,EAgBE,6BAAC,iBAAD;AACE,IAAA,QAAQ,EAAEM,KAAK,IAAID,iBAAiB,CAACC,KAAD,CADtC;AAEE,IAAA,KAAK,EAAE;AAAEG,MAAAA,OAAO,EAAEZ,MAAM,GAAG,CAAH,GAAO;AAAxB,KAFT;AAGE,IAAA,aAAa,EAAEA,MAAM,GAAG,MAAH,GAAY;AAHnC,KAKGJ,QALH,CAhBF,CADF;AA0BD,CApDD;;eAsDeD,Q","sourcesContent":["import React, { useState } from 'react';\nimport { BorderRadiusType } from '@tecsinapse/react-core';\nimport { LayoutChangeEvent, View, ViewProps } from 'react-native';\nimport { Wrapper } from './styled';\nimport { Wave } from './Wave';\nimport { Pulse } from './Pulse';\nimport { ChildrenLayout } from './types';\n\nexport interface SkeletonProps extends ViewProps {\n  width?: number;\n  height?: number;\n  radius?: BorderRadiusType;\n  active?: boolean;\n  animation?: 'wave' | 'pulse';\n}\n\nconst Skeleton: React.FC<SkeletonProps> = ({\n  children,\n  width,\n  height,\n  radius,\n  active = true,\n  animation = 'wave',\n  ...rest\n}) => {\n  const [childrenLayout, setChildrenLayout] = useState<ChildrenLayout>({\n    width: 0,\n    height: 0,\n    y: 0,\n    x: 0,\n  });\n\n  if (!width && !height && !children) {\n    throw new Error(\n      '[Skeleton] You should provide children or specify width and height'\n    );\n  }\n\n  const getChildrenLayout = (event: LayoutChangeEvent) => {\n    setChildrenLayout(event.nativeEvent.layout);\n  };\n\n  return (\n    <Wrapper width={width} height={height} radius={radius} {...rest}>\n      {active && animation === 'wave' ? (\n        <Wave\n          active={active}\n          width={width}\n          height={height}\n          childrenLayout={childrenLayout}\n        />\n      ) : (\n        <Pulse\n          active={active}\n          width={width}\n          height={height}\n          childrenLayout={childrenLayout}\n        />\n      )}\n      <View\n        onLayout={event => getChildrenLayout(event)}\n        style={{ opacity: active ? 0 : 1 }}\n        pointerEvents={active ? 'none' : 'auto'}\n      >\n        {children}\n      </View>\n    </Wrapper>\n  );\n};\n\nexport default Skeleton;\n"],"file":"Skeleton.js"}

package/dist/components/atoms/Skeleton/Wave.d.ts

@@ -0,0 +1,2 @@
+import { IAnimationComponent } from './types';
+export declare const Wave: ({ active, width, height, childrenLayout, }: IAnimationComponent) => JSX.Element;

package/dist/components/atoms/Skeleton/Wave.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wave = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _reactNativeLinearGradient = _interopRequireDefault(require("react-native-linear-gradient"));
+
+var _animation = require("./animation");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const AnimatedLinearGradient = _reactNative.Animated.createAnimatedComponent(_reactNativeLinearGradient.default);
+
+const Wave = ({
+  active = true,
+  width,
+  height,
+  childrenLayout
+}) => {
+  const range = width ?? childrenLayout.width;
+  const animatedValue = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const translateX = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-range, range]
+  });
+  (0, _react.useEffect)(() => {
+    (0, _animation.waveAnimation)(active, animatedValue);
+  }, [active]);
+  return _react.default.createElement(AnimatedLinearGradient, {
+    colors: ['transparent', 'rgba(0,0,0,0.05)', 'rgba(0,0,0,0.1)', 'transparent'],
+    start: {
+      x: 0,
+      y: 0
+    },
+    end: {
+      x: 1,
+      y: 0
+    },
+    style: {
+      width: width ?? childrenLayout.width,
+      height: height ?? childrenLayout.height,
+      position: 'absolute',
+      top: childrenLayout.y ?? 0,
+      left: childrenLayout.x ?? 0,
+      zIndex: 2,
+      overflow: 'hidden',
+      transform: [{
+        translateX: translateX
+      }]
+    }
+  });
+};
+
+exports.Wave = Wave;
+//# sourceMappingURL=Wave.js.map

package/dist/components/atoms/Skeleton/Wave.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/Skeleton/Wave.tsx"],"names":["AnimatedLinearGradient","Animated","createAnimatedComponent","LinearGradient","Wave","active","width","height","childrenLayout","range","animatedValue","Value","current","translateX","interpolate","inputRange","outputRange","x","y","position","top","left","zIndex","overflow","transform"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AAGA,MAAMA,sBAAsB,GAAGC,sBAASC,uBAAT,CAAiCC,kCAAjC,CAA/B;;AAEO,MAAMC,IAAI,GAAG,CAAC;AACnBC,EAAAA,MAAM,GAAG,IADU;AAEnBC,EAAAA,KAFmB;AAGnBC,EAAAA,MAHmB;AAInBC,EAAAA;AAJmB,CAAD,KAKO;AACzB,QAAMC,KAAK,GAAGH,KAAK,IAAIE,cAAc,CAACF,KAAtC;AACA,QAAMI,aAAa,GAAG,mBAAO,IAAIT,sBAASU,KAAb,CAAmB,CAAnB,CAAP,EAA8BC,OAApD;AAEA,QAAMC,UAAU,GAAGH,aAAa,CAACI,WAAd,CAA0B;AAC3CC,IAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CAD+B;AAE3CC,IAAAA,WAAW,EAAE,CAAC,CAACP,KAAF,EAASA,KAAT;AAF8B,GAA1B,CAAnB;AAKA,wBAAU,MAAM;AACd,kCAAcJ,MAAd,EAAsBK,aAAtB;AACD,GAFD,EAEG,CAACL,MAAD,CAFH;AAIA,SACE,6BAAC,sBAAD;AACE,IAAA,MAAM,EAAE,CACN,aADM,EAEN,kBAFM,EAGN,iBAHM,EAIN,aAJM,CADV;AAOE,IAAA,KAAK,EAAE;AAAEY,MAAAA,CAAC,EAAE,CAAL;AAAQC,MAAAA,CAAC,EAAE;AAAX,KAPT;AAQE,IAAA,GAAG,EAAE;AAAED,MAAAA,CAAC,EAAE,CAAL;AAAQC,MAAAA,CAAC,EAAE;AAAX,KARP;AASE,IAAA,KAAK,EAAE;AACLZ,MAAAA,KAAK,EAAEA,KAAK,IAAIE,cAAc,CAACF,KAD1B;AAELC,MAAAA,MAAM,EAAEA,MAAM,IAAIC,cAAc,CAACD,MAF5B;AAGLY,MAAAA,QAAQ,EAAE,UAHL;AAILC,MAAAA,GAAG,EAAEZ,cAAc,CAACU,CAAf,IAAoB,CAJpB;AAKLG,MAAAA,IAAI,EAAEb,cAAc,CAACS,CAAf,IAAoB,CALrB;AAMLK,MAAAA,MAAM,EAAE,CANH;AAOLC,MAAAA,QAAQ,EAAE,QAPL;AAQLC,MAAAA,SAAS,EAAE,CACT;AACEX,QAAAA,UAAU,EAAEA;AADd,OADS;AARN;AATT,IADF;AA0BD,CA5CM","sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { Animated } from 'react-native';\nimport LinearGradient from 'react-native-linear-gradient';\nimport { waveAnimation } from './animation';\nimport { IAnimationComponent } from './types';\n\nconst AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);\n\nexport const Wave = ({\n  active = true,\n  width,\n  height,\n  childrenLayout,\n}: IAnimationComponent) => {\n  const range = width ?? childrenLayout.width;\n  const animatedValue = useRef(new Animated.Value(0)).current;\n\n  const translateX = animatedValue.interpolate({\n    inputRange: [0, 1],\n    outputRange: [-range, range],\n  });\n\n  useEffect(() => {\n    waveAnimation(active, animatedValue);\n  }, [active]);\n\n  return (\n    <AnimatedLinearGradient\n      colors={[\n        'transparent',\n        'rgba(0,0,0,0.05)',\n        'rgba(0,0,0,0.1)',\n        'transparent',\n      ]}\n      start={{ x: 0, y: 0 }}\n      end={{ x: 1, y: 0 }}\n      style={{\n        width: width ?? childrenLayout.width,\n        height: height ?? childrenLayout.height,\n        position: 'absolute',\n        top: childrenLayout.y ?? 0,\n        left: childrenLayout.x ?? 0,\n        zIndex: 2,\n        overflow: 'hidden',\n        transform: [\n          {\n            translateX: translateX,\n          },\n        ],\n      }}\n    />\n  );\n};\n"],"file":"Wave.js"}

package/dist/components/atoms/Skeleton/animation.d.ts

@@ -0,0 +1,3 @@
+import { Animated } from 'react-native';
+export declare const waveAnimation: (active: boolean, animatedValue: Animated.Value) => void;
+export declare const pulseAnimation: (active: boolean, animatedValue: Animated.Value) => void;

package/dist/components/atoms/Skeleton/animation.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pulseAnimation = exports.waveAnimation = void 0;
+
+var _reactNative = require("react-native");
+
+const waveAnimation = (active, animatedValue) => {
+  if (active) {
+    _reactNative.Animated.loop(_reactNative.Animated.timing(animatedValue, {
+      toValue: 1,
+      duration: 1600,
+      easing: _reactNative.Easing.inOut(_reactNative.Easing.linear),
+      useNativeDriver: true
+    })).start();
+
+    return;
+  }
+
+  _reactNative.Animated.timing(animatedValue, {
+    toValue: 0,
+    useNativeDriver: true
+  }).start();
+};
+
+exports.waveAnimation = waveAnimation;
+
+const pulseAnimation = (active, animatedValue) => {
+  if (active) {
+    _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(animatedValue, {
+      toValue: 1,
+      duration: 800,
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(animatedValue, {
+      toValue: 0,
+      duration: 800,
+      useNativeDriver: true
+    })])).start();
+
+    return;
+  }
+
+  _reactNative.Animated.timing(animatedValue, {
+    toValue: 0,
+    useNativeDriver: true
+  }).start();
+};
+
+exports.pulseAnimation = pulseAnimation;
+//# sourceMappingURL=animation.js.map

package/dist/components/atoms/Skeleton/animation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/Skeleton/animation.ts"],"names":["waveAnimation","active","animatedValue","Animated","loop","timing","toValue","duration","easing","Easing","inOut","linear","useNativeDriver","start","pulseAnimation","sequence"],"mappings":";;;;;;;AAAA;;AAEO,MAAMA,aAAa,GAAG,CAC3BC,MAD2B,EAE3BC,aAF2B,KAGlB;AACT,MAAID,MAAJ,EAAY;AACVE,0BAASC,IAAT,CACED,sBAASE,MAAT,CAAgBH,aAAhB,EAA+B;AAC7BI,MAAAA,OAAO,EAAE,CADoB;AAE7BC,MAAAA,QAAQ,EAAE,IAFmB;AAG7BC,MAAAA,MAAM,EAAEC,oBAAOC,KAAP,CAAaD,oBAAOE,MAApB,CAHqB;AAI7BC,MAAAA,eAAe,EAAE;AAJY,KAA/B,CADF,EAOEC,KAPF;;AAQA;AACD;;AACDV,wBAASE,MAAT,CAAgBH,aAAhB,EAA+B;AAC7BI,IAAAA,OAAO,EAAE,CADoB;AAE7BM,IAAAA,eAAe,EAAE;AAFY,GAA/B,EAGGC,KAHH;AAID,CAnBM;;;;AAqBA,MAAMC,cAAc,GAAG,CAC5Bb,MAD4B,EAE5BC,aAF4B,KAGnB;AACT,MAAID,MAAJ,EAAY;AACVE,0BAASC,IAAT,CACED,sBAASY,QAAT,CAAkB,CAChBZ,sBAASE,MAAT,CAAgBH,aAAhB,EAA+B;AAC7BI,MAAAA,OAAO,EAAE,CADoB;AAE7BC,MAAAA,QAAQ,EAAE,GAFmB;AAG7BK,MAAAA,eAAe,EAAE;AAHY,KAA/B,CADgB,EAMhBT,sBAASE,MAAT,CAAgBH,aAAhB,EAA+B;AAC7BI,MAAAA,OAAO,EAAE,CADoB;AAE7BC,MAAAA,QAAQ,EAAE,GAFmB;AAG7BK,MAAAA,eAAe,EAAE;AAHY,KAA/B,CANgB,CAAlB,CADF,EAaEC,KAbF;;AAcA;AACD;;AACDV,wBAASE,MAAT,CAAgBH,aAAhB,EAA+B;AAC7BI,IAAAA,OAAO,EAAE,CADoB;AAE7BM,IAAAA,eAAe,EAAE;AAFY,GAA/B,EAGGC,KAHH;AAID,CAzBM","sourcesContent":["import { Animated, Easing } from 'react-native';\n\nexport const waveAnimation = (\n  active: boolean,\n  animatedValue: Animated.Value\n): void => {\n  if (active) {\n    Animated.loop(\n      Animated.timing(animatedValue, {\n        toValue: 1,\n        duration: 1600,\n        easing: Easing.inOut(Easing.linear),\n        useNativeDriver: true,\n      })\n    ).start();\n    return;\n  }\n  Animated.timing(animatedValue, {\n    toValue: 0,\n    useNativeDriver: true,\n  }).start();\n};\n\nexport const pulseAnimation = (\n  active: boolean,\n  animatedValue: Animated.Value\n): void => {\n  if (active) {\n    Animated.loop(\n      Animated.sequence([\n        Animated.timing(animatedValue, {\n          toValue: 1,\n          duration: 800,\n          useNativeDriver: true,\n        }),\n        Animated.timing(animatedValue, {\n          toValue: 0,\n          duration: 800,\n          useNativeDriver: true,\n        }),\n      ])\n    ).start();\n    return;\n  }\n  Animated.timing(animatedValue, {\n    toValue: 0,\n    useNativeDriver: true,\n  }).start();\n};\n"],"file":"animation.js"}

package/dist/components/atoms/Skeleton/index.d.ts

@@ -0,0 +1 @@
+export { default as Skeleton, SkeletonProps } from './Skeleton';

package/dist/components/atoms/Skeleton/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Skeleton", {
+  enumerable: true,
+  get: function () {
+    return _Skeleton.default;
+  }
+});
+Object.defineProperty(exports, "SkeletonProps", {
+  enumerable: true,
+  get: function () {
+    return _Skeleton.SkeletonProps;
+  }
+});
+
+var _Skeleton = _interopRequireWildcard(require("./Skeleton"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+//# sourceMappingURL=index.js.map

package/dist/components/atoms/Skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/Skeleton/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as Skeleton, SkeletonProps } from './Skeleton';\n"],"file":"index.js"}

package/dist/components/atoms/Skeleton/styled.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<any>, {}, {
+    ref?: import("react").Ref<import("react-native").View> | undefined;
+}>;

package/dist/components/atoms/Skeleton/styled.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = void 0;
+
+var _native = _interopRequireDefault(require("@emotion/native"));
+
+var _reactCore = require("@tecsinapse/react-core");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Wrapper = _native.default.View`
+  width: ${({
+  width
+}) => width ? `${(0, _reactCore.RFValueStr)(`${width}px`)}` : '100%'};
+  height: ${({
+  height
+}) => height ? `${(0, _reactCore.RFValueStr)(`${height}px`)}` : 'auto'};
+  border-radius: ${({
+  theme,
+  radius
+}) => radius ? theme.borderRadius[radius] : 0};
+  overflow: hidden;
+  position: relative;
+`;
+exports.Wrapper = Wrapper;
+//# sourceMappingURL=styled.js.map

package/dist/components/atoms/Skeleton/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/Skeleton/styled.ts"],"names":["Wrapper","styled","View","width","height","theme","radius","borderRadius"],"mappings":";;;;;;;AAAA;;AACA;;;;AAGO,MAAMA,OAAO,GAAGC,gBAAOC,IAA0C;AACxE,WAAW,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAgBA,KAAK,GAAI,GAAE,2BAAY,GAAEA,KAAM,IAApB,CAAyB,EAA/B,GAAmC,MAAQ;AAC3E,YAAY,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAiBA,MAAM,GAAI,GAAE,2BAAY,GAAEA,MAAO,IAArB,CAA0B,EAAhC,GAAoC,MAAQ;AAC/E,mBAAmB,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA;AAAT,CAAD,KACfA,MAAM,GAAGD,KAAK,CAACE,YAAN,CAAmBD,MAAnB,CAAH,GAAgC,CAAE;AAC5C;AACA;AACA,CAPO","sourcesContent":["import styled from '@emotion/native';\nimport { RFValueStr, StyleProps } from '@tecsinapse/react-core';\nimport { SkeletonProps } from './Skeleton';\n\nexport const Wrapper = styled.View<Partial<StyleProps & SkeletonProps>>`\n  width: ${({ width }) => (width ? `${RFValueStr(`${width}px`)}` : '100%')};\n  height: ${({ height }) => (height ? `${RFValueStr(`${height}px`)}` : 'auto')};\n  border-radius: ${({ theme, radius }: StyleProps & Partial<SkeletonProps>) =>\n    radius ? theme.borderRadius[radius] : 0};\n  overflow: hidden;\n  position: relative;\n`;\n"],"file":"styled.js"}

package/dist/components/atoms/Skeleton/types.d.ts

@@ -0,0 +1,12 @@
+export declare type ChildrenLayout = {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+};
+export interface IAnimationComponent {
+    width?: number;
+    height?: number;
+    active?: boolean;
+    childrenLayout: ChildrenLayout;
+}

package/dist/components/atoms/Skeleton/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/dist/components/atoms/Skeleton/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"types.js"}

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { Select, SelectNativeProps } from './components/molecules/Select';
 export { Input, InputNativeProps } from './components/atoms/Input';
 export { TextArea, TextAreaProps } from './components/atoms/TextArea';
 export { Text, TextNativeProps } from './components/atoms/Text';
-export { Error, Loading, Success, Button, ButtonNativeProps } from './components/atoms/Button';
+export { Error, Loading, Success, Button, ButtonNativeProps, } from './components/atoms/Button';
 export { GroupButtonOption } from './components/atoms/GroupButton';
 export { InputPassword, InputPasswordNativeProps, } from './components/molecules/InputPassword';
 export { BottomNavigator, BottomNavigatorProps, } from './components/atoms/BottomNavigator';
@@ -12,9 +12,10 @@ export { Tag, TagProps } from './components/atoms/Tag';
 export { SnappingSlider, SnappingSliderProps, } from './components/atoms/SnappingSlider';
 export { Badge, BadgeNativeProps } from './components/atoms/Badge';
 export { Snackbar, SnackbarNativeProps } from './components/molecules/Snackbar';
-export { DatePicker, NativeDatePickerProps } from './components/molecules/DatePicker';
-export { DateTimePicker, NativeDateTimePickerProps } from './components/molecules/DateTimePicker';
+export { DatePicker, NativeDatePickerProps, } from './components/molecules/DatePicker';
+export { DateTimePicker, NativeDateTimePickerProps, } from './components/molecules/DateTimePicker';
 export { Avatar } from './components/atoms/Avatar';
 export { Calendar } from './components/molecules/Calendar';
 export { DateTimeSelector } from './components/molecules/DateTimeSelector';
-export { ModalGroupManager, ModalView, ModalLifecycleHandler, useLazyModalManager, useModalManager, IBaseModal } from './components/atoms/Modal';
+export { ModalGroupManager, ModalView, ModalLifecycleHandler, useLazyModalManager, useModalManager, IBaseModal, } from './components/atoms/Modal';
+export { Skeleton, SkeletonProps } from './components/atoms/Skeleton';

package/dist/index.js

@@ -44,7 +44,9 @@ var _exportNames = {
   ModalLifecycleHandler: true,
   useLazyModalManager: true,
   useModalManager: true,
-  IBaseModal: true
+  IBaseModal: true,
+  Skeleton: true,
+  SkeletonProps: true
 };
 Object.defineProperty(exports, "Header", {
   enumerable: true,
@@ -292,6 +294,18 @@ Object.defineProperty(exports, "IBaseModal", {
     return _Modal.IBaseModal;
   }
 });
+Object.defineProperty(exports, "Skeleton", {
+  enumerable: true,
+  get: function () {
+    return _Skeleton.Skeleton;
+  }
+});
+Object.defineProperty(exports, "SkeletonProps", {
+  enumerable: true,
+  get: function () {
+    return _Skeleton.SkeletonProps;
+  }
+});
 
 var _reactCore = require("@tecsinapse/react-core");
 
@@ -344,4 +358,6 @@ var _Calendar = require("./components/molecules/Calendar");
 var _DateTimeSelector = require("./components/molecules/DateTimeSelector");
 
 var _Modal = require("./components/atoms/Modal");
+
+var _Skeleton = require("./components/atoms/Skeleton");
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAIA;;AAIA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["export * from '@tecsinapse/react-core';\nexport { Header, HeaderProps } from './components/atoms/Header';\nexport { Select, SelectNativeProps } from './components/molecules/Select';\nexport { Input, InputNativeProps } from './components/atoms/Input';\nexport { TextArea, TextAreaProps } from './components/atoms/TextArea';\nexport { Text, TextNativeProps } from './components/atoms/Text';\nexport { Error, Loading, Success, Button, ButtonNativeProps } from './components/atoms/Button';\nexport { GroupButtonOption } from './components/atoms/GroupButton';\nexport {\n  InputPassword,\n  InputPasswordNativeProps,\n} from './components/molecules/InputPassword';\nexport {\n  BottomNavigator,\n  BottomNavigatorProps,\n} from './components/atoms/BottomNavigator';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport {\n  SnappingSlider,\n  SnappingSliderProps,\n} from './components/atoms/SnappingSlider';\nexport { Badge, BadgeNativeProps } from './components/atoms/Badge';\nexport { Snackbar, SnackbarNativeProps } from './components/molecules/Snackbar';\nexport { DatePicker, NativeDatePickerProps } from './components/molecules/DatePicker';\nexport { DateTimePicker, NativeDateTimePickerProps } from './components/molecules/DateTimePicker';\nexport { Avatar } from './components/atoms/Avatar';\nexport { Calendar } from './components/molecules/Calendar';\nexport { DateTimeSelector } from './components/molecules/DateTimeSelector';\nexport { ModalGroupManager, ModalView, ModalLifecycleHandler, useLazyModalManager, useModalManager, IBaseModal } from './components/atoms/Modal';\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAOA;;AACA;;AAIA;;AAIA;;AACA;;AAIA;;AACA;;AACA;;AAIA;;AAIA;;AACA;;AACA;;AACA;;AAQA","sourcesContent":["export * from '@tecsinapse/react-core';\nexport { Header, HeaderProps } from './components/atoms/Header';\nexport { Select, SelectNativeProps } from './components/molecules/Select';\nexport { Input, InputNativeProps } from './components/atoms/Input';\nexport { TextArea, TextAreaProps } from './components/atoms/TextArea';\nexport { Text, TextNativeProps } from './components/atoms/Text';\nexport {\n  Error,\n  Loading,\n  Success,\n  Button,\n  ButtonNativeProps,\n} from './components/atoms/Button';\nexport { GroupButtonOption } from './components/atoms/GroupButton';\nexport {\n  InputPassword,\n  InputPasswordNativeProps,\n} from './components/molecules/InputPassword';\nexport {\n  BottomNavigator,\n  BottomNavigatorProps,\n} from './components/atoms/BottomNavigator';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport {\n  SnappingSlider,\n  SnappingSliderProps,\n} from './components/atoms/SnappingSlider';\nexport { Badge, BadgeNativeProps } from './components/atoms/Badge';\nexport { Snackbar, SnackbarNativeProps } from './components/molecules/Snackbar';\nexport {\n  DatePicker,\n  NativeDatePickerProps,\n} from './components/molecules/DatePicker';\nexport {\n  DateTimePicker,\n  NativeDateTimePickerProps,\n} from './components/molecules/DateTimePicker';\nexport { Avatar } from './components/atoms/Avatar';\nexport { Calendar } from './components/molecules/Calendar';\nexport { DateTimeSelector } from './components/molecules/DateTimeSelector';\nexport {\n  ModalGroupManager,\n  ModalView,\n  ModalLifecycleHandler,\n  useLazyModalManager,\n  useModalManager,\n  IBaseModal,\n} from './components/atoms/Modal';\nexport { Skeleton, SkeletonProps } from './components/atoms/Skeleton';\n"],"file":"index.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-native-kit",
   "description": "TecSinapse React Native components",
-  "version": "1.12.15",
+  "version": "1.15.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
@@ -13,7 +13,8 @@
   "dependencies": {
     "@emotion/native": "^11.0.0",
     "@emotion/react": "^11.4.1",
-    "@tecsinapse/react-core": "^1.12.10"
+    "@tecsinapse/react-core": "^1.14.0",
+    "react-native-linear-gradient": "^2.5.6"
   },
   "repository": {
     "type": "git",
@@ -27,6 +28,7 @@
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-native": ">=0.64.0",
+    "react-native-linear-gradient": "^2.5.6",
     "react-native-safe-area-context": "^3.1.9",
     "react-native-vector-icons": ">=8.1.0",
     "uuid": "^8.3.2"
@@ -34,5 +36,5 @@
   "devDependencies": {
     "@types/uuid": "^8.3.3"
   },
-  "gitHead": "b786cb2b22f10dcb8939354cf4a1dba4a5a1ee3a"
+  "gitHead": "fb1d3b3bfa028174ef30ee2c9387a04c81699c3f"
 }

package/src/components/atoms/Skeleton/Pulse.tsx

@@ -0,0 +1,33 @@
+import { Animated } from 'react-native';
+import React, { useEffect, useRef } from 'react';
+import { pulseAnimation } from './animation';
+import { IAnimationComponent } from './types';
+
+export const Pulse = ({
+  active = true,
+  width,
+  height,
+  childrenLayout,
+}: IAnimationComponent) => {
+  const animatedValue = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    pulseAnimation(active, animatedValue);
+  }, [active]);
+
+  return (
+    <Animated.View
+      style={{
+        width: width ?? childrenLayout.width,
+        height: height ?? childrenLayout.height,
+        backgroundColor: 'rgba(0,0,0,0.05)',
+        position: 'absolute',
+        top: childrenLayout.x ?? 0,
+        left: childrenLayout.y ?? 0,
+        zIndex: 2,
+        overflow: 'hidden',
+        opacity: animatedValue,
+      }}
+    />
+  );
+};

package/src/components/atoms/Skeleton/Skeleton.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { BorderRadiusType } from '@tecsinapse/react-core';
+import { LayoutChangeEvent, View, ViewProps } from 'react-native';
+import { Wrapper } from './styled';
+import { Wave } from './Wave';
+import { Pulse } from './Pulse';
+import { ChildrenLayout } from './types';
+
+export interface SkeletonProps extends ViewProps {
+  width?: number;
+  height?: number;
+  radius?: BorderRadiusType;
+  active?: boolean;
+  animation?: 'wave' | 'pulse';
+}
+
+const Skeleton: React.FC<SkeletonProps> = ({
+  children,
+  width,
+  height,
+  radius,
+  active = true,
+  animation = 'wave',
+  ...rest
+}) => {
+  const [childrenLayout, setChildrenLayout] = useState<ChildrenLayout>({
+    width: 0,
+    height: 0,
+    y: 0,
+    x: 0,
+  });
+
+  if (!width && !height && !children) {
+    throw new Error(
+      '[Skeleton] You should provide children or specify width and height'
+    );
+  }
+
+  const getChildrenLayout = (event: LayoutChangeEvent) => {
+    setChildrenLayout(event.nativeEvent.layout);
+  };
+
+  return (
+    <Wrapper width={width} height={height} radius={radius} {...rest}>
+      {active && animation === 'wave' ? (
+        <Wave
+          active={active}
+          width={width}
+          height={height}
+          childrenLayout={childrenLayout}
+        />
+      ) : (
+        <Pulse
+          active={active}
+          width={width}
+          height={height}
+          childrenLayout={childrenLayout}
+        />
+      )}
+      <View
+        onLayout={event => getChildrenLayout(event)}
+        style={{ opacity: active ? 0 : 1 }}
+        pointerEvents={active ? 'none' : 'auto'}
+      >
+        {children}
+      </View>
+    </Wrapper>
+  );
+};
+
+export default Skeleton;

package/src/components/atoms/Skeleton/Wave.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { waveAnimation } from './animation';
+import { IAnimationComponent } from './types';
+
+const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
+
+export const Wave = ({
+  active = true,
+  width,
+  height,
+  childrenLayout,
+}: IAnimationComponent) => {
+  const range = width ?? childrenLayout.width;
+  const animatedValue = useRef(new Animated.Value(0)).current;
+
+  const translateX = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-range, range],
+  });
+
+  useEffect(() => {
+    waveAnimation(active, animatedValue);
+  }, [active]);
+
+  return (
+    <AnimatedLinearGradient
+      colors={[
+        'transparent',
+        'rgba(0,0,0,0.05)',
+        'rgba(0,0,0,0.1)',
+        'transparent',
+      ]}
+      start={{ x: 0, y: 0 }}
+      end={{ x: 1, y: 0 }}
+      style={{
+        width: width ?? childrenLayout.width,
+        height: height ?? childrenLayout.height,
+        position: 'absolute',
+        top: childrenLayout.y ?? 0,
+        left: childrenLayout.x ?? 0,
+        zIndex: 2,
+        overflow: 'hidden',
+        transform: [
+          {
+            translateX: translateX,
+          },
+        ],
+      }}
+    />
+  );
+};

package/src/components/atoms/Skeleton/animation.ts

@@ -0,0 +1,49 @@
+import { Animated, Easing } from 'react-native';
+
+export const waveAnimation = (
+  active: boolean,
+  animatedValue: Animated.Value
+): void => {
+  if (active) {
+    Animated.loop(
+      Animated.timing(animatedValue, {
+        toValue: 1,
+        duration: 1600,
+        easing: Easing.inOut(Easing.linear),
+        useNativeDriver: true,
+      })
+    ).start();
+    return;
+  }
+  Animated.timing(animatedValue, {
+    toValue: 0,
+    useNativeDriver: true,
+  }).start();
+};
+
+export const pulseAnimation = (
+  active: boolean,
+  animatedValue: Animated.Value
+): void => {
+  if (active) {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(animatedValue, {
+          toValue: 1,
+          duration: 800,
+          useNativeDriver: true,
+        }),
+        Animated.timing(animatedValue, {
+          toValue: 0,
+          duration: 800,
+          useNativeDriver: true,
+        }),
+      ])
+    ).start();
+    return;
+  }
+  Animated.timing(animatedValue, {
+    toValue: 0,
+    useNativeDriver: true,
+  }).start();
+};

package/src/components/atoms/Skeleton/index.ts

@@ -0,0 +1 @@
+export { default as Skeleton, SkeletonProps } from './Skeleton';

package/src/components/atoms/Skeleton/styled.ts

@@ -0,0 +1,12 @@
+import styled from '@emotion/native';
+import { RFValueStr, StyleProps } from '@tecsinapse/react-core';
+import { SkeletonProps } from './Skeleton';
+
+export const Wrapper = styled.View<Partial<StyleProps & SkeletonProps>>`
+  width: ${({ width }) => (width ? `${RFValueStr(`${width}px`)}` : '100%')};
+  height: ${({ height }) => (height ? `${RFValueStr(`${height}px`)}` : 'auto')};
+  border-radius: ${({ theme, radius }: StyleProps & Partial<SkeletonProps>) =>
+    radius ? theme.borderRadius[radius] : 0};
+  overflow: hidden;
+  position: relative;
+`;

package/src/components/atoms/Skeleton/types.ts

@@ -0,0 +1,13 @@
+export type ChildrenLayout = {
+  width: number;
+  height: number;
+  x: number;
+  y: number;
+};
+
+export interface IAnimationComponent {
+  width?: number;
+  height?: number;
+  active?: boolean;
+  childrenLayout: ChildrenLayout;
+}

package/src/index.ts

@@ -4,7 +4,13 @@ export { Select, SelectNativeProps } from './components/molecules/Select';
 export { Input, InputNativeProps } from './components/atoms/Input';
 export { TextArea, TextAreaProps } from './components/atoms/TextArea';
 export { Text, TextNativeProps } from './components/atoms/Text';
-export { Error, Loading, Success, Button, ButtonNativeProps } from './components/atoms/Button';
+export {
+  Error,
+  Loading,
+  Success,
+  Button,
+  ButtonNativeProps,
+} from './components/atoms/Button';
 export { GroupButtonOption } from './components/atoms/GroupButton';
 export {
   InputPassword,
@@ -21,9 +27,23 @@ export {
 } from './components/atoms/SnappingSlider';
 export { Badge, BadgeNativeProps } from './components/atoms/Badge';
 export { Snackbar, SnackbarNativeProps } from './components/molecules/Snackbar';
-export { DatePicker, NativeDatePickerProps } from './components/molecules/DatePicker';
-export { DateTimePicker, NativeDateTimePickerProps } from './components/molecules/DateTimePicker';
+export {
+  DatePicker,
+  NativeDatePickerProps,
+} from './components/molecules/DatePicker';
+export {
+  DateTimePicker,
+  NativeDateTimePickerProps,
+} from './components/molecules/DateTimePicker';
 export { Avatar } from './components/atoms/Avatar';
 export { Calendar } from './components/molecules/Calendar';
 export { DateTimeSelector } from './components/molecules/DateTimeSelector';
-export { ModalGroupManager, ModalView, ModalLifecycleHandler, useLazyModalManager, useModalManager, IBaseModal } from './components/atoms/Modal';
+export {
+  ModalGroupManager,
+  ModalView,
+  ModalLifecycleHandler,
+  useLazyModalManager,
+  useModalManager,
+  IBaseModal,
+} from './components/atoms/Modal';
+export { Skeleton, SkeletonProps } from './components/atoms/Skeleton';