@tecsinapse/react-native-kit 1.15.7 → 1.16.2

package/dist/index.js

@@ -1,8 +1,6 @@
 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 var _exportNames = {
   Header: true,
   HeaderProps: true,
@@ -48,264 +46,7 @@ var _exportNames = {
   Skeleton: true,
   SkeletonProps: true
 };
-Object.defineProperty(exports, "Header", {
-  enumerable: true,
-  get: function () {
-    return _Header.Header;
-  }
-});
-Object.defineProperty(exports, "HeaderProps", {
-  enumerable: true,
-  get: function () {
-    return _Header.HeaderProps;
-  }
-});
-Object.defineProperty(exports, "Select", {
-  enumerable: true,
-  get: function () {
-    return _Select.Select;
-  }
-});
-Object.defineProperty(exports, "SelectNativeProps", {
-  enumerable: true,
-  get: function () {
-    return _Select.SelectNativeProps;
-  }
-});
-Object.defineProperty(exports, "Input", {
-  enumerable: true,
-  get: function () {
-    return _Input.Input;
-  }
-});
-Object.defineProperty(exports, "InputNativeProps", {
-  enumerable: true,
-  get: function () {
-    return _Input.InputNativeProps;
-  }
-});
-Object.defineProperty(exports, "TextArea", {
-  enumerable: true,
-  get: function () {
-    return _TextArea.TextArea;
-  }
-});
-Object.defineProperty(exports, "TextAreaProps", {
-  enumerable: true,
-  get: function () {
-    return _TextArea.TextAreaProps;
-  }
-});
-Object.defineProperty(exports, "Text", {
-  enumerable: true,
-  get: function () {
-    return _Text.Text;
-  }
-});
-Object.defineProperty(exports, "TextNativeProps", {
-  enumerable: true,
-  get: function () {
-    return _Text.TextNativeProps;
-  }
-});
-Object.defineProperty(exports, "Error", {
-  enumerable: true,
-  get: function () {
-    return _Button.Error;
-  }
-});
-Object.defineProperty(exports, "Loading", {
-  enumerable: true,
-  get: function () {
-    return _Button.Loading;
-  }
-});
-Object.defineProperty(exports, "Success", {
-  enumerable: true,
-  get: function () {
-    return _Button.Success;
-  }
-});
-Object.defineProperty(exports, "Button", {
-  enumerable: true,
-  get: function () {
-    return _Button.Button;
-  }
-});
-Object.defineProperty(exports, "ButtonNativeProps", {
-  enumerable: true,
-  get: function () {
-    return _Button.ButtonNativeProps;
-  }
-});
-Object.defineProperty(exports, "GroupButtonOption", {
-  enumerable: true,
-  get: function () {
-    return _GroupButton.GroupButtonOption;
-  }
-});
-Object.defineProperty(exports, "InputPassword", {
-  enumerable: true,
-  get: function () {
-    return _InputPassword.InputPassword;
-  }
-});
-Object.defineProperty(exports, "InputPasswordNativeProps", {
-  enumerable: true,
-  get: function () {
-    return _InputPassword.InputPasswordNativeProps;
-  }
-});
-Object.defineProperty(exports, "BottomNavigator", {
-  enumerable: true,
-  get: function () {
-    return _BottomNavigator.BottomNavigator;
-  }
-});
-Object.defineProperty(exports, "BottomNavigatorProps", {
-  enumerable: true,
-  get: function () {
-    return _BottomNavigator.BottomNavigatorProps;
-  }
-});
-Object.defineProperty(exports, "Tag", {
-  enumerable: true,
-  get: function () {
-    return _Tag.Tag;
-  }
-});
-Object.defineProperty(exports, "TagProps", {
-  enumerable: true,
-  get: function () {
-    return _Tag.TagProps;
-  }
-});
-Object.defineProperty(exports, "SnappingSlider", {
-  enumerable: true,
-  get: function () {
-    return _SnappingSlider.SnappingSlider;
-  }
-});
-Object.defineProperty(exports, "SnappingSliderProps", {
-  enumerable: true,
-  get: function () {
-    return _SnappingSlider.SnappingSliderProps;
-  }
-});
-Object.defineProperty(exports, "Badge", {
-  enumerable: true,
-  get: function () {
-    return _Badge.Badge;
-  }
-});
-Object.defineProperty(exports, "BadgeNativeProps", {
-  enumerable: true,
-  get: function () {
-    return _Badge.BadgeNativeProps;
-  }
-});
-Object.defineProperty(exports, "Snackbar", {
-  enumerable: true,
-  get: function () {
-    return _Snackbar.Snackbar;
-  }
-});
-Object.defineProperty(exports, "SnackbarNativeProps", {
-  enumerable: true,
-  get: function () {
-    return _Snackbar.SnackbarNativeProps;
-  }
-});
-Object.defineProperty(exports, "DatePicker", {
-  enumerable: true,
-  get: function () {
-    return _DatePicker.DatePicker;
-  }
-});
-Object.defineProperty(exports, "NativeDatePickerProps", {
-  enumerable: true,
-  get: function () {
-    return _DatePicker.NativeDatePickerProps;
-  }
-});
-Object.defineProperty(exports, "DateTimePicker", {
-  enumerable: true,
-  get: function () {
-    return _DateTimePicker.DateTimePicker;
-  }
-});
-Object.defineProperty(exports, "NativeDateTimePickerProps", {
-  enumerable: true,
-  get: function () {
-    return _DateTimePicker.NativeDateTimePickerProps;
-  }
-});
-Object.defineProperty(exports, "Avatar", {
-  enumerable: true,
-  get: function () {
-    return _Avatar.Avatar;
-  }
-});
-Object.defineProperty(exports, "Calendar", {
-  enumerable: true,
-  get: function () {
-    return _Calendar.Calendar;
-  }
-});
-Object.defineProperty(exports, "DateTimeSelector", {
-  enumerable: true,
-  get: function () {
-    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, "useLazyModalManager", {
-  enumerable: true,
-  get: function () {
-    return _Modal.useLazyModalManager;
-  }
-});
-Object.defineProperty(exports, "useModalManager", {
-  enumerable: true,
-  get: function () {
-    return _Modal.useModalManager;
-  }
-});
-Object.defineProperty(exports, "IBaseModal", {
-  enumerable: true,
-  get: function () {
-    return _Modal.IBaseModal;
-  }
-});
-Object.defineProperty(exports, "Skeleton", {
-  enumerable: true,
-  get: function () {
-    return _Skeleton.Skeleton;
-  }
-});
-Object.defineProperty(exports, "SkeletonProps", {
-  enumerable: true,
-  get: function () {
-    return _Skeleton.SkeletonProps;
-  }
-});
+exports.SkeletonProps = exports.Skeleton = exports.IBaseModal = exports.useModalManager = exports.useLazyModalManager = exports.ModalLifecycleHandler = exports.ModalView = exports.ModalGroupManager = exports.DateTimeSelector = exports.Calendar = exports.Avatar = exports.NativeDateTimePickerProps = exports.DateTimePicker = exports.NativeDatePickerProps = exports.DatePicker = exports.SnackbarNativeProps = exports.Snackbar = exports.BadgeNativeProps = exports.Badge = exports.SnappingSliderProps = exports.SnappingSlider = exports.TagProps = exports.Tag = exports.BottomNavigatorProps = exports.BottomNavigator = exports.InputPasswordNativeProps = exports.InputPassword = exports.GroupButtonOption = exports.ButtonNativeProps = exports.Button = exports.Success = exports.Loading = exports.Error = exports.TextNativeProps = exports.Text = exports.TextAreaProps = exports.TextArea = exports.InputNativeProps = exports.Input = exports.SelectNativeProps = exports.Select = exports.HeaderProps = exports.Header = void 0;
 
 var _reactCore = require("@tecsinapse/react-core");
 
@@ -313,51 +54,109 @@ Object.keys(_reactCore).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _reactCore[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _reactCore[key];
-    }
-  });
+  exports[key] = _reactCore[key];
 });
 
 var _Header = require("./components/atoms/Header");
 
+exports.Header = _Header.Header;
+exports.HeaderProps = _Header.HeaderProps;
+
 var _Select = require("./components/molecules/Select");
 
+exports.Select = _Select.Select;
+exports.SelectNativeProps = _Select.SelectNativeProps;
+
 var _Input = require("./components/atoms/Input");
 
+exports.Input = _Input.Input;
+exports.InputNativeProps = _Input.InputNativeProps;
+
 var _TextArea = require("./components/atoms/TextArea");
 
+exports.TextArea = _TextArea.TextArea;
+exports.TextAreaProps = _TextArea.TextAreaProps;
+
 var _Text = require("./components/atoms/Text");
 
+exports.Text = _Text.Text;
+exports.TextNativeProps = _Text.TextNativeProps;
+
 var _Button = require("./components/atoms/Button");
 
+exports.Error = _Button.Error;
+exports.Loading = _Button.Loading;
+exports.Success = _Button.Success;
+exports.Button = _Button.Button;
+exports.ButtonNativeProps = _Button.ButtonNativeProps;
+
 var _GroupButton = require("./components/atoms/GroupButton");
 
+exports.GroupButtonOption = _GroupButton.GroupButtonOption;
+
 var _InputPassword = require("./components/molecules/InputPassword");
 
+exports.InputPassword = _InputPassword.InputPassword;
+exports.InputPasswordNativeProps = _InputPassword.InputPasswordNativeProps;
+
 var _BottomNavigator = require("./components/atoms/BottomNavigator");
 
+exports.BottomNavigator = _BottomNavigator.BottomNavigator;
+exports.BottomNavigatorProps = _BottomNavigator.BottomNavigatorProps;
+
 var _Tag = require("./components/atoms/Tag");
 
+exports.Tag = _Tag.Tag;
+exports.TagProps = _Tag.TagProps;
+
 var _SnappingSlider = require("./components/atoms/SnappingSlider");
 
+exports.SnappingSlider = _SnappingSlider.SnappingSlider;
+exports.SnappingSliderProps = _SnappingSlider.SnappingSliderProps;
+
 var _Badge = require("./components/atoms/Badge");
 
+exports.Badge = _Badge.Badge;
+exports.BadgeNativeProps = _Badge.BadgeNativeProps;
+
 var _Snackbar = require("./components/molecules/Snackbar");
 
+exports.Snackbar = _Snackbar.Snackbar;
+exports.SnackbarNativeProps = _Snackbar.SnackbarNativeProps;
+
 var _DatePicker = require("./components/molecules/DatePicker");
 
+exports.DatePicker = _DatePicker.DatePicker;
+exports.NativeDatePickerProps = _DatePicker.NativeDatePickerProps;
+
 var _DateTimePicker = require("./components/molecules/DateTimePicker");
 
+exports.DateTimePicker = _DateTimePicker.DateTimePicker;
+exports.NativeDateTimePickerProps = _DateTimePicker.NativeDateTimePickerProps;
+
 var _Avatar = require("./components/atoms/Avatar");
 
+exports.Avatar = _Avatar.Avatar;
+
 var _Calendar = require("./components/molecules/Calendar");
 
+exports.Calendar = _Calendar.Calendar;
+
 var _DateTimeSelector = require("./components/molecules/DateTimeSelector");
 
+exports.DateTimeSelector = _DateTimeSelector.DateTimeSelector;
+
 var _Modal = require("./components/atoms/Modal");
 
+exports.ModalGroupManager = _Modal.ModalGroupManager;
+exports.ModalView = _Modal.ModalView;
+exports.ModalLifecycleHandler = _Modal.ModalLifecycleHandler;
+exports.useLazyModalManager = _Modal.useLazyModalManager;
+exports.useModalManager = _Modal.useModalManager;
+exports.IBaseModal = _Modal.IBaseModal;
+
 var _Skeleton = require("./components/atoms/Skeleton");
+
+exports.Skeleton = _Skeleton.Skeleton;
+exports.SkeletonProps = _Skeleton.SkeletonProps;
 //# 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;;AAOA;;AACA;;AAIA;;AAIA;;AACA;;AAIA;;AACA;;AACA;;AAIA;;AAIA;;AACA;;AACA;;AACA;;AAQA","sourcesContent":["export * from '@tecsinapse/react-core';\nexport { Header, HeaderProps } from './components/atoms/Header';\nexport { Select, SelectNativeProps } from './components/molecules/Select';\nexport { Input, InputNativeProps } from './components/atoms/Input';\nexport { TextArea, TextAreaProps } from './components/atoms/TextArea';\nexport { Text, TextNativeProps } from './components/atoms/Text';\nexport {\n  Error,\n  Loading,\n  Success,\n  Button,\n  ButtonNativeProps,\n} from './components/atoms/Button';\nexport { GroupButtonOption } from './components/atoms/GroupButton';\nexport {\n  InputPassword,\n  InputPasswordNativeProps,\n} from './components/molecules/InputPassword';\nexport {\n  BottomNavigator,\n  BottomNavigatorProps,\n} from './components/atoms/BottomNavigator';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport {\n  SnappingSlider,\n  SnappingSliderProps,\n} from './components/atoms/SnappingSlider';\nexport { Badge, BadgeNativeProps } from './components/atoms/Badge';\nexport { Snackbar, SnackbarNativeProps } from './components/molecules/Snackbar';\nexport {\n  DatePicker,\n  NativeDatePickerProps,\n} from './components/molecules/DatePicker';\nexport {\n  DateTimePicker,\n  NativeDateTimePickerProps,\n} from './components/molecules/DateTimePicker';\nexport { Avatar } from './components/atoms/Avatar';\nexport { Calendar } from './components/molecules/Calendar';\nexport { DateTimeSelector } from './components/molecules/DateTimeSelector';\nexport {\n  ModalGroupManager,\n  ModalView,\n  ModalLifecycleHandler,\n  useLazyModalManager,\n  useModalManager,\n  IBaseModal,\n} from './components/atoms/Modal';\nexport { Skeleton, SkeletonProps } from './components/atoms/Skeleton';\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;;;;AACA;;;;;AACA;;;;;AACA;;;;;AACA;;;;;AACA;;;;;;;;AAOA;;;;AACA;;;;;AAIA;;;;;AAIA;;;;;AACA;;;;;AAIA;;;;;AACA;;;;;AACA;;;;;AAIA;;;;;AAIA;;;;AACA;;;;AACA;;;;AACA;;;;;;;;;AAQA","sourcesContent":["export * from '@tecsinapse/react-core';\nexport { Header, HeaderProps } from './components/atoms/Header';\nexport { Select, SelectNativeProps } from './components/molecules/Select';\nexport { Input, InputNativeProps } from './components/atoms/Input';\nexport { TextArea, TextAreaProps } from './components/atoms/TextArea';\nexport { Text, TextNativeProps } from './components/atoms/Text';\nexport {\n  Error,\n  Loading,\n  Success,\n  Button,\n  ButtonNativeProps,\n} from './components/atoms/Button';\nexport { GroupButtonOption } from './components/atoms/GroupButton';\nexport {\n  InputPassword,\n  InputPasswordNativeProps,\n} from './components/molecules/InputPassword';\nexport {\n  BottomNavigator,\n  BottomNavigatorProps,\n} from './components/atoms/BottomNavigator';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport {\n  SnappingSlider,\n  SnappingSliderProps,\n} from './components/atoms/SnappingSlider';\nexport { Badge, BadgeNativeProps } from './components/atoms/Badge';\nexport { Snackbar, SnackbarNativeProps } from './components/molecules/Snackbar';\nexport {\n  DatePicker,\n  NativeDatePickerProps,\n} from './components/molecules/DatePicker';\nexport {\n  DateTimePicker,\n  NativeDateTimePickerProps,\n} from './components/molecules/DateTimePicker';\nexport { Avatar } from './components/atoms/Avatar';\nexport { Calendar } from './components/molecules/Calendar';\nexport { DateTimeSelector } from './components/molecules/DateTimeSelector';\nexport {\n  ModalGroupManager,\n  ModalView,\n  ModalLifecycleHandler,\n  useLazyModalManager,\n  useModalManager,\n  IBaseModal,\n} from './components/atoms/Modal';\nexport { Skeleton, SkeletonProps } from './components/atoms/Skeleton';\n"],"file":"index.js"}

package/dist/utils/date.js

@@ -1,8 +1,6 @@
 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 exports.getLocale = void 0;
 
 var _reactNative = require("react-native");

package/dist/utils/date.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/date.ts"],"names":["getLocale","locale","Platform","OS","NativeModules","SettingsManager","settings","AppleLocale","AppleLanguages","I18nManager","localeIdentifier","code","replace","dateFnsLocales"],"mappings":";;;;;;;AAAA;;AACA;;;;;;AAEO,MAAMA,SAAS,GAAG,MAAc;AACrC,MAAIC,MAAJ;;AACA,MAAIC,sBAASC,EAAT,KAAgB,KAApB,EAA2B;AACzBF,IAAAA,MAAM,GACJG,2BAAcC,eAAd,CAA8BC,QAA9B,CAAuCC,WAAvC,IACAH,2BAAcC,eAAd,CAA8BC,QAA9B,CAAuCE,cAAvC,CAAsD,CAAtD,CAFF;AAGD,GAJD,MAIO;AACLP,IAAAA,MAAM,GAAGG,2BAAcK,WAAd,CAA0BC,gBAAnC;AACD;;AAED,QAAMC,IAAI,GAAGV,MAAM,CAACW,OAAP,CAAe,GAAf,EAAoB,EAApB,CAAb;AAEA,SAAOC,cAAc,CAACF,IAAD,CAArB;AACD,CAbM","sourcesContent":["import { NativeModules, Platform } from 'react-native';\nimport * as dateFnsLocales from 'date-fns/locale';\n\nexport const getLocale = (): Locale => {\n  let locale: string;\n  if (Platform.OS === 'ios') {\n    locale =\n      NativeModules.SettingsManager.settings.AppleLocale ||\n      NativeModules.SettingsManager.settings.AppleLanguages[0];\n  } else {\n    locale = NativeModules.I18nManager.localeIdentifier;\n  }\n\n  const code = locale.replace('_', '');\n\n  return dateFnsLocales[code];\n};\n"],"file":"date.js"}
+{"version":3,"sources":["../../src/utils/date.ts"],"names":["getLocale","locale","Platform","OS","NativeModules","SettingsManager","settings","AppleLocale","AppleLanguages","I18nManager","localeIdentifier","code","replace","dateFnsLocales"],"mappings":";;;;;AAAA;;AACA;;;;;;AAEO,MAAMA,SAAS,GAAG,MAAc;AACrC,MAAIC,MAAJ;;AACA,MAAIC,sBAASC,EAAT,KAAgB,KAApB,EAA2B;AACzBF,IAAAA,MAAM,GACJG,2BAAcC,eAAd,CAA8BC,QAA9B,CAAuCC,WAAvC,IACAH,2BAAcC,eAAd,CAA8BC,QAA9B,CAAuCE,cAAvC,CAAsD,CAAtD,CAFF;AAGD,GAJD,MAIO;AACLP,IAAAA,MAAM,GAAGG,2BAAcK,WAAd,CAA0BC,gBAAnC;AACD;;AAED,QAAMC,IAAI,GAAGV,MAAM,CAACW,OAAP,CAAe,GAAf,EAAoB,EAApB,CAAb;AAEA,SAAOC,cAAc,CAACF,IAAD,CAArB;AACD,CAbM","sourcesContent":["import { NativeModules, Platform } from 'react-native';\nimport * as dateFnsLocales from 'date-fns/locale';\n\nexport const getLocale = (): Locale => {\n  let locale: string;\n  if (Platform.OS === 'ios') {\n    locale =\n      NativeModules.SettingsManager.settings.AppleLocale ||\n      NativeModules.SettingsManager.settings.AppleLanguages[0];\n  } else {\n    locale = NativeModules.I18nManager.localeIdentifier;\n  }\n\n  const code = locale.replace('_', '');\n\n  return dateFnsLocales[code];\n};\n"],"file":"date.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-native-kit",
   "description": "TecSinapse React Native components",
-  "version": "1.15.7",
+  "version": "1.16.2",
   "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.14.7",
+    "@tecsinapse/react-core": "^1.15.1",
     "react-native-linear-gradient": "^2.5.6"
   },
   "repository": {
@@ -26,15 +26,15 @@
   },
   "homepage": "https://tecsinapse.github.io/design-system/",
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-native": ">=0.64.0",
+    "react": "^16.8.0 || ^17.0.0",
+    "react-native": "^0.64.0",
     "react-native-linear-gradient": "^2.5.6",
     "react-native-safe-area-context": "^3.1.9",
-    "react-native-vector-icons": ">=8.1.0",
+    "react-native-vector-icons": "^8.1.0 || ^9.0.0",
     "uuid": "^8.3.2"
   },
   "devDependencies": {
     "@types/uuid": "^8.3.3"
   },
-  "gitHead": "c0e8b876f05f42ff61bef6040232a813d1811eab"
+  "gitHead": "b2b885237c90b782b17e4081871b806b6191e3f2"
 }

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

@@ -50,12 +50,18 @@ const Skeleton: React.FC<SkeletonProps> = ({
           childrenLayout={childrenLayout}
         />
       ) : (
+        <></>
+      )}
+
+      {active && animation === 'pulse' ? (
         <Pulse
           active={active}
           width={width}
           height={height}
           childrenLayout={childrenLayout}
         />
+      ) : (
+        <></>
       )}
       <View
         onLayout={event => getChildrenLayout(event)}

package/src/components/molecules/Select/Select.tsx

@@ -1,6 +1,7 @@
 import {
-  HintInputContainer, InputContainerProps,
-  useInputFocus
+  HintInputContainer,
+  InputContainerProps,
+  useInputFocus,
 } from '@tecsinapse/react-core';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
@@ -35,6 +36,10 @@ export interface SelectNativeProps<Data, Type extends 'single' | 'multi'>
   selectModalTitle?: string;
   selectModalTitleComponent?: JSX.Element;
   closeOnPick?: boolean;
+  controlComponent?: (
+    onPress: () => void,
+    displayValue?: string
+  ) => JSX.Element;
 }
 
 function Select<Data, Type extends 'single' | 'multi'>({
@@ -61,6 +66,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
   hintComponent,
   hint,
   style,
+  controlComponent,
   closeOnPick = type === 'single',
   ...rest
 }: SelectNativeProps<Data, Type>): JSX.Element {
@@ -71,7 +77,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
   );
 
   const [selectOptions, setSelectOptions] = useState<Data[]>([]);
-  const modal = useLazyModalManager()
+  const modal = useLazyModalManager();
 
   // TODO: Add Skeleton to modal height when loading is true
   const [loading, setLoading] = useState<boolean>(false);
@@ -147,7 +153,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
         } catch (e) {
           // TODO: Catch error
         } finally {
-          modal.requestUpdate()
+          modal.requestUpdate();
           setLoading(false);
         }
       }
@@ -201,37 +207,41 @@ function Select<Data, Type extends 'single' | 'multi'>({
       onClose={handleBlur}
       closeOnPick={closeOnPick}
     />
-  )
-  
+  );
+
   const handlePressInput = async () => {
-    modal.show()
+    modal.show();
     handleFocus();
     await handleLazyFocus();
   };
 
   return (
     <>
-      <HintInputContainer
-        viewStyle={style}
-        onPress={handlePressInput}
-        focused={focused}
-        disabled={disabled}
-        LabelComponent={Text}
-        variant={variant}
-        hint={hint}
-        hintComponent={hintComponent}
-        rightComponent={
-          <>
-            <SelectIcon name="chevron-down" type="ionicon" size="centi" />
-            {rightComponent}
-          </>
-        }
-        {...rest}
-      >
-        <StyledSelectionText fontWeight="bold" disabled={disabled}>
-          {getDisplayValue() || ' '}
-        </StyledSelectionText>
-      </HintInputContainer>
+      {controlComponent ? (
+        controlComponent(handlePressInput, getDisplayValue() || '')
+      ) : (
+        <HintInputContainer
+          viewStyle={style}
+          onPress={handlePressInput}
+          focused={focused}
+          disabled={disabled}
+          LabelComponent={Text}
+          variant={variant}
+          hint={hint}
+          hintComponent={hintComponent}
+          rightComponent={
+            <>
+              <SelectIcon name="chevron-down" type="ionicon" size="centi" />
+              {rightComponent}
+            </>
+          }
+          {...rest}
+        >
+          <StyledSelectionText fontWeight="bold" disabled={disabled}>
+            {getDisplayValue() || ' '}
+          </StyledSelectionText>
+        </HintInputContainer>
+      )}
     </>
   );
 }