@tecsinapse/react-native-kit 1.12.1 → 1.12.5

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.12.5](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.12.4...@tecsinapse/react-native-kit@1.12.5) (2021-12-29)
+
+**Note:** Version bump only for package @tecsinapse/react-native-kit
+
+
+
+
+
+## [1.12.4](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.12.3...@tecsinapse/react-native-kit@1.12.4) (2021-12-23)
+
+**Note:** Version bump only for package @tecsinapse/react-native-kit
+
+
+
+
+
+## [1.12.3](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.12.2...@tecsinapse/react-native-kit@1.12.3) (2021-12-23)
+
+**Note:** Version bump only for package @tecsinapse/react-native-kit
+
+
+
+
+
+## [1.12.2](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.12.1...@tecsinapse/react-native-kit@1.12.2) (2021-12-22)
+
+**Note:** Version bump only for package @tecsinapse/react-native-kit
+
+
+
+
+
 ## [1.12.1](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.12.0...@tecsinapse/react-native-kit@1.12.1) (2021-12-21)
 
 **Note:** Version bump only for package @tecsinapse/react-native-kit

package/dist/components/atoms/Modal/ModalGroupManager.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+export declare const modalLifecycle: import("./ModalLifecycleHandler").ModalLifecycleHandler;
+export declare const ModalGroupManager: FC;

package/dist/components/atoms/Modal/ModalGroupManager.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalGroupManager = exports.modalLifecycle = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _ModalLifecycleHandler = require("./ModalLifecycleHandler");
+
+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 modalLifecycle = (0, _ModalLifecycleHandler.createModalLifecycleHandler)();
+exports.modalLifecycle = modalLifecycle;
+
+const ModalGroupManager = ({
+  children
+}) => {
+  modalLifecycle.attach((0, _react.useState)([]));
+
+  const _render = modalLifecycle.render();
+
+  const hasModals = _render.length > 0;
+  return _react.default.createElement(_react.default.Fragment, null, children, _react.default.createElement(_reactNative.Modal, {
+    visible: hasModals,
+    transparent: true,
+    animationType: "none"
+  }, _render));
+};
+
+exports.ModalGroupManager = ModalGroupManager;
+//# sourceMappingURL=ModalGroupManager.js.map

package/dist/components/atoms/Modal/ModalGroupManager.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/Modal/ModalGroupManager.tsx"],"names":["modalLifecycle","ModalGroupManager","children","attach","_render","render","hasModals","length"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAGO,MAAMA,cAAc,GAAG,yDAAvB;;;AAQA,MAAMC,iBAAqB,GAAG,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAkB;AAEnDF,EAAAA,cAAc,CAACG,MAAf,CAAsB,qBAAqC,EAArC,CAAtB;;AACA,QAAMC,OAAO,GAAGJ,cAAc,CAACK,MAAf,EAAhB;;AACA,QAAMC,SAAS,GAAGF,OAAO,CAACG,MAAR,GAAiB,CAAnC;AAEA,SACI,4DACKL,QADL,EAEI,6BAAC,kBAAD;AAAS,IAAA,OAAO,EAAEI,SAAlB;AAA6B,IAAA,WAAW,MAAxC;AAAyC,IAAA,aAAa,EAAC;AAAvD,KACKF,OADL,CAFJ,CADJ;AAQH,CAdM","sourcesContent":["import React, { FC, ReactElement, useState } from 'react';\nimport { Modal as RNModal } from 'react-native';\nimport { createModalLifecycleHandler } from './ModalLifecycleHandler';\nimport { IBaseModal } from './ui/types';\n\nexport const modalLifecycle = createModalLifecycleHandler()\n\n/**\n * It's responsable for rendering all the modal components.\n * \n * @param param0 \n * @returns \n */\nexport const ModalGroupManager: FC = ({ children }) => {\n\n    modalLifecycle.attach(useState<ReactElement<IBaseModal>[]>([]))\n    const _render = modalLifecycle.render()\n    const hasModals = _render.length > 0\n    \n    return (\n        <>\n            {children}\n            <RNModal visible={hasModals} transparent animationType='none'>\n                {_render}\n            </RNModal>\n        </>\n    )\n}\n"],"file":"ModalGroupManager.js"}

package/dist/components/atoms/Modal/ModalLifecycleHandler.d.ts

@@ -0,0 +1,23 @@
+import { Dispatch, ReactElement } from "react";
+import { IBaseModal } from "./ui/types";
+interface ModalNode {
+    id: string;
+    visible?: boolean;
+    lastVisualization?: Date;
+    modal: () => ReactElement<IBaseModal>;
+}
+export declare class ModalLifecycleHandler {
+    nodeGroup: Map<string, ModalNode>;
+    state: [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>] | undefined;
+    constructor();
+    attach: (state: [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>]) => void;
+    update: () => void;
+    render: () => ReactElement<IBaseModal>[];
+    sync: (id: string, modal: () => ReactElement<IBaseModal>) => void;
+    destroy: (id: string) => void;
+    private remove;
+    show: (id: string) => void;
+    close: (id: string) => void;
+}
+export declare const createModalLifecycleHandler: () => ModalLifecycleHandler;
+export {};

package/dist/components/atoms/Modal/ModalLifecycleHandler.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createModalLifecycleHandler = exports.ModalLifecycleHandler = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+class ModalLifecycleHandler {
+  constructor() {
+    _defineProperty(this, "attach", state => {
+      this.state = state;
+    });
+
+    _defineProperty(this, "update", () => {
+      const nodes = Array.from(this.nodeGroup.values()).filter(node => node.visible || !!node.lastVisualization).sort((nodeA, nodeB) => {
+        var _nodeA$lastVisualizat, _nodeB$lastVisualizat;
+
+        return (((_nodeA$lastVisualizat = nodeA.lastVisualization) === null || _nodeA$lastVisualizat === void 0 ? void 0 : _nodeA$lastVisualizat.getTime()) || 0) - (((_nodeB$lastVisualizat = nodeB.lastVisualization) === null || _nodeB$lastVisualizat === void 0 ? void 0 : _nodeB$lastVisualizat.getTime()) || 0);
+      }).map(node => {
+        let modalElement = node.modal();
+        let {
+          props
+        } = modalElement;
+        return _react.default.cloneElement(modalElement, {
+          key: node.id,
+          visible: node.visible,
+          close: () => this.close(node.id),
+          onClose: () => {
+            var _props$onClose;
+
+            this.remove(node.id);
+            (_props$onClose = props.onClose) === null || _props$onClose === void 0 ? void 0 : _props$onClose.call(props);
+          }
+        });
+      });
+      const [, updateState] = this.state || [];
+      updateState === null || updateState === void 0 ? void 0 : updateState(nodes);
+    });
+
+    _defineProperty(this, "render", () => {
+      const [modals] = this.state || [];
+      return modals || [];
+    });
+
+    _defineProperty(this, "sync", (id, modal) => {
+      if (this.nodeGroup.has(id)) {
+        const savedNode = this.nodeGroup.get(id);
+        savedNode && this.nodeGroup.set(id, { ...savedNode,
+          modal
+        });
+        return;
+      }
+
+      this.nodeGroup.set(id, {
+        id,
+        modal
+      });
+    });
+
+    _defineProperty(this, "destroy", id => {
+      this.nodeGroup.delete(id);
+      this.update();
+    });
+
+    _defineProperty(this, "remove", id => {
+      const savedNode = this.nodeGroup.get(id);
+      savedNode && this.nodeGroup.set(id, { ...savedNode,
+        lastVisualization: undefined
+      });
+      this.update();
+    });
+
+    _defineProperty(this, "show", id => {
+      const savedNode = this.nodeGroup.get(id);
+      savedNode && this.nodeGroup.set(id, { ...savedNode,
+        visible: true,
+        lastVisualization: new Date()
+      });
+      this.update();
+    });
+
+    _defineProperty(this, "close", id => {
+      const savedNode = this.nodeGroup.get(id);
+      savedNode && this.nodeGroup.set(id, { ...savedNode,
+        visible: false
+      });
+      this.update();
+    });
+
+    this.nodeGroup = new Map();
+    this.state = undefined;
+  }
+
+}
+
+exports.ModalLifecycleHandler = ModalLifecycleHandler;
+
+const createModalLifecycleHandler = () => {
+  return new ModalLifecycleHandler();
+};
+
+exports.createModalLifecycleHandler = createModalLifecycleHandler;
+//# sourceMappingURL=ModalLifecycleHandler.js.map

package/dist/components/atoms/Modal/ModalLifecycleHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/Modal/ModalLifecycleHandler.ts"],"names":["ModalLifecycleHandler","constructor","state","nodes","Array","from","nodeGroup","values","filter","node","visible","lastVisualization","sort","nodeA","nodeB","getTime","map","modalElement","modal","props","React","cloneElement","key","id","close","onClose","remove","updateState","modals","has","savedNode","get","set","delete","update","undefined","Date","Map","createModalLifecycleHandler"],"mappings":"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","sourcesContent":["import React, { Dispatch, ReactElement } from \"react\"\nimport { IBaseModal } from \"./ui/types\"\n\n/**\n * It Represents a node (usually a modal component) in the modal's lifecycle handler.\n */\ninterface ModalNode {\n    id: string\n    visible?: boolean\n    lastVisualization?: Date\n    modal: () => ReactElement<IBaseModal>\n}\n\n/**\n * Manage all modal's lifecycle.\n */\nexport class ModalLifecycleHandler {\n    \n    nodeGroup: Map<string, ModalNode>\n    state: [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>] | undefined\n\n    constructor() {\n        this.nodeGroup = new Map()\n        this.state = undefined\n    }\n\n    /**\n     * Holds the ModalGroupManager state.\n     * \n     * @param state \n     */\n    public attach = (state: [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>]) => {\n        this.state = state\n    }\n\n    /**\n     * Updates all the modal components.\n     */\n    public update = () => {\n        const nodes = Array.from(this.nodeGroup.values())\n            .filter(node => node.visible || !!node.lastVisualization)\n            .sort((nodeA, nodeB) => (nodeA.lastVisualization?.getTime() || 0) - (nodeB.lastVisualization?.getTime() || 0))\n            .map(node => {\n                let modalElement = node.modal()\n                let { props } = modalElement\n                return React.cloneElement(modalElement, {\n                    key: node.id,\n                    visible: node.visible,\n                    close: () => this.close(node.id),\n                    onClose: () => {\n                        this.remove(node.id)\n                        props.onClose?.()\n                    }\n                })\n            })\n            \n        const [, updateState ] = this.state || []\n        updateState?.(nodes)\n    }\n\n    /**\n     * Renders all selected modals.\n     * \n     * @returns \n     */\n    public render = (): ReactElement<IBaseModal>[] => {\n        const [ modals ] = this.state || []\n        return modals || []\n    }\n\n    /**\n     * Tells to the lifecycle handler that a modal component needs to be handled.\n     * \n     * @param id \n     * @param modal \n     * @returns \n     */\n    public sync = (id: string, modal: () => ReactElement<IBaseModal>) => {\n        if (this.nodeGroup.has(id)) {\n            const savedNode = this.nodeGroup.get(id)\n            savedNode && this.nodeGroup.set(id, { ...savedNode, modal })\n            return\n        }\n        this.nodeGroup.set(id, { id, modal })\n    }\n\n    /**\n     * Destroy a modal from the lifecycle handler.\n     * \n     * @param id \n     */\n    public destroy = (id: string) => {\n        this.nodeGroup.delete(id)\n        this.update()\n    }\n\n    /**\n     * Removes a modal from the rendering stack. It tells to the lifecycle handler that a modal \n     * component is no longer used by the application.\n     * \n     * @param id \n     */\n    private remove = (id: string) => {\n        const savedNode = this.nodeGroup.get(id)\n        savedNode && this.nodeGroup.set(id, { ...savedNode, lastVisualization: undefined })\n        this.update()\n    }\n\n    /**\n     * Makes a modal appears.\n     * \n     * @param id \n     */\n    public show = (id: string) => {\n        const savedNode = this.nodeGroup.get(id)\n        savedNode && this.nodeGroup.set(id, { ...savedNode, visible: true, lastVisualization: new Date() })\n        this.update()\n    }\n\n    /**\n     * Makes a modal disappears.\n     * \n     * @param id \n     */\n    public close = (id: string) => {\n        const savedNode = this.nodeGroup.get(id)\n        savedNode && this.nodeGroup.set(id, { ...savedNode, visible: false })\n        this.update()\n    }\n}\n\n/**\n * Creates a new ModalLifecycleHandlere instance.\n * \n * @returns \n */\nexport const createModalLifecycleHandler = () => {\n    return new ModalLifecycleHandler()\n}\n"],"file":"ModalLifecycleHandler.js"}

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

@@ -0,0 +1,5 @@
+export * from './ModalGroupManager';
+export * from './ModalLifecycleHandler';
+export * from './ui/BaseModalView';
+export * from './ui/types';
+export * from './useModalManager';

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

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _ModalGroupManager = require("./ModalGroupManager");
+
+Object.keys(_ModalGroupManager).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ModalGroupManager[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ModalGroupManager[key];
+    }
+  });
+});
+
+var _ModalLifecycleHandler = require("./ModalLifecycleHandler");
+
+Object.keys(_ModalLifecycleHandler).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ModalLifecycleHandler[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ModalLifecycleHandler[key];
+    }
+  });
+});
+
+var _BaseModalView = require("./ui/BaseModalView");
+
+Object.keys(_BaseModalView).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _BaseModalView[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _BaseModalView[key];
+    }
+  });
+});
+
+var _types = require("./ui/types");
+
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});
+
+var _useModalManager = require("./useModalManager");
+
+Object.keys(_useModalManager).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useModalManager[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useModalManager[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/Modal/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './ModalGroupManager'\nexport * from './ModalLifecycleHandler'\nexport * from './ui/BaseModalView'\nexport * from './ui/types'\nexport * from './useModalManager'"],"file":"index.js"}

package/dist/components/atoms/Modal/ui/BaseModalView.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { IBaseModal } from "./types";
+export declare const ModalView: FC<IBaseModal>;

package/dist/components/atoms/Modal/ui/BaseModalView.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalView = void 0;
+
+var _reactCore = require("@tecsinapse/react-core");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+
+var _styled = require("./styled");
+
+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 BACKDROP_ALPHA = .65;
+const INTERPOLATION_STEPS = 10;
+const INTERPOLATION_DURATION = 195;
+
+const ModalView = ({
+  children,
+  visible,
+  BoxComponent = _reactCore.BoxContent,
+  close,
+  onClose
+}) => {
+  const {
+    bottom
+  } = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const {
+    height
+  } = (0, _reactNative.useWindowDimensions)();
+  const backgroundCarrier = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const translationCarrier = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const show = (0, _react.useCallback)(to => {
+    _reactNative.Animated.sequence([_reactNative.Animated.timing(backgroundCarrier, {
+      toValue: INTERPOLATION_STEPS,
+      duration: INTERPOLATION_DURATION,
+      easing: _reactNative.Easing.out(_reactNative.Easing.circle),
+      useNativeDriver: false
+    }), _reactNative.Animated.timing(translationCarrier, {
+      toValue: to,
+      duration: INTERPOLATION_DURATION,
+      easing: _reactNative.Easing.out(_reactNative.Easing.circle),
+      useNativeDriver: true
+    })]).start();
+  }, []);
+  const hide = (0, _react.useCallback)(() => {
+    _reactNative.Animated.sequence([_reactNative.Animated.timing(translationCarrier, {
+      toValue: 0,
+      duration: INTERPOLATION_DURATION,
+      easing: _reactNative.Easing.out(_reactNative.Easing.circle),
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(backgroundCarrier, {
+      toValue: 0,
+      duration: INTERPOLATION_DURATION,
+      easing: _reactNative.Easing.out(_reactNative.Easing.circle),
+      useNativeDriver: false
+    })]).start(onClose);
+  }, [onClose]);
+  const backgroundInterpolation = backgroundCarrier.interpolate({
+    inputRange: [0, INTERPOLATION_STEPS],
+    outputRange: ['rgba(0, 0, 0, 0)', `rgba(0, 0, 0, ${BACKDROP_ALPHA})`]
+  });
+  const handleBoxLayoutChanges = (0, _react.useCallback)(lce => {
+    let boxHeight = lce.nativeEvent.layout.height;
+    boxHeight > 0 && show(-(boxHeight + bottom));
+  }, [show]);
+  (0, _react.useEffect)(() => {
+    if (!visible) {
+      hide();
+    }
+  }, [visible]);
+  return _react.default.createElement(_styled.StyledPressableBackDrop, {
+    onPress: close
+  }, _react.default.createElement(_styled.BackDropView, {
+    height: height,
+    style: {
+      backgroundColor: backgroundInterpolation
+    }
+  }), _react.default.createElement(_reactNative.Animated.View, {
+    style: {
+      transform: [{
+        translateY: translationCarrier
+      }]
+    }
+  }, _react.default.createElement(_reactNative.Pressable, null, _react.default.createElement(BoxComponent, {
+    onLayout: handleBoxLayoutChanges,
+    style: {
+      paddingBottom: bottom
+    },
+    variant: "bottom"
+  }, _react.default.createElement(_styled.CloseBar, null), children))));
+};
+
+exports.ModalView = ModalView;
+//# sourceMappingURL=BaseModalView.js.map

package/dist/components/atoms/Modal/ui/BaseModalView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/atoms/Modal/ui/BaseModalView.tsx"],"names":["BACKDROP_ALPHA","INTERPOLATION_STEPS","INTERPOLATION_DURATION","ModalView","children","visible","BoxComponent","BoxContent","close","onClose","bottom","height","backgroundCarrier","Animated","Value","current","translationCarrier","show","to","sequence","timing","toValue","duration","easing","Easing","out","circle","useNativeDriver","start","hide","backgroundInterpolation","interpolate","inputRange","outputRange","handleBoxLayoutChanges","lce","boxHeight","nativeEvent","layout","backgroundColor","transform","translateY","paddingBottom"],"mappings":"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","sourcesContent":["import { BoxContent } from \"@tecsinapse/react-core\";\nimport React, { FC, useCallback, useEffect, useRef } from \"react\";\nimport { Animated, Easing, LayoutChangeEvent, Pressable, useWindowDimensions } from \"react-native\";\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { BackDropView, CloseBar, StyledPressableBackDrop } from \"./styled\";\nimport { IBaseModal } from \"./types\";\n\nconst BACKDROP_ALPHA = .65\nconst INTERPOLATION_STEPS = 10\nconst INTERPOLATION_DURATION = 195 //ms\n\nexport const ModalView: FC<IBaseModal> = ({ \n    children,\n    visible,\n    BoxComponent = BoxContent,\n    close,\n    onClose\n}) => {\n    \n    const { bottom } = useSafeAreaInsets()\n    const { height } = useWindowDimensions()\n    const backgroundCarrier = useRef(new Animated.Value(0)).current\n    const translationCarrier = useRef(new Animated.Value(0)).current\n\n    const show = useCallback((to: number) => {\n        Animated.sequence([\n            Animated.timing(backgroundCarrier, {\n                toValue: INTERPOLATION_STEPS,\n                duration: INTERPOLATION_DURATION,\n                easing: Easing.out(Easing.circle),\n                useNativeDriver: false\n            }),\n            Animated.timing(translationCarrier, {\n                toValue: to,\n                duration: INTERPOLATION_DURATION,\n                easing: Easing.out(Easing.circle),\n                useNativeDriver: true\n            })\n        ]).start()\n    }, [])\n\n    const hide = useCallback(() => {\n        Animated.sequence([\n            Animated.timing(translationCarrier, {\n                toValue: 0,\n                duration: INTERPOLATION_DURATION,\n                easing: Easing.out(Easing.circle),\n                useNativeDriver: true\n            }),\n            Animated.timing(backgroundCarrier, {\n                toValue: 0,\n                duration: INTERPOLATION_DURATION,\n                easing: Easing.out(Easing.circle),\n                useNativeDriver: false\n            })\n        ]).start(onClose)\n    }, [onClose])\n\n    const backgroundInterpolation = backgroundCarrier.interpolate({\n        inputRange: [0, INTERPOLATION_STEPS],\n        outputRange: ['rgba(0, 0, 0, 0)', `rgba(0, 0, 0, ${BACKDROP_ALPHA})`]\n    })\n\n    const handleBoxLayoutChanges = useCallback((lce: LayoutChangeEvent) => {\n        let boxHeight = lce.nativeEvent.layout.height\n        boxHeight > 0 && show(-(boxHeight + bottom))\n    }, [show])\n\n    useEffect(() => {\n        if (!visible) {\n            hide()\n        }\n    }, [visible])\n\n    return (\n        <StyledPressableBackDrop onPress={close}>\n            <BackDropView height={height} style={{ backgroundColor: backgroundInterpolation }}/>\n                <Animated.View style={{ transform: [{ translateY: translationCarrier }]}}>\n                    <Pressable>\n                        <BoxComponent onLayout={handleBoxLayoutChanges} style={{ paddingBottom: bottom }} variant=\"bottom\">\n                            <CloseBar/>\n                            {children}\n                        </BoxComponent>\n                    </Pressable>\n                </Animated.View>\n        </StyledPressableBackDrop>\n    )\n}"],"file":"BaseModalView.js"}

package/dist/components/atoms/Modal/ui/styled.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const StyledPressableBackDrop: import("@emotion/native").StyledComponent<any, {}, {}>;
+export declare const BackDropView: import("@emotion/native").StyledComponent<any, {}, {}>;
+export declare const CloseBar: import("@emotion/native").StyledComponent<any, {}, {
+    ref?: import("react").Ref<import("react-native").View> | undefined;
+}>;

package/dist/components/atoms/Modal/ui/styled.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CloseBar = exports.BackDropView = exports.StyledPressableBackDrop = void 0;
+
+var _native = _interopRequireDefault(require("@emotion/native"));
+
+var _reactNative = require("react-native");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const StyledPressableBackDrop = _native.default.Pressable`
+    flex: 1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+`;
+exports.StyledPressableBackDrop = StyledPressableBackDrop;
+const BackDropView = (0, _native.default)(_reactNative.Animated.View)`
+    height: 100%;
+`;
+exports.BackDropView = BackDropView;
+const CloseBar = _native.default.View`
+    background-color: ${({
+  theme
+}) => theme.color.secondary.light};
+    border-radius: 10px;
+    margin: 5px auto;
+    width: 42px;
+    height: 5px;
+`;
+exports.CloseBar = CloseBar;
+//# sourceMappingURL=styled.js.map

package/dist/components/atoms/Modal/ui/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/atoms/Modal/ui/styled.ts"],"names":["StyledPressableBackDrop","styled","Pressable","BackDropView","Animated","View","CloseBar","theme","color","secondary","light"],"mappings":";;;;;;;AAAA;;AAEA;;;;AAEO,MAAMA,uBAAuB,GAAGC,gBAAOC,SAA+B;AAC7E;AACA;AACA;AACA;AACA,CALO;;AAOA,MAAMC,YAAY,GAAG,qBAAOC,sBAASC,IAAhB,CAAgE;AAC5F;AACA,CAFO;;AAIA,MAAMC,QAAQ,GAAGL,gBAAOI,IAA0B;AACzD,wBAAwB,CAAC;AAAEE,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,KAAN,CAAYC,SAAZ,CAAsBC,KAAM;AACnE;AACA;AACA;AACA;AACA,CANO","sourcesContent":["import styled from \"@emotion/native\";\nimport { StyleProps } from \"@tecsinapse/react-core\";\nimport { Animated } from \"react-native\";\n\nexport const StyledPressableBackDrop = styled.Pressable<Partial<StyleProps>>`\n    flex: 1;\n    position: absolute;\n    width: 100%;\n    height: 100%;\n`\n\nexport const BackDropView = styled(Animated.View)<{ height: number } & Partial<StyleProps>>`\n    height: 100%;\n`\n\nexport const CloseBar = styled.View<Partial<StyleProps>>`\n    background-color: ${({ theme }) => theme.color.secondary.light};\n    border-radius: 10px;\n    margin: 5px auto;\n    width: 42px;\n    height: 5px;\n`"],"file":"styled.js"}

package/dist/components/atoms/Modal/ui/types.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface IBaseModal {
+    visible?: boolean;
+    BoxComponent?: React.FC;
+    close?: () => void;
+    onClose?: () => void;
+}

package/dist/components/atoms/Modal/ui/types.js

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

package/dist/components/atoms/Modal/ui/types.js.map

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

package/dist/components/atoms/Modal/useModalManager.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement } from "react";
+import { IBaseModal } from "./ui/types";
+export declare const useModalManager: (modal: () => ReactElement<IBaseModal>) => {
+    show: () => void;
+    close: () => void;
+};

package/dist/components/atoms/Modal/useModalManager.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useModalManager = void 0;
+
+var _react = require("react");
+
+var _uuid = require("uuid");
+
+var _ModalGroupManager = require("./ModalGroupManager");
+
+const useModalManager = modal => {
+  const [id] = (0, _react.useState)((0, _uuid.v4)());
+
+  _ModalGroupManager.modalLifecycle.sync(id, modal);
+
+  const show = (0, _react.useCallback)(() => {
+    _ModalGroupManager.modalLifecycle.show(id);
+  }, [id]);
+  const close = (0, _react.useCallback)(() => {
+    _ModalGroupManager.modalLifecycle.close(id);
+  }, [id]);
+  (0, _react.useEffect)(() => {
+    return () => _ModalGroupManager.modalLifecycle.destroy(id);
+  }, []);
+  return {
+    show,
+    close
+  };
+};
+
+exports.useModalManager = useModalManager;
+//# sourceMappingURL=useModalManager.js.map

package/dist/components/atoms/Modal/useModalManager.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/Modal/useModalManager.ts"],"names":["useModalManager","modal","id","modalLifecycle","sync","show","close","destroy"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAWO,MAAMA,eAAe,GAAIC,KAAD,IAA2C;AAEtE,QAAM,CAACC,EAAD,IAAO,qBAAS,eAAT,CAAb;;AACAC,oCAAeC,IAAf,CAAoBF,EAApB,EAAwBD,KAAxB;;AAEA,QAAMI,IAAI,GAAG,wBAAY,MAAM;AAC3BF,sCAAeE,IAAf,CAAoBH,EAApB;AACH,GAFY,EAEV,CAACA,EAAD,CAFU,CAAb;AAIA,QAAMI,KAAK,GAAG,wBAAY,MAAM;AAC5BH,sCAAeG,KAAf,CAAqBJ,EAArB;AACH,GAFa,EAEX,CAACA,EAAD,CAFW,CAAd;AAIA,wBAAU,MAAM;AACZ,WAAO,MAAMC,kCAAeI,OAAf,CAAuBL,EAAvB,CAAb;AACH,GAFD,EAEG,EAFH;AAIA,SAAO;AACHG,IAAAA,IADG;AAEHC,IAAAA;AAFG,GAAP;AAIH,CArBM","sourcesContent":["import { ReactElement, useCallback, useEffect, useState } from \"react\"\nimport { v4 as uuidv4 } from 'uuid'\nimport { modalLifecycle } from \"./ModalGroupManager\"\nimport { IBaseModal } from \"./ui/types\"\n\n/**\n * Use this hook to tell the modal lifecycle handler that you want to add\n * a new modal component. \n * \n * @param id \n * @param modal \n * @returns\n */\nexport const useModalManager = (modal: () => ReactElement<IBaseModal>) => {\n\n    const [id] = useState(uuidv4())\n    modalLifecycle.sync(id, modal)\n\n    const show = useCallback(() => {\n        modalLifecycle.show(id)\n    }, [id])\n\n    const close = useCallback(() => {\n        modalLifecycle.close(id)\n    }, [id])\n    \n    useEffect(() => {\n        return () => modalLifecycle.destroy(id)\n    }, [])\n\n    return {\n        show,\n        close\n    }\n}"],"file":"useModalManager.js"}

package/dist/index.d.ts

@@ -17,3 +17,4 @@ export { DateTimePicker } 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, useModalManager, IBaseModal } from './components/atoms/Modal';

package/dist/index.js

@@ -36,7 +36,12 @@ var _exportNames = {
   DateTimePicker: true,
   Avatar: true,
   Calendar: true,
-  DateTimeSelector: true
+  DateTimeSelector: true,
+  ModalGroupManager: true,
+  ModalView: true,
+  ModalLifecycleHandler: true,
+  useModalManager: true,
+  IBaseModal: true
 };
 Object.defineProperty(exports, "Header", {
   enumerable: true,
@@ -236,6 +241,36 @@ Object.defineProperty(exports, "DateTimeSelector", {
     return _DateTimeSelector.DateTimeSelector;
   }
 });
+Object.defineProperty(exports, "ModalGroupManager", {
+  enumerable: true,
+  get: function () {
+    return _Modal.ModalGroupManager;
+  }
+});
+Object.defineProperty(exports, "ModalView", {
+  enumerable: true,
+  get: function () {
+    return _Modal.ModalView;
+  }
+});
+Object.defineProperty(exports, "ModalLifecycleHandler", {
+  enumerable: true,
+  get: function () {
+    return _Modal.ModalLifecycleHandler;
+  }
+});
+Object.defineProperty(exports, "useModalManager", {
+  enumerable: true,
+  get: function () {
+    return _Modal.useModalManager;
+  }
+});
+Object.defineProperty(exports, "IBaseModal", {
+  enumerable: true,
+  get: function () {
+    return _Modal.IBaseModal;
+  }
+});
 
 var _reactCore = require("@tecsinapse/react-core");
 
@@ -286,4 +321,6 @@ var _Avatar = require("./components/atoms/Avatar");
 var _Calendar = require("./components/molecules/Calendar");
 
 var _DateTimeSelector = require("./components/molecules/DateTimeSelector");
+
+var _Modal = require("./components/atoms/Modal");
 //# 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","sourcesContent":["export * from '@tecsinapse/react-core';\nexport { Header, HeaderProps } from './components/atoms/Header';\nexport { Select, SelectNativeProps } from './components/atoms/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 } from './components/molecules/DatePicker';\nexport { DateTimePicker } from './components/molecules/DateTimePicker';\nexport { Avatar } from './components/atoms/Avatar';\nexport { Calendar } from './components/molecules/Calendar';\nexport { DateTimeSelector } from './components/molecules/DateTimeSelector';\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;;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/atoms/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 } from './components/molecules/DatePicker';\nexport { DateTimePicker } 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, useModalManager, IBaseModal } from './components/atoms/Modal';\n"],"file":"index.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-native-kit",
   "description": "TecSinapse React Native components",
-  "version": "1.12.1",
+  "version": "1.12.5",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
@@ -13,7 +13,7 @@
   "dependencies": {
     "@emotion/native": "^11.0.0",
     "@emotion/react": "^11.4.1",
-    "@tecsinapse/react-core": "^1.12.1"
+    "@tecsinapse/react-core": "^1.12.4"
   },
   "repository": {
     "type": "git",
@@ -27,7 +27,12 @@
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-native": ">=0.64.0",
-    "react-native-vector-icons": ">=8.1.0"
+    "react-native-safe-area-context": "^3.1.9",
+    "react-native-vector-icons": ">=8.1.0",
+    "uuid": "^8.3.2"
   },
-  "gitHead": "50b3fc522e7726e43f9dd16d9681faf0a1e5a4d6"
+  "devDependencies": {
+    "@types/uuid": "^8.3.3"
+  },
+  "gitHead": "e7ef239d9f82576d17b344065a97d2136a165f64"
 }

package/src/components/atoms/Modal/ModalGroupManager.tsx

@@ -0,0 +1,28 @@
+import React, { FC, ReactElement, useState } from 'react';
+import { Modal as RNModal } from 'react-native';
+import { createModalLifecycleHandler } from './ModalLifecycleHandler';
+import { IBaseModal } from './ui/types';
+
+export const modalLifecycle = createModalLifecycleHandler()
+
+/**
+ * It's responsable for rendering all the modal components.
+ * 
+ * @param param0 
+ * @returns 
+ */
+export const ModalGroupManager: FC = ({ children }) => {
+
+    modalLifecycle.attach(useState<ReactElement<IBaseModal>[]>([]))
+    const _render = modalLifecycle.render()
+    const hasModals = _render.length > 0
+    
+    return (
+        <>
+            {children}
+            <RNModal visible={hasModals} transparent animationType='none'>
+                {_render}
+            </RNModal>
+        </>
+    )
+}

package/src/components/atoms/Modal/ModalLifecycleHandler.ts

@@ -0,0 +1,139 @@
+import React, { Dispatch, ReactElement } from "react"
+import { IBaseModal } from "./ui/types"
+
+/**
+ * It Represents a node (usually a modal component) in the modal's lifecycle handler.
+ */
+interface ModalNode {
+    id: string
+    visible?: boolean
+    lastVisualization?: Date
+    modal: () => ReactElement<IBaseModal>
+}
+
+/**
+ * Manage all modal's lifecycle.
+ */
+export class ModalLifecycleHandler {
+    
+    nodeGroup: Map<string, ModalNode>
+    state: [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>] | undefined
+
+    constructor() {
+        this.nodeGroup = new Map()
+        this.state = undefined
+    }
+
+    /**
+     * Holds the ModalGroupManager state.
+     * 
+     * @param state 
+     */
+    public attach = (state: [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>]) => {
+        this.state = state
+    }
+
+    /**
+     * Updates all the modal components.
+     */
+    public update = () => {
+        const nodes = Array.from(this.nodeGroup.values())
+            .filter(node => node.visible || !!node.lastVisualization)
+            .sort((nodeA, nodeB) => (nodeA.lastVisualization?.getTime() || 0) - (nodeB.lastVisualization?.getTime() || 0))
+            .map(node => {
+                let modalElement = node.modal()
+                let { props } = modalElement
+                return React.cloneElement(modalElement, {
+                    key: node.id,
+                    visible: node.visible,
+                    close: () => this.close(node.id),
+                    onClose: () => {
+                        this.remove(node.id)
+                        props.onClose?.()
+                    }
+                })
+            })
+            
+        const [, updateState ] = this.state || []
+        updateState?.(nodes)
+    }
+
+    /**
+     * Renders all selected modals.
+     * 
+     * @returns 
+     */
+    public render = (): ReactElement<IBaseModal>[] => {
+        const [ modals ] = this.state || []
+        return modals || []
+    }
+
+    /**
+     * Tells to the lifecycle handler that a modal component needs to be handled.
+     * 
+     * @param id 
+     * @param modal 
+     * @returns 
+     */
+    public sync = (id: string, modal: () => ReactElement<IBaseModal>) => {
+        if (this.nodeGroup.has(id)) {
+            const savedNode = this.nodeGroup.get(id)
+            savedNode && this.nodeGroup.set(id, { ...savedNode, modal })
+            return
+        }
+        this.nodeGroup.set(id, { id, modal })
+    }
+
+    /**
+     * Destroy a modal from the lifecycle handler.
+     * 
+     * @param id 
+     */
+    public destroy = (id: string) => {
+        this.nodeGroup.delete(id)
+        this.update()
+    }
+
+    /**
+     * Removes a modal from the rendering stack. It tells to the lifecycle handler that a modal 
+     * component is no longer used by the application.
+     * 
+     * @param id 
+     */
+    private remove = (id: string) => {
+        const savedNode = this.nodeGroup.get(id)
+        savedNode && this.nodeGroup.set(id, { ...savedNode, lastVisualization: undefined })
+        this.update()
+    }
+
+    /**
+     * Makes a modal appears.
+     * 
+     * @param id 
+     */
+    public show = (id: string) => {
+        const savedNode = this.nodeGroup.get(id)
+        savedNode && this.nodeGroup.set(id, { ...savedNode, visible: true, lastVisualization: new Date() })
+        this.update()
+    }
+
+    /**
+     * Makes a modal disappears.
+     * 
+     * @param id 
+     */
+    public close = (id: string) => {
+        const savedNode = this.nodeGroup.get(id)
+        savedNode && this.nodeGroup.set(id, { ...savedNode, visible: false })
+        this.update()
+    }
+}
+
+/**
+ * Creates a new ModalLifecycleHandlere instance.
+ * 
+ * @returns 
+ */
+export const createModalLifecycleHandler = () => {
+    return new ModalLifecycleHandler()
+}

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

@@ -0,0 +1,5 @@
+export * from './ModalGroupManager'
+export * from './ModalLifecycleHandler'
+export * from './ui/BaseModalView'
+export * from './ui/types'
+export * from './useModalManager'

package/src/components/atoms/Modal/ui/BaseModalView.tsx

@@ -0,0 +1,88 @@
+import { BoxContent } from "@tecsinapse/react-core";
+import React, { FC, useCallback, useEffect, useRef } from "react";
+import { Animated, Easing, LayoutChangeEvent, Pressable, useWindowDimensions } from "react-native";
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { BackDropView, CloseBar, StyledPressableBackDrop } from "./styled";
+import { IBaseModal } from "./types";
+
+const BACKDROP_ALPHA = .65
+const INTERPOLATION_STEPS = 10
+const INTERPOLATION_DURATION = 195 //ms
+
+export const ModalView: FC<IBaseModal> = ({ 
+    children,
+    visible,
+    BoxComponent = BoxContent,
+    close,
+    onClose
+}) => {
+    
+    const { bottom } = useSafeAreaInsets()
+    const { height } = useWindowDimensions()
+    const backgroundCarrier = useRef(new Animated.Value(0)).current
+    const translationCarrier = useRef(new Animated.Value(0)).current
+
+    const show = useCallback((to: number) => {
+        Animated.sequence([
+            Animated.timing(backgroundCarrier, {
+                toValue: INTERPOLATION_STEPS,
+                duration: INTERPOLATION_DURATION,
+                easing: Easing.out(Easing.circle),
+                useNativeDriver: false
+            }),
+            Animated.timing(translationCarrier, {
+                toValue: to,
+                duration: INTERPOLATION_DURATION,
+                easing: Easing.out(Easing.circle),
+                useNativeDriver: true
+            })
+        ]).start()
+    }, [])
+
+    const hide = useCallback(() => {
+        Animated.sequence([
+            Animated.timing(translationCarrier, {
+                toValue: 0,
+                duration: INTERPOLATION_DURATION,
+                easing: Easing.out(Easing.circle),
+                useNativeDriver: true
+            }),
+            Animated.timing(backgroundCarrier, {
+                toValue: 0,
+                duration: INTERPOLATION_DURATION,
+                easing: Easing.out(Easing.circle),
+                useNativeDriver: false
+            })
+        ]).start(onClose)
+    }, [onClose])
+
+    const backgroundInterpolation = backgroundCarrier.interpolate({
+        inputRange: [0, INTERPOLATION_STEPS],
+        outputRange: ['rgba(0, 0, 0, 0)', `rgba(0, 0, 0, ${BACKDROP_ALPHA})`]
+    })
+
+    const handleBoxLayoutChanges = useCallback((lce: LayoutChangeEvent) => {
+        let boxHeight = lce.nativeEvent.layout.height
+        boxHeight > 0 && show(-(boxHeight + bottom))
+    }, [show])
+
+    useEffect(() => {
+        if (!visible) {
+            hide()
+        }
+    }, [visible])
+
+    return (
+        <StyledPressableBackDrop onPress={close}>
+            <BackDropView height={height} style={{ backgroundColor: backgroundInterpolation }}/>
+                <Animated.View style={{ transform: [{ translateY: translationCarrier }]}}>
+                    <Pressable>
+                        <BoxComponent onLayout={handleBoxLayoutChanges} style={{ paddingBottom: bottom }} variant="bottom">
+                            <CloseBar/>
+                            {children}
+                        </BoxComponent>
+                    </Pressable>
+                </Animated.View>
+        </StyledPressableBackDrop>
+    )
+}

package/src/components/atoms/Modal/ui/styled.ts

@@ -0,0 +1,22 @@
+import styled from "@emotion/native";
+import { StyleProps } from "@tecsinapse/react-core";
+import { Animated } from "react-native";
+
+export const StyledPressableBackDrop = styled.Pressable<Partial<StyleProps>>`
+    flex: 1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+`
+
+export const BackDropView = styled(Animated.View)<{ height: number } & Partial<StyleProps>>`
+    height: 100%;
+`
+
+export const CloseBar = styled.View<Partial<StyleProps>>`
+    background-color: ${({ theme }) => theme.color.secondary.light};
+    border-radius: 10px;
+    margin: 5px auto;
+    width: 42px;
+    height: 5px;
+`

package/src/components/atoms/Modal/ui/types.ts

@@ -0,0 +1,10 @@
+
+/**
+ * Defines a modal interface and allows you implement your own modal component.
+ */
+export interface IBaseModal {
+    visible?: boolean
+    BoxComponent?: React.FC
+    close?: () => void
+    onClose?: () => void
+}

package/src/components/atoms/Modal/useModalManager.ts

@@ -0,0 +1,35 @@
+import { ReactElement, useCallback, useEffect, useState } from "react"
+import { v4 as uuidv4 } from 'uuid'
+import { modalLifecycle } from "./ModalGroupManager"
+import { IBaseModal } from "./ui/types"
+
+/**
+ * Use this hook to tell the modal lifecycle handler that you want to add
+ * a new modal component. 
+ * 
+ * @param id 
+ * @param modal 
+ * @returns
+ */
+export const useModalManager = (modal: () => ReactElement<IBaseModal>) => {
+
+    const [id] = useState(uuidv4())
+    modalLifecycle.sync(id, modal)
+
+    const show = useCallback(() => {
+        modalLifecycle.show(id)
+    }, [id])
+
+    const close = useCallback(() => {
+        modalLifecycle.close(id)
+    }, [id])
+    
+    useEffect(() => {
+        return () => modalLifecycle.destroy(id)
+    }, [])
+
+    return {
+        show,
+        close
+    }
+}

package/src/index.ts

@@ -26,3 +26,4 @@ export { DateTimePicker } 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, useModalManager, IBaseModal } from './components/atoms/Modal';