@tecsinapse/react-native-kit 1.12.9 → 1.12.13

package/dist/components/{atoms → molecules}/Select/Modal.js

@@ -5,19 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Modal = void 0;
 
-var React = _interopRequireWildcard(require("react"));
+var _reactCore = require("@tecsinapse/react-core");
 
-var _styled = require("./styled");
+var React = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
-var _Text = require("../Text");
+var _Button = require("../../atoms/Button");
 
-var _reactCore = require("@tecsinapse/react-core");
+var _Header = require("../../atoms/Header");
+
+var _Input = require("../../atoms/Input");
 
-var _Input = require("../Input");
+var _Modal = require("../../atoms/Modal");
 
-var _Header = require("../Header");
+var _Text = require("../../atoms/Text");
+
+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); }
 
@@ -37,15 +41,20 @@ const Component = ({
   value,
   onSelect,
   onSearch,
-  onRequestClose,
   selectModalTitle,
   selectModalTitleComponent,
   confirmButtonText,
   loading,
-  ...modalProps
+  close,
+  closeOnPick,
+  ...others
 }) => {
   const [selectedValues, setSelectedValues] = React.useState([]);
   const [searchArg, setSearchArg] = (0, _reactCore.useDebouncedState)('', onSearch);
+  const ModalComponent = React.useMemo(() => (0, _styled.getStyledModal)((0, _reactCore.getStatusBarHeight)(true)), []);
+
+  const _closeOnPick = closeOnPick && type === 'single';
+
   React.useEffect(() => {
     setSelectedValues(value ? type === 'multi' ? value : [value] : []);
   }, [value, focused, setSelectedValues]);
@@ -76,23 +85,27 @@ const Component = ({
     });
   };
 
+  React.useEffect(() => {
+    if (_closeOnPick && selectedValues[0] && selectedValues[0] !== value) {
+      handleConfirm();
+    }
+  }, [selectedValues[0], value, closeOnPick]);
+
   const handleConfirm = () => {
     onSelect(type === 'single' ? selectedValues[0] : selectedValues);
-    onRequestClose && onRequestClose();
+    close === null || close === void 0 ? void 0 : close();
   };
 
   const headerContent = selectModalTitleComponent ? selectModalTitleComponent : selectModalTitle ? React.createElement(_Text.Text, {
     typography: "h4",
     fontWeight: "bold"
   }, selectModalTitle) : null;
-  return React.createElement(_reactNative.Modal, _extends({
-    transparent: true,
-    hardwareAccelerated: true
-  }, modalProps, {
-    onRequestClose: onRequestClose
-  }), React.createElement(_styled.StyledModal, null, React.createElement(_Header.Header, {
+  return React.createElement(_Modal.ModalView, _extends({}, others, {
+    BoxComponent: ModalComponent,
+    showCloseBar: false
+  }), React.createElement(_Header.Header, {
     rightButton: {
-      onPress: onRequestClose,
+      onPress: close,
       icon: {
         name: 'close',
         type: 'material-community',
@@ -135,7 +148,7 @@ const Component = ({
     }, React.createElement(_Text.Text, {
       fontWeight: item._checked ? 'bold' : 'regular'
     }, labelExtractor(item)))))
-  }), React.createElement(_styled.ModalFooter, null, React.createElement(_reactCore.Button, {
+  }), !_closeOnPick && React.createElement(_styled.ModalFooter, null, React.createElement(_Button.Button, {
     variant: 'filled',
     color: 'primary',
     onPress: handleConfirm,
@@ -143,7 +156,7 @@ const Component = ({
   }, React.createElement(_Text.Text, {
     fontColor: 'light',
     fontWeight: "bold"
-  }, confirmButtonText)))));
+  }, confirmButtonText))));
 };
 
 const Modal = Component;

package/dist/components/molecules/Select/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/Select/Modal.tsx"],"names":["Component","options","keyExtractor","labelExtractor","groupKeyExtractor","hideSearchBar","searchBarPlaceholder","focused","type","value","onSelect","onSearch","selectModalTitle","selectModalTitleComponent","confirmButtonText","loading","close","closeOnPick","others","selectedValues","setSelectedValues","React","useState","searchArg","setSearchArg","ModalComponent","useMemo","_closeOnPick","useEffect","getData","map","option","index","_checked","find","data","handlePressItem","newArr","found","push","handleConfirm","headerContent","onPress","icon","name","fontColor","text","item","Modal"],"mappings":"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","sourcesContent":["import { Checkbox, getStatusBarHeight, RadioButton, useDebouncedState } from '@tecsinapse/react-core';\nimport * as React from 'react';\nimport { FlatList, StatusBar, View } from 'react-native';\nimport { Button } from '../../atoms/Button';\nimport { Header } from '../../atoms/Header';\nimport { Input } from '../../atoms/Input';\nimport { IBaseModal, ModalView } from '../../atoms/Modal';\nimport { Text } from '../../atoms/Text';\nimport { SelectNativeProps } from './Select';\nimport {\n  FetchIndicator, getStyledModal, ListItem, ModalFooter, SearchBarContainer,\n  SelectIcon\n} from './styled';\n\ninterface LoadingProps {\n  loading?: boolean;\n}\n\nconst Component = <Data, Type extends 'single' | 'multi'>({\n  options,\n  keyExtractor,\n  labelExtractor,\n  groupKeyExtractor,\n  hideSearchBar,\n  searchBarPlaceholder,\n  focused,\n  type,\n  value,\n  onSelect,\n  onSearch,\n  selectModalTitle,\n  selectModalTitleComponent,\n  confirmButtonText,\n  loading,\n  close,\n  closeOnPick,\n  ...others\n}: SelectNativeProps<Data, Type> & LoadingProps & IBaseModal): JSX.Element => {\n  const [selectedValues, setSelectedValues] = React.useState<Data[]>([]);\n  const [searchArg, setSearchArg] = useDebouncedState<string>('', onSearch);\n  const ModalComponent = React.useMemo(() => getStyledModal(getStatusBarHeight(true)), [])\n  const _closeOnPick = closeOnPick && type === 'single'\n\n  // Resets the temporary state to the initial state whenever the\n  // modal is reopened or the value changes\n  React.useEffect(() => {\n    setSelectedValues(\n      (value ? (type === 'multi' ? value : [value]) : []) as Data[]\n    );\n  }, [value, focused, setSelectedValues]);\n\n  const getData = (options: Data[]) => {\n    return options?.map((option, index) => ({\n      ...option,\n      _checked:\n        type === 'multi'\n          ? !!selectedValues.find(\n              value => keyExtractor(option, index) == keyExtractor(value, index)\n            )\n          : keyExtractor((selectedValues[0] || {}) as Data, index) ==\n            keyExtractor(option, index),\n    }));\n  };\n\n  const data = typeof options !== 'function' ? getData(options) : [];\n\n  const handlePressItem = (option: Data) => () => {\n    setSelectedValues(selectedValues => {\n      if (type === 'multi') {\n        const newArr: Data[] = [];\n        let found = false;\n        for (const value of selectedValues) {\n          if (keyExtractor(value) != keyExtractor(option)) newArr.push(value);\n          else found = true;\n        }\n        if (!found) newArr.push(option);\n        return newArr;\n      }\n      return keyExtractor((selectedValues[0] || {}) as Data) ===\n        keyExtractor(option)\n        ? []\n        : [option];\n    });\n  };\n\n  React.useEffect(() => {\n    if (_closeOnPick && selectedValues[0] && (selectedValues[0] !== value)) {\n      handleConfirm()\n    }\n  }, [selectedValues[0], value, closeOnPick])\n\n  const handleConfirm = () => {\n    // TS Workaround since TS won't infer the ternary operator's result type correctly\n    type OnSelectArg = Parameters<typeof onSelect>[0];\n    onSelect(\n      (type === 'single' ? selectedValues[0] : selectedValues) as OnSelectArg\n    );\n    close?.()\n  };\n\n  const headerContent = selectModalTitleComponent ? (\n    selectModalTitleComponent\n  ) : selectModalTitle ? (\n    <Text typography=\"h4\" fontWeight=\"bold\">\n      {selectModalTitle}\n    </Text>\n  ) : null;\n\n  return (\n    <ModalView {...others} BoxComponent={ModalComponent} showCloseBar={false}>\n        <Header\n          rightButton={{\n            onPress: close,\n            icon: {\n              name: 'close',\n              type: 'material-community',\n              fontColor: 'light',\n            },\n          }}\n        >\n          {headerContent}\n        </Header>\n\n        {!hideSearchBar && (\n          <SearchBarContainer>\n            <Input\n              placeholder={searchBarPlaceholder}\n              value={searchArg}\n              onChange={text => setSearchArg(text)}\n              leftComponent={\n                <SelectIcon name=\"search\" type=\"ionicon\" size=\"centi\" />\n              }\n            />\n          </SearchBarContainer>\n        )}\n\n        {loading && (\n          <FetchIndicator animating={true} color={'grey'} size={'large'} />\n        )}\n\n        <FlatList\n          data={data}\n          keyExtractor={keyExtractor}\n          fadingEdgeLength={200}\n          renderItem={({ item }) => (\n            <ListItem onPress={handlePressItem(item)}>\n              <View pointerEvents={'none'}>\n                {type === 'multi' ? (\n                  <Checkbox\n                    color={'primary'}\n                    labelPosition={'right'}\n                    checked={item._checked}\n                  >\n                    <Text fontWeight={item._checked ? 'bold' : 'regular'}>\n                      {labelExtractor(item)}\n                    </Text>\n                  </Checkbox>\n                ) : (\n                  <RadioButton\n                    color={'primary'}\n                    labelPosition={'right'}\n                    checked={item._checked}\n                  >\n                    <Text fontWeight={item._checked ? 'bold' : 'regular'}>\n                      {labelExtractor(item)}\n                    </Text>\n                  </RadioButton>\n                )}\n              </View>\n            </ListItem>\n          )}\n        />\n        \n        { !_closeOnPick && <ModalFooter>\n          <Button\n            variant={'filled'}\n            color={'primary'}\n            onPress={handleConfirm}\n            disabled={loading}\n          >\n            <Text fontColor={'light'} fontWeight=\"bold\">\n              {confirmButtonText}\n            </Text>\n          </Button>\n        </ModalFooter>}\n    </ModalView>\n  );\n};\n\nexport const Modal = Component;\n"],"file":"Modal.js"}

package/dist/components/{atoms → molecules}/Select/Select.d.ts

@@ -16,6 +16,7 @@ export interface SelectNativeProps<Data, Type extends 'single' | 'multi'> extend
     confirmButtonText?: string;
     selectModalTitle?: string;
     selectModalTitleComponent?: JSX.Element;
+    closeOnPick?: boolean;
 }
-declare function Select<Data, Type extends 'single' | 'multi'>({ value, options, keyExtractor, groupKeyExtractor, onSelect, type, labelExtractor, placeholder, onFocus, onBlur, disabled, onSearch, selectModalTitle, selectModalTitleComponent, searchBarPlaceholder, hideSearchBar, confirmButtonText, rightComponent, variant, hintComponent, hint, style, ...rest }: SelectNativeProps<Data, Type>): JSX.Element;
+declare function Select<Data, Type extends 'single' | 'multi'>({ value, options, keyExtractor, groupKeyExtractor, onSelect, type, labelExtractor, placeholder, onFocus, onBlur, disabled, onSearch, selectModalTitle, selectModalTitleComponent, searchBarPlaceholder, hideSearchBar, confirmButtonText, rightComponent, variant, hintComponent, hint, style, closeOnPick, ...rest }: SelectNativeProps<Data, Type>): JSX.Element;
 export default Select;

package/dist/components/{atoms → molecules}/Select/Select.js

@@ -5,13 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _reactCore = require("@tecsinapse/react-core");
+
 var React = _interopRequireWildcard(require("react"));
 
-var _reactCore = require("@tecsinapse/react-core");
+var _Modal = require("../../atoms/Modal");
 
-var _Text = require("../Text");
+var _Text = require("../../atoms/Text");
 
-var _Modal = require("./Modal");
+var _Modal2 = require("./Modal");
 
 var _styled = require("./styled");
 
@@ -44,6 +46,7 @@ function Select({
   hintComponent,
   hint,
   style,
+  closeOnPick = type === 'single',
   ...rest
 }) {
   const {
@@ -51,8 +54,8 @@ function Select({
     handleBlur,
     handleFocus
   } = (0, _reactCore.useInputFocus)(onFocus, onBlur, !disabled);
-  const [modalVisible, setModalVisible] = React.useState(false);
   const [selectOptions, setSelectOptions] = (0, React.useState)([]);
+  const modal = (0, _Modal.useLazyModalManager)();
   const [loading, setLoading] = (0, React.useState)(false);
   (0, React.useEffect)(() => {
     if (typeof options !== 'function') {
@@ -107,22 +110,12 @@ function Select({
           }
         }
       } catch (e) {} finally {
+        modal.requestUpdate();
         setLoading(false);
       }
     }
   }, [options, value, keyExtractor]);
 
-  const handlePressInput = async () => {
-    setModalVisible(true);
-    handleFocus();
-    await handleLazyFocus();
-  };
-
-  const handleCloseModal = () => {
-    setModalVisible(false);
-    handleBlur();
-  };
-
   const getDisplayValue = () => {
     if (Array.isArray(value)) {
       if (value.length === 0) return placeholder;else {
@@ -135,6 +128,32 @@ function Select({
     }
   };
 
+  modal.sync(React.createElement(_Modal2.Modal, {
+    options: selectOptions || [],
+    focused: true,
+    keyExtractor: keyExtractor,
+    labelExtractor: labelExtractor,
+    groupKeyExtractor: groupKeyExtractor,
+    searchBarPlaceholder: searchBarPlaceholder,
+    type: type,
+    onSelect: onSelect,
+    value: value,
+    hideSearchBar: hideSearchBar,
+    onSearch: handleOnSearch,
+    selectModalTitle: selectModalTitle,
+    selectModalTitleComponent: selectModalTitleComponent,
+    confirmButtonText: confirmButtonText,
+    loading: loading,
+    onClose: handleBlur,
+    closeOnPick: closeOnPick
+  }));
+
+  const handlePressInput = async () => {
+    modal.show();
+    handleFocus();
+    await handleLazyFocus();
+  };
+
   return React.createElement(React.Fragment, null, React.createElement(_reactCore.HintInputContainer, _extends({
     viewStyle: style,
     onPress: handlePressInput,
@@ -152,27 +171,7 @@ function Select({
   }, rest), React.createElement(_styled.StyledSelectionText, {
     fontWeight: "bold",
     disabled: disabled
-  }, getDisplayValue() || ' ')), React.createElement(_Modal.Modal, {
-    visible: modalVisible,
-    options: selectOptions || [],
-    focused: modalVisible,
-    keyExtractor: keyExtractor,
-    labelExtractor: labelExtractor,
-    groupKeyExtractor: groupKeyExtractor,
-    searchBarPlaceholder: searchBarPlaceholder,
-    type: type,
-    onSelect: onSelect,
-    value: value,
-    hideSearchBar: hideSearchBar,
-    onRequestClose: handleCloseModal,
-    animated: true,
-    animationType: 'slide',
-    onSearch: handleOnSearch,
-    selectModalTitle: selectModalTitle,
-    selectModalTitleComponent: selectModalTitleComponent,
-    confirmButtonText: confirmButtonText,
-    loading: loading
-  }));
+  }, getDisplayValue() || ' ')));
 }
 
 var _default = Select;

package/dist/components/molecules/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/Select/Select.tsx"],"names":["Select","value","options","keyExtractor","groupKeyExtractor","onSelect","type","labelExtractor","placeholder","onFocus","onBlur","disabled","onSearch","selectModalTitle","selectModalTitleComponent","searchBarPlaceholder","hideSearchBar","confirmButtonText","rightComponent","variant","hintComponent","hint","style","closeOnPick","rest","focused","handleBlur","handleFocus","selectOptions","setSelectOptions","modal","loading","setLoading","handleLazyFocus","result","find","v","e","handleOnSearch","React","useCallback","searchInput","undefined","length","selectedValues","filter","current","requestUpdate","getDisplayValue","Array","isArray","reduce","acc","option","index","key","slice","selectedOption","sync","handlePressInput","show","Text"],"mappings":"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","sourcesContent":["import {\n  HintInputContainer, InputContainerProps,\n  useInputFocus\n} from '@tecsinapse/react-core';\nimport * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { useLazyModalManager } from '../../atoms/Modal';\nimport { Text } from '../../atoms/Text';\nimport { Modal } from './Modal';\nimport { SelectIcon, StyledSelectionText } from './styled';\n\nexport interface SelectNativeProps<Data, Type extends 'single' | 'multi'>\n  extends Omit<InputContainerProps, 'value' | 'onChange' | 'onChangeText'> {\n  options: ((searchInput?: string) => Promise<Data[]>) | Data[];\n  onSelect: (\n    option: Type extends 'single' ? Data | undefined : Data[]\n  ) => never | void;\n  value: Type extends 'single' ? Data | undefined : Data[];\n  type: Type;\n\n  keyExtractor: (t: Data, index?: number) => string;\n  labelExtractor: (t: Data) => string;\n  groupKeyExtractor?: (t: Data) => string;\n\n  hideSearchBar?: boolean;\n  placeholder?: string;\n  onFocus?: () => void | never;\n  onBlur?: () => void | never;\n  onSearch?:\n    | ((searchArg: string) => void)\n    | ((searchInput?: string) => Promise<Data[]>)\n    | never;\n  searchBarPlaceholder?: string;\n  confirmButtonText?: string;\n  selectModalTitle?: string;\n  selectModalTitleComponent?: JSX.Element;\n  closeOnPick?: boolean;\n}\n\nfunction Select<Data, Type extends 'single' | 'multi'>({\n  /** Select props */\n  value,\n  options,\n  keyExtractor,\n  groupKeyExtractor,\n  onSelect,\n  type,\n  labelExtractor,\n  placeholder,\n  onFocus,\n  onBlur,\n  disabled,\n  onSearch,\n  selectModalTitle,\n  selectModalTitleComponent,\n  searchBarPlaceholder,\n  hideSearchBar,\n  confirmButtonText,\n  rightComponent,\n  variant = 'default',\n  hintComponent,\n  hint,\n  style,\n  closeOnPick = type === 'single',\n  ...rest\n}: SelectNativeProps<Data, Type>): JSX.Element {\n  const { focused, handleBlur, handleFocus } = useInputFocus(\n    onFocus,\n    onBlur,\n    !disabled\n  );\n\n  const [selectOptions, setSelectOptions] = useState<Data[]>([]);\n  const modal = useLazyModalManager()\n\n  // TODO: Add Skeleton to modal height when loading is true\n  const [loading, setLoading] = useState<boolean>(false);\n\n  useEffect(() => {\n    if (typeof options !== 'function') {\n      setSelectOptions(options);\n    }\n  }, [options]);\n\n  useEffect(() => {\n    if (typeof options === 'function') {\n      if (value) {\n        if (type === 'single') setSelectOptions([value as Data]);\n        else setSelectOptions([...(value as Data[])]);\n      } else setSelectOptions([]);\n    }\n  }, [value]);\n\n  const handleLazyFocus = async () => {\n    if (typeof options === 'function') {\n      setLoading(true);\n      try {\n        const result = await options();\n        if (result) {\n          if (\n            value &&\n            !result.find(v => keyExtractor(value as Data) === keyExtractor(v))\n          ) {\n            setSelectOptions([value as Data, ...result]);\n          } else setSelectOptions(result);\n        }\n      } catch (e) {\n        // TODO: Catch error\n      } finally {\n        setLoading(false);\n      }\n    }\n  };\n\n  const handleOnSearch = React.useCallback(\n    async (searchInput: string | undefined) => {\n      if (searchInput !== undefined && onSearch) {\n        setLoading(true);\n        try {\n          const result = await onSearch(searchInput);\n          if (result) {\n            if (type === 'single') {\n              if (\n                value &&\n                !result.find(\n                  v => keyExtractor(value as Data) === keyExtractor(v)\n                )\n              ) {\n                setSelectOptions([value as Data, ...result]);\n              } else setSelectOptions(result);\n            } else {\n              if ((value as Data[]).length > 0) {\n                const selectedValues =\n                  (value as Data[]).filter(\n                    v =>\n                      !result.find(\n                        current =>\n                          keyExtractor(v as Data) === keyExtractor(current)\n                      )\n                  ) || [];\n                setSelectOptions([...selectedValues, ...result]);\n              } else {\n                setSelectOptions(result);\n              }\n            }\n          }\n        } catch (e) {\n          // TODO: Catch error\n        } finally {\n          modal.requestUpdate()\n          setLoading(false);\n        }\n      }\n    },\n    [options, value, keyExtractor]\n  );\n\n  const getDisplayValue = () => {\n    if (Array.isArray(value)) {\n      if (value.length === 0) return placeholder;\n      else {\n        return selectOptions\n          ?.reduce(\n            (acc, option, index) =>\n              value.find(\n                key => keyExtractor(option, index) == keyExtractor(key, index)\n              )\n                ? acc + labelExtractor(option) + ', '\n                : acc,\n            ''\n          )\n          .slice(0, -2);\n      }\n    } else {\n      if (value === undefined) return placeholder;\n      const selectedOption = selectOptions?.find(\n        (option, index) =>\n          keyExtractor(option, index) == keyExtractor(value as Data, index)\n      );\n      return selectedOption ? labelExtractor(selectedOption) : placeholder;\n    }\n  };\n\n  modal.sync(\n    <Modal\n      options={selectOptions || []}\n      focused={true}\n      keyExtractor={keyExtractor}\n      labelExtractor={labelExtractor}\n      groupKeyExtractor={groupKeyExtractor}\n      searchBarPlaceholder={searchBarPlaceholder}\n      type={type}\n      onSelect={onSelect}\n      value={value}\n      hideSearchBar={hideSearchBar}\n      onSearch={handleOnSearch}\n      selectModalTitle={selectModalTitle}\n      selectModalTitleComponent={selectModalTitleComponent}\n      confirmButtonText={confirmButtonText}\n      loading={loading}\n      onClose={handleBlur}\n      closeOnPick={closeOnPick}\n    />\n  )\n  \n  const handlePressInput = async () => {\n    modal.show()\n    handleFocus();\n    await handleLazyFocus();\n  };\n\n  return (\n    <>\n      <HintInputContainer\n        viewStyle={style}\n        onPress={handlePressInput}\n        focused={focused}\n        disabled={disabled}\n        LabelComponent={Text}\n        variant={variant}\n        hint={hint}\n        hintComponent={hintComponent}\n        rightComponent={\n          <>\n            <SelectIcon name=\"chevron-down\" type=\"ionicon\" size=\"centi\" />\n            {rightComponent}\n          </>\n        }\n        {...rest}\n      >\n        <StyledSelectionText fontWeight=\"bold\" disabled={disabled}>\n          {getDisplayValue() || ' '}\n        </StyledSelectionText>\n      </HintInputContainer>\n    </>\n  );\n}\n\nexport default Select;\n"],"file":"Select.js"}

package/dist/components/molecules/Select/index.js.map

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

package/dist/components/{atoms → molecules}/Select/styled.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ActivityIndicator, View, ViewProps } from 'react-native';
-export declare const StyledModal: import("@emotion/native").StyledComponent<any, {}, {
+export declare const getStyledModal: (safeTop?: number) => import("@emotion/native").StyledComponent<any, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 export declare const StyledSelectionText: import("@emotion/native").StyledComponent<any, {}, {}>;

package/dist/components/{atoms → molecules}/Select/styled.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FetchIndicator = exports.SelectIcon = exports.ModalFooter = exports.ListItem = exports.SearchBar = exports.SearchBarContainer = exports.CloseButton = exports.Header = exports.StyledPressableSurface = exports.Dummy = exports.StyledSelectionText = exports.StyledModal = void 0;
+exports.FetchIndicator = exports.SelectIcon = exports.ModalFooter = exports.ListItem = exports.SearchBar = exports.SearchBarContainer = exports.CloseButton = exports.Header = exports.StyledPressableSurface = exports.Dummy = exports.StyledSelectionText = exports.getStyledModal = void 0;
 
 var _native = _interopRequireWildcard(require("@emotion/native"));
 
@@ -11,23 +11,25 @@ var _reactCore = require("@tecsinapse/react-core");
 
 var _reactNative = require("react-native");
 
-var _Input = require("../Input");
+var _Input = require("../../atoms/Input");
 
-var _Text = require("../Text");
+var _Text = require("../../atoms/Text");
 
 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 StyledModal = (0, _native.default)(_reactNative.View)`
-  position: relative;
-  background-color: ${({
-  theme
-}) => theme.miscellaneous.bodyColor};
-  height: 100%;
-  width: 100%;
-`;
-exports.StyledModal = StyledModal;
+const getStyledModal = (safeTop = 0) => {
+  return (0, _native.default)(_reactNative.View)`
+    padding-top: ${`${(0, _reactCore.RFValue)(safeTop)}px`};
+    background-color: ${({
+    theme
+  }) => theme.miscellaneous.bodyColor};
+    height: 100%;
+  `;
+};
+
+exports.getStyledModal = getStyledModal;
 const StyledSelectionText = (0, _native.default)(_Text.Text)(props => {
   var _props$theme;
 

package/dist/components/molecules/Select/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/Select/styled.ts"],"names":["getStyledModal","safeTop","View","theme","miscellaneous","bodyColor","StyledSelectionText","Text","props","typography","h5","lineHeight","Dummy","StyledPressableSurface","PressableSurface","Header","spacing","deca","CloseButton","Button","SearchBarContainer","SearchBar","Input","ListItem","color","secondary","light","mili","ModalFooter","SelectIcon","Icon","centi","medium","FetchIndicator","ActivityIndicator"],"mappings":";;;;;;;AAAA;;AACA;;AAYA;;AACA;;AACA;;;;;;AAEO,MAAMA,cAAc,GAAG,CAACC,OAAe,GAAG,CAAnB,KAAyB;AACrD,SAAO,qBAAOC,iBAAP,CAA+C;AACxD,mBAAoB,GAAE,wBAAQD,OAAR,CAAiB,IAAI;AAC3C,wBAAwB,CAAC;AAAEE,IAAAA;AAAF,GAAD,KAAeA,KAAK,CAACC,aAAN,CAAoBC,SAAU;AACrE;AACA,GAJE;AAKD,CANM;;;AAQA,MAAMC,mBAAmB,GAAG,qBAAOC,UAAP,EAChCC,KAAD;AAAA;;AAAA,SAA+D,gBAAI;AACrE,mBADoE,gBACjDA,KAAK,CAACL,KAD2C,iDACjD,aAAaM,UAAb,CAAwBC,EAAxB,CAA2BC,UAAW;AACzD,MAAM,oCAAoBH,KAApB,CAA2B;AACjC,GAHE;AAAA,CADiC,CAA5B;;AAOA,MAAMI,KAAK,GAAG,qBAAOV,iBAAP,CAAa;AAClC;AACA;AACA,CAHO;;AAKA,MAAMW,sBAAsB,GAAG,qBACpCC,2BADoC,CAEb;AACzB;AACA,CAJO;;AAMA,MAAMC,MAAM,GAAG,qBAAOb,iBAAP,CAA8C;AACpE;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC/C,YAAY,2BAAW,MAAX,CAAmB;AAC/B,CATO;;AAWA,MAAMC,WAAW,GAAG,qBAAOC,iBAAP,CAAkD;AAC7E;AACA;AACA,CAHO;;AAKA,MAAMC,kBAAkB,GAAG,qBAAOlB,iBAAP,CAA8C;AAChF,aAAa,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC/C;AACA,CAHO;;AAKA,MAAMI,SAAS,GAAG,qBAAOC,YAAP,CAAsD;AAC/E,mBAAmB,CAAC;AAAEnB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AACrD,CAFO;;AAIA,MAAMM,QAAQ,GAAG,qBAAOT,2BAAP,CAEtB;AACF,yBAAyB,2BAAW,KAAX,CAAkB;AAC3C,kBAAkB,CAAC;AAAEX,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACqB,KAAN,CAAYC,SAAZ,CAAsBC,KAAM;AAC7D,sBAAsB,CAAC;AAAEvB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcW,IAAK;AACxD,wBAAwB,CAAC;AAAExB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC1D,CAPO;;AASA,MAAMW,WAAW,GAAG,qBAAO1B,iBAAP,CAAkC;AAC7D;AACA;AACA;AACA,sBAAsB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,aAAN,CAAoBC,SAAU;AACnE,aAAa,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAcC,IAAK;AAC/C,CANO;;AAQA,MAAMY,UAAU,GAAG,qBAAOC,eAAP,CAAkC;AAC5D,aAAa,CAAC;AAAE3B,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACa,OAAN,CAAce,KAAM;AAChD,WAAW,CAAC;AAAE5B,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACqB,KAAN,CAAYC,SAAZ,CAAsBO,MAAO;AACvD,CAHO;;AAKA,MAAMC,cAAc,GAAG,qBAAOC,8BAAP,CAA0B;AACxD;AACA,CAFO","sourcesContent":["import styled, { css } from '@emotion/native';\nimport {\n  Button,\n  ButtonProps,\n  disabledInputStyles,\n  Icon,\n  InputContainerProps,\n  PressableSurface,\n  PressableSurfaceProps,\n  RFValue,\n  RFValueStr,\n  StyleProps\n} from '@tecsinapse/react-core';\nimport { ActivityIndicator, ModalProps, View, ViewProps } from 'react-native';\nimport { Input, InputNativeProps } from '../../atoms/Input';\nimport { Text } from '../../atoms/Text';\n\nexport const getStyledModal = (safeTop: number = 0) => {\n  return styled(View)<ModalProps & Partial<StyleProps>>`\n    padding-top: ${`${RFValue(safeTop)}px`};\n    background-color: ${({ theme }) => theme.miscellaneous.bodyColor};\n    height: 100%;\n  `\n}\n\nexport const StyledSelectionText = styled(Text)(\n  (props: Partial<InputContainerProps> & Partial<StyleProps>) => css`\n    line-height: ${props.theme?.typography.h5.lineHeight};\n    ${disabledInputStyles(props)};\n  `\n);\n\nexport const Dummy = styled(View)`\n  aspect-ratio: 1;\n  height: 100%;\n`;\n\nexport const StyledPressableSurface = styled(\n  PressableSurface\n)<PressableSurfaceProps>`\n  width: 100%;\n`;\n\nexport const Header = styled(View)<ViewProps & Partial<StyleProps>>`\n  position: relative;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding: ${({ theme }) => theme.spacing.deca};\n  height: ${RFValueStr('75px')};\n`;\n\nexport const CloseButton = styled(Button)<ButtonProps & Partial<StyleProps>>`\n  aspect-ratio: 1;\n  height: 100%;\n`;\n\nexport const SearchBarContainer = styled(View)<ViewProps & Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.deca};\n  position: relative;\n`;\n\nexport const SearchBar = styled(Input)<InputNativeProps & Partial<StyleProps>>`\n  margin-bottom: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const ListItem = styled(PressableSurface)<\n  PressableSurfaceProps & Partial<StyleProps>\n>`\n  border-bottom-width: ${RFValueStr('1px')};\n  border-color: ${({ theme }) => theme.color.secondary.light};\n  padding-vertical: ${({ theme }) => theme.spacing.mili};\n  padding-horizontal: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const ModalFooter = styled(View)<Partial<StyleProps>>`\n  width: 100%;\n  height: auto;\n  bottom: 0;\n  background-color: ${({ theme }) => theme.miscellaneous.bodyColor};\n  padding: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const SelectIcon = styled(Icon)<Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.centi};\n  color: ${({ theme }) => theme.color.secondary.medium};\n`;\n\nexport const FetchIndicator = styled(ActivityIndicator)`\n  align-self: center;\n`;\n"],"file":"styled.js"}

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export * from '@tecsinapse/react-core';
 export { Header, HeaderProps } from './components/atoms/Header';
-export { Select, SelectNativeProps } from './components/atoms/Select';
+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';
@@ -17,4 +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';
+export { ModalGroupManager, ModalView, ModalLifecycleHandler, useLazyModalManager, useModalManager, IBaseModal } from './components/atoms/Modal';

package/dist/index.js

@@ -40,6 +40,7 @@ var _exportNames = {
   ModalGroupManager: true,
   ModalView: true,
   ModalLifecycleHandler: true,
+  useLazyModalManager: true,
   useModalManager: true,
   IBaseModal: true
 };
@@ -259,6 +260,12 @@ Object.defineProperty(exports, "ModalLifecycleHandler", {
     return _Modal.ModalLifecycleHandler;
   }
 });
+Object.defineProperty(exports, "useLazyModalManager", {
+  enumerable: true,
+  get: function () {
+    return _Modal.useLazyModalManager;
+  }
+});
 Object.defineProperty(exports, "useModalManager", {
   enumerable: true,
   get: function () {
@@ -288,7 +295,7 @@ Object.keys(_reactCore).forEach(function (key) {
 
 var _Header = require("./components/atoms/Header");
 
-var _Select = require("./components/atoms/Select");
+var _Select = require("./components/molecules/Select");
 
 var _Input = require("./components/atoms/Input");
 

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/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"}
+{"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 } 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, useLazyModalManager, 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.9",
+  "version": "1.12.13",
   "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.6"
+    "@tecsinapse/react-core": "^1.12.9"
   },
   "repository": {
     "type": "git",
@@ -34,5 +34,5 @@
   "devDependencies": {
     "@types/uuid": "^8.3.3"
   },
-  "gitHead": "5005537c38efef79cdd69a324563821e01e81f99"
+  "gitHead": "e4ceaaed1fb32ed77967fe54a056954be7b4151a"
 }

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

@@ -37,27 +37,29 @@ export class ModalLifecycleHandler {
      * 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, index, filteredNodes) => {
-                let modalElement = node.modal()
-                let { props } = modalElement
-                return React.cloneElement(modalElement, {
-                    ...props,
-                    key: node.id,
-                    visible: node.visible,
-                    isLastShown: filteredNodes.length - 1 === index,
-                    close: () => this.close(node.id),
-                    onClose: () => {
-                        this.remove(node.id)
-                        props.onClose?.()
-                    }
+        requestAnimationFrame(() => {
+            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, index, filteredNodes) => {
+                    let modalElement = node.modal()
+                    let { props } = modalElement
+                    return React.cloneElement(modalElement, {
+                        ...props,
+                        key: node.id,
+                        visible: node.visible,
+                        isLastShown: filteredNodes.length - 1 === index,
+                        close: () => this.close(node.id),
+                        onClose: () => {
+                            this.remove(node.id)
+                            props.onClose?.()
+                        }
+                    })
                 })
-            })
-            
-        const [, updateState ] = this.state || []
-        updateState?.(nodes)
+                
+            const [, updateState ] = this.state || []
+            updateState?.(nodes)
+        })
     }
 
     /**

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

@@ -2,4 +2,5 @@ export * from './ModalGroupManager'
 export * from './ModalLifecycleHandler'
 export * from './ui/BaseModalView'
 export * from './ui/types'
-export * from './useModalManager'
+export * from './useModalManager'
+export * from './useLazyModalManager'

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

@@ -1,6 +1,6 @@
 import { BoxContent } from "@tecsinapse/react-core";
 import React, { FC, useCallback, useEffect, useRef, useState } from "react";
-import { Animated, Easing, Keyboard, KeyboardAvoidingView, LayoutChangeEvent, Pressable } from "react-native";
+import { Animated, Dimensions, Easing, Keyboard, LayoutChangeEvent, Pressable, StatusBar } from "react-native";
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { BackDropView, CloseBar, StyledPressableBackDrop } from "./styled";
 import { IBaseModal } from "./types";
@@ -16,18 +16,30 @@ export const ModalView: FC<IBaseModal> = ({
     BoxComponent = BoxContent,
     frozen,
     isLastShown,
+    showCloseBar = true,
     close,
     onClose
 }) => {
     
     const { bottom } = useSafeAreaInsets()
     const [ ready, setReady ] = useState(false)
-    const [ keyboardOpened, setKeyboardOpened ] = useState(false)
+    const [ keyboardOpened, setKeyboardOpened ] = useState(0)
     const [ boxHeight, setBoxHeight ] = useState(0)
     const backgroundCarrier = useRef(new Animated.Value(0)).current
     const translationCarrier = useRef(new Animated.Value(0)).current
     const opacityCarrier = useRef(new Animated.Value(0)).current
-    const offset = isLastShown && keyboardOpened ? 0 : bottom
+    const offset = isLastShown && keyboardOpened > 0 ? 0 : bottom
+
+    const getKeyboardHeight = (keyboard: number) => {
+        if (keyboard === 0) return 0
+        
+        let wHeight = Math.ceil(Dimensions.get('window').height)
+        let sHeight = Math.ceil(Dimensions.get('screen').height)
+        if (wHeight !== sHeight) {
+            return keyboard + (sHeight - wHeight - (StatusBar.currentHeight || 0))
+        }
+        return keyboard
+    }
 
     const show = useCallback(() => {
         Animated.sequence([
@@ -100,8 +112,8 @@ export const ModalView: FC<IBaseModal> = ({
     }, [ready, visible])
 
     useEffect(() => {
-        const showEvent = Keyboard.addListener('keyboardDidShow', () => setKeyboardOpened(true))
-        const hideEvent = Keyboard.addListener('keyboardDidHide', () => setKeyboardOpened(false))
+        const showEvent = Keyboard.addListener('keyboardDidShow', (e) => setKeyboardOpened(e.endCoordinates.height))
+        const hideEvent = Keyboard.addListener('keyboardDidHide', () => setKeyboardOpened(0))
         return () => {
             showEvent.remove()
             hideEvent.remove()
@@ -111,16 +123,18 @@ export const ModalView: FC<IBaseModal> = ({
     return (
         <StyledPressableBackDrop onPress={!frozen ? close : undefined}>
             <BackDropView style={{ backgroundColor: backgroundInterpolation }}>
-                <KeyboardAvoidingView enabled={isLastShown} behavior="padding">
-                    <Animated.View style={{ opacity: opacityCarrier, transform: [{ translateY: translationCarrier }]}}>
-                        <Pressable>
-                            <BoxComponent onLayout={handleBoxLayoutChanges} style={{ paddingBottom: offset }} variant="bottom">
-                                <CloseBar/>
-                                {children}
-                            </BoxComponent>
-                        </Pressable>
-                    </Animated.View>
-                </KeyboardAvoidingView>
+                <Animated.View style={{ 
+                        paddingBottom: isLastShown ? getKeyboardHeight(keyboardOpened) : 0, 
+                        opacity: opacityCarrier, 
+                        transform: [{ translateY: translationCarrier }]
+                    }}>
+                    <Pressable>
+                        <BoxComponent onLayout={handleBoxLayoutChanges} style={{ paddingBottom: offset }} variant="bottom">
+                            {showCloseBar && <CloseBar/>}
+                            {children}
+                        </BoxComponent>
+                    </Pressable>
+                </Animated.View>
             </BackDropView>
         </StyledPressableBackDrop>
     )

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

@@ -7,6 +7,7 @@ export interface IBaseModal {
     BoxComponent?: React.FC<any>
     frozen?: boolean
     isLastShown?: boolean
+    showCloseBar?: boolean
     close?: () => void
     onClose?: () => void
 }