@tecsinapse/react-native-kit 1.10.2 → 1.11.0

package/dist/components/molecules/DateTimePicker/DateTimePicker.js

@@ -13,15 +13,21 @@ var _Text = require("../../atoms/Text");
 
 var _DateTimeSelector = require("../DateTimeSelector");
 
+var _date = require("../../../utils/date");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const DateTimePicker = props => {
-  return _react.default.createElement(_reactCore.DateTimePicker, _extends({}, props, {
+const DateTimePicker = ({
+  locale,
+  ...rest
+}) => {
+  return _react.default.createElement(_reactCore.DateTimePicker, _extends({}, rest, {
     TextComponent: _Text.Text,
     DateTimeSelectorComponent: _DateTimeSelector.DateTimeSelector,
-    animationType: "slide"
+    animationType: "slide",
+    locale: locale ?? (0, _date.getLocale)()
   }));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/DateTimePicker.tsx"],"names":["DateTimePicker","props","Text","DateTimeSelector"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;AACA;;;;;;AAEO,MAAMA,cAAuC,GAAGC,KAAK,IAAI;AAC9D,SACE,6BAAC,yBAAD,eACMA,KADN;AAEE,IAAA,aAAa,EAAEC,UAFjB;AAGE,IAAA,yBAAyB,EAAEC,kCAH7B;AAIE,IAAA,aAAa,EAAC;AAJhB,KADF;AAQD,CATM","sourcesContent":["import {\n  DateTimePicker as DateTimePickerCore,\n  DateTimePickerProps,\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { Text } from '../../atoms/Text';\nimport { DateTimeSelector } from '../DateTimeSelector';\n\nexport const DateTimePicker: FC<DateTimePickerProps> = props => {\n  return (\n    <DateTimePickerCore\n      {...props}\n      TextComponent={Text}\n      DateTimeSelectorComponent={DateTimeSelector}\n      animationType=\"slide\"\n    />\n  );\n};\n"],"file":"DateTimePicker.js"}
+{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/DateTimePicker.tsx"],"names":["DateTimePicker","locale","rest","Text","DateTimeSelector"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;AACA;;AACA;;;;;;AAEO,MAAMA,cAAuC,GAAG,CAAC;AACtDC,EAAAA,MADsD;AAEtD,KAAGC;AAFmD,CAAD,KAGjD;AACJ,SACE,6BAAC,yBAAD,eACMA,IADN;AAEE,IAAA,aAAa,EAAEC,UAFjB;AAGE,IAAA,yBAAyB,EAAEC,kCAH7B;AAIE,IAAA,aAAa,EAAC,OAJhB;AAKE,IAAA,MAAM,EAAEH,MAAM,IAAI;AALpB,KADF;AASD,CAbM","sourcesContent":["import {\n  DateTimePicker as DateTimePickerCore,\n  DateTimePickerProps,\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { Text } from '../../atoms/Text';\nimport { DateTimeSelector } from '../DateTimeSelector';\nimport { getLocale } from '../../../utils/date';\n\nexport const DateTimePicker: FC<DateTimePickerProps> = ({\n  locale,\n  ...rest\n}) => {\n  return (\n    <DateTimePickerCore\n      {...rest}\n      TextComponent={Text}\n      DateTimeSelectorComponent={DateTimeSelector}\n      animationType=\"slide\"\n      locale={locale ?? getLocale()}\n    />\n  );\n};\n"],"file":"DateTimePicker.js"}

package/dist/components/molecules/DateTimeSelector/DateTimeSelector.js

@@ -11,13 +11,19 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Text = require("../../atoms/Text");
 
+var _date = require("../../../utils/date");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const DateTimeSelector = props => {
-  return _react.default.createElement(_reactCore.DateTimeSelector, _extends({}, props, {
-    TextComponent: _Text.Text
+const DateTimeSelector = ({
+  locale,
+  ...rest
+}) => {
+  return _react.default.createElement(_reactCore.DateTimeSelector, _extends({}, rest, {
+    TextComponent: _Text.Text,
+    locale: locale ?? (0, _date.getLocale)()
   }));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/DateTimeSelector/DateTimeSelector.tsx"],"names":["DateTimeSelector","props","Text"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;;;;;AAEO,MAAMA,gBAA2C,GAAGC,KAAK,IAAI;AAClE,SAAO,6BAAC,2BAAD,eAA0BA,KAA1B;AAAiC,IAAA,aAAa,EAAEC;AAAhD,KAAP;AACD,CAFM","sourcesContent":["import {\n  DateTimeSelector as DateTimeSelectorCore,\n  DateTimeSelectorProps,\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { Text } from '../../atoms/Text';\n\nexport const DateTimeSelector: FC<DateTimeSelectorProps> = props => {\n  return <DateTimeSelectorCore {...props} TextComponent={Text} />;\n};\n"],"file":"DateTimeSelector.js"}
+{"version":3,"sources":["../../../../src/components/molecules/DateTimeSelector/DateTimeSelector.tsx"],"names":["DateTimeSelector","locale","rest","Text"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;AACA;;;;;;AAEO,MAAMA,gBAA2C,GAAG,CAAC;AAACC,EAAAA,MAAD;AAAS,KAAGC;AAAZ,CAAD,KAAuB;AAChF,SACE,6BAAC,2BAAD,eACMA,IADN;AAEE,IAAA,aAAa,EAAEC,UAFjB;AAGE,IAAA,MAAM,EAAEF,MAAM,IAAI;AAHpB,KADF;AAOD,CARM","sourcesContent":["import {\n  DateTimeSelector as DateTimeSelectorCore,\n  DateTimeSelectorProps,\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { Text } from '../../atoms/Text';\nimport { getLocale } from '../../../utils/date';\n\nexport const DateTimeSelector: FC<DateTimeSelectorProps> = ({locale, ...rest}) => {\n  return (\n    <DateTimeSelectorCore\n      {...rest}\n      TextComponent={Text}\n      locale={locale ?? getLocale()}\n    />\n  );\n};\n"],"file":"DateTimeSelector.js"}

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { Select, SelectNativeProps } from './components/atoms/Select';
 export { Input, InputNativeProps } from './components/atoms/Input';
 export { TextArea, TextAreaProps } from './components/atoms/TextArea';
 export { Text, TextNativeProps } from './components/atoms/Text';
-export { Error, Loading, Success } from './components/atoms/Button';
+export { Error, Loading, Success, Button, ButtonNativeProps } from './components/atoms/Button';
 export { GroupButtonOption } from './components/atoms/GroupButton';
 export { InputPassword, InputPasswordNativeProps, } from './components/molecules/InputPassword';
 export { BottomNavigator, BottomNavigatorProps, } from './components/atoms/BottomNavigator';

package/dist/index.js

@@ -17,6 +17,8 @@ var _exportNames = {
   Error: true,
   Loading: true,
   Success: true,
+  Button: true,
+  ButtonNativeProps: true,
   GroupButtonOption: true,
   InputPassword: true,
   InputPasswordNativeProps: true,
@@ -114,6 +116,18 @@ Object.defineProperty(exports, "Success", {
     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 () {

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 } 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","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"}

package/dist/utils/date.d.ts

@@ -0,0 +1 @@
+export declare const getLocale: () => Locale;

package/dist/utils/date.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLocale = void 0;
+
+var _reactNative = require("react-native");
+
+var dateFnsLocales = _interopRequireWildcard(require("date-fns/locale"));
+
+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 getLocale = () => {
+  let locale;
+
+  if (_reactNative.Platform.OS === 'ios') {
+    locale = _reactNative.NativeModules.SettingsManager.settings.AppleLocale || _reactNative.NativeModules.SettingsManager.settings.AppleLanguages[0];
+  } else {
+    locale = _reactNative.NativeModules.I18nManager.localeIdentifier;
+  }
+
+  const code = locale.replace('_', '');
+  return dateFnsLocales[code];
+};
+
+exports.getLocale = getLocale;
+//# sourceMappingURL=date.js.map

package/dist/utils/date.js.map

@@ -0,0 +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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-native-kit",
   "description": "TecSinapse React Native components",
-  "version": "1.10.2",
+  "version": "1.11.0",
   "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.10.2"
+    "@tecsinapse/react-core": "^1.11.0"
   },
   "repository": {
     "type": "git",
@@ -29,5 +29,5 @@
     "react-native": ">=0.64.0",
     "react-native-vector-icons": ">=8.1.0"
   },
-  "gitHead": "fb3e15d84dc2e9d529dc3a00343751302c325c39"
+  "gitHead": "27a01035cee1b709734bd4b6b6f518c4320814f6"
 }

package/src/components/atoms/Button/Button.tsx

@@ -0,0 +1,17 @@
+import { Button as ButtonCore, ButtonProps } from "@tecsinapse/react-core";
+import React, { FC, useCallback } from "react";
+import { Keyboard } from "react-native";
+
+export type ButtonNativeProps = ButtonProps & {
+    autoDismissKeyboard?: boolean
+}
+
+export const Button: FC<ButtonNativeProps> = ({ autoDismissKeyboard = true, onPress, ...others }) => {
+
+    const handleOnPress = useCallback((event) => {
+        autoDismissKeyboard && Keyboard.dismiss()
+        onPress?.(event)
+    }, [onPress])
+
+    return <ButtonCore {...others} onPress={handleOnPress}/>
+}

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

@@ -1 +1,2 @@
-export { Error, Loading, Success } from './States';
+export { Button, ButtonNativeProps } from './Button';
+export { Error, Loading, Success } from './States';

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {
-  FloatingButton,
-  ListFooter,
+  FetchIndicator,
+  ModalFooter,
   ListItem,
   SearchBarContainer,
   SelectIcon,
@@ -11,6 +11,7 @@ import { FlatList, Modal as RNModal, ModalProps, View } from 'react-native';
 import { SelectNativeProps } from './Select';
 import { Text } from '../Text';
 import {
+  Button,
   Checkbox,
   RadioButton,
   useDebouncedState,
@@ -18,6 +19,10 @@ import {
 import { Input } from '../Input';
 import { Header } from '../Header';
 
+interface LoadingProps {
+  loading?: boolean;
+}
+
 const Component = <Data, Type extends 'single' | 'multi'>({
   options,
   keyExtractor,
@@ -34,8 +39,9 @@ const Component = <Data, Type extends 'single' | 'multi'>({
   selectModalTitle,
   selectModalTitleComponent,
   confirmButtonText,
+  loading,
   ...modalProps
-}: SelectNativeProps<Data, Type> & ModalProps): JSX.Element => {
+}: SelectNativeProps<Data, Type> & ModalProps & LoadingProps): JSX.Element => {
   const [selectedValues, setSelectedValues] = React.useState<Data[]>([]);
   const [searchArg, setSearchArg] = useDebouncedState<string>('', onSearch);
 
@@ -47,16 +53,20 @@ const Component = <Data, Type extends 'single' | 'multi'>({
     );
   }, [value, focused, setSelectedValues]);
 
-  const data = options.map((option, index) => ({
-    ...option,
-    _checked:
-      type === 'multi'
-        ? !!selectedValues.find(
-            value => keyExtractor(option, index) == keyExtractor(value, index)
-          )
-        : keyExtractor((selectedValues[0] || {}) as Data, index) ==
-          keyExtractor(option, index),
-  }));
+  const getData = (options: Data[]) => {
+    return options?.map((option, index) => ({
+      ...option,
+      _checked:
+        type === 'multi'
+          ? !!selectedValues.find(
+              value => keyExtractor(option, index) == keyExtractor(value, index)
+            )
+          : keyExtractor((selectedValues[0] || {}) as Data, index) ==
+            keyExtractor(option, index),
+    }));
+  };
+
+  const data = typeof options !== 'function' ? getData(options) : [];
 
   const handlePressItem = (option: Data) => () => {
     setSelectedValues(selectedValues => {
@@ -126,10 +136,13 @@ const Component = <Data, Type extends 'single' | 'multi'>({
             />
           </SearchBarContainer>
         )}
+        {loading && (
+          <FetchIndicator animating={true} color={'grey'} size={'large'} />
+        )}
         <FlatList
           data={data}
           keyExtractor={keyExtractor}
-          ListFooterComponent={<ListFooter />}
+          fadingEdgeLength={200}
           renderItem={({ item }) => (
             <ListItem onPress={handlePressItem(item)}>
               <View pointerEvents={'none'}>
@@ -158,15 +171,18 @@ const Component = <Data, Type extends 'single' | 'multi'>({
             </ListItem>
           )}
         />
-        <FloatingButton
-          variant={'filled'}
-          color={'primary'}
-          onPress={handleConfirm}
-        >
-          <Text fontColor={'light'} fontWeight="bold">
-            {confirmButtonText}
-          </Text>
-        </FloatingButton>
+        <ModalFooter>
+          <Button
+            variant={'filled'}
+            color={'primary'}
+            onPress={handleConfirm}
+            disabled={loading}
+          >
+            <Text fontColor={'light'} fontWeight="bold">
+              {confirmButtonText}
+            </Text>
+          </Button>
+        </ModalFooter>
       </StyledModal>
     </RNModal>
   );

package/src/components/atoms/Select/Select.tsx

@@ -7,10 +7,11 @@ import {
 import { Text } from '../Text';
 import { Modal } from './Modal';
 import { SelectIcon, StyledSelectionText } from './styled';
+import { useEffect, useState } from 'react';
 
 export interface SelectNativeProps<Data, Type extends 'single' | 'multi'>
   extends Omit<InputContainerProps, 'value' | 'onChange' | 'onChangeText'> {
-  options: Data[];
+  options: ((searchInput?: string) => Promise<Data[]>) | Data[];
   onSelect: (
     option: Type extends 'single' ? Data | undefined : Data[]
   ) => never | void;
@@ -25,7 +26,10 @@ export interface SelectNativeProps<Data, Type extends 'single' | 'multi'>
   placeholder?: string;
   onFocus?: () => void | never;
   onBlur?: () => void | never;
-  onSearch?: (searchArg: string) => void | never;
+  onSearch?:
+    | ((searchArg: string) => void)
+    | ((searchInput?: string) => Promise<Data[]>)
+    | never;
   searchBarPlaceholder?: string;
   confirmButtonText?: string;
   selectModalTitle?: string;
@@ -65,6 +69,88 @@ function Select<Data, Type extends 'single' | 'multi'>({
   );
 
   const [modalVisible, setModalVisible] = React.useState(false);
+  const [selectOptions, setSelectOptions] = useState<Data[]>([]);
+
+  // TODO: Add Skeleton to modal height when loading is true
+  const [loading, setLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (typeof options !== 'function') {
+      setSelectOptions(options);
+    }
+  }, [options]);
+
+  useEffect(() => {
+    if (typeof options === 'function') {
+      if (value) {
+        if (type === 'single') setSelectOptions([value as Data]);
+        else setSelectOptions([...(value as Data[])]);
+      } else setSelectOptions([]);
+    }
+  }, [value]);
+
+  const handleOnFocus = async () => {
+    if (typeof options === 'function') {
+      setLoading(true);
+      try {
+        const result = await options();
+        if (result) {
+          if (
+            value &&
+            !result.find(v => keyExtractor(value as Data) === keyExtractor(v))
+          ) {
+            setSelectOptions([value as Data, ...result]);
+          } else setSelectOptions(result);
+        }
+      } catch (e) {
+        // TODO: Catch error
+      } finally {
+        setLoading(false);
+      }
+    }
+  };
+
+  const handleOnSearch = React.useCallback(
+    async (searchInput: string | undefined) => {
+      if (searchInput !== undefined && onSearch) {
+        setLoading(true);
+        try {
+          const result = await onSearch(searchInput);
+          if (result) {
+            if (type === 'single') {
+              if (
+                value &&
+                !result.find(
+                  v => keyExtractor(value as Data) === keyExtractor(v)
+                )
+              ) {
+                setSelectOptions([value as Data, ...result]);
+              } else setSelectOptions(result);
+            } else {
+              if ((value as Data[]).length > 0) {
+                const selectedValues =
+                  (value as Data[]).filter(
+                    v =>
+                      !result.find(
+                        current =>
+                          keyExtractor(v as Data) === keyExtractor(current)
+                      )
+                  ) || [];
+                setSelectOptions([...selectedValues, ...result]);
+              } else {
+                setSelectOptions(result);
+              }
+            }
+          }
+        } catch (e) {
+          // TODO: Catch error
+        } finally {
+          setLoading(false);
+        }
+      }
+    },
+    [options, value, keyExtractor]
+  );
 
   const handlePressInput = () => {
     setModalVisible(true);
@@ -80,8 +166,8 @@ function Select<Data, Type extends 'single' | 'multi'>({
     if (Array.isArray(value)) {
       if (value.length === 0) return placeholder;
       else {
-        return options
-          .reduce(
+        return selectOptions
+          ?.reduce(
             (acc, option, index) =>
               value.find(
                 key => keyExtractor(option, index) == keyExtractor(key, index)
@@ -94,7 +180,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
       }
     } else {
       if (value === undefined) return placeholder;
-      const selectedOption = options.find(
+      const selectedOption = selectOptions?.find(
         (option, index) =>
           keyExtractor(option, index) == keyExtractor(value as Data, index)
       );
@@ -127,7 +213,7 @@ function Select<Data, Type extends 'single' | 'multi'>({
       </HintInputContainer>
       <Modal
         visible={modalVisible}
-        options={options}
+        options={selectOptions || []}
         focused={modalVisible}
         keyExtractor={keyExtractor}
         labelExtractor={labelExtractor}
@@ -140,10 +226,12 @@ function Select<Data, Type extends 'single' | 'multi'>({
         onRequestClose={handleCloseModal}
         animated
         animationType={'slide'}
-        onSearch={onSearch}
+        onSearch={handleOnSearch}
         selectModalTitle={selectModalTitle}
         selectModalTitleComponent={selectModalTitleComponent}
         confirmButtonText={confirmButtonText}
+        onFocus={typeof options === 'function' ? handleOnFocus : undefined}
+        loading={loading}
       />
     </>
   );

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

@@ -9,7 +9,7 @@ import {
   PressableSurfaceProps,
   StyleProps,
 } from '@tecsinapse/react-core';
-import { ModalProps, View, ViewProps } from 'react-native';
+import { ActivityIndicator, ModalProps, View, ViewProps } from 'react-native';
 import { Input, InputNativeProps } from '../Input';
 import { Text } from '../Text';
 
@@ -56,6 +56,7 @@ export const CloseButton = styled(Button)<ButtonProps & Partial<StyleProps>>`
 
 export const SearchBarContainer = styled(View)<ViewProps & Partial<StyleProps>>`
   padding: ${({ theme }) => theme.spacing.deca};
+  position: relative;
 `;
 
 export const SearchBar = styled(Input)<InputNativeProps & Partial<StyleProps>>`
@@ -71,20 +72,19 @@ export const ListItem = styled(PressableSurface)<
   padding-horizontal: ${({ theme }) => theme.spacing.deca};
 `;
 
-export const ListFooter = styled.View<Partial<StyleProps>>`
+export const ModalFooter = styled(View)<Partial<StyleProps>>`
   width: 100%;
-  min-height: 44px;
-  margin-vertical: ${({ theme }) => theme.spacing.deca};
-`;
-
-export const FloatingButton = styled(Button)<ButtonProps & Partial<StyleProps>>`
-  position: absolute;
-  bottom: ${({ theme }) => theme.spacing.deca};
-  left: ${({ theme }) => theme.spacing.deca};
-  right: ${({ theme }) => theme.spacing.deca};
+  height: auto;
+  bottom: 0;
+  background-color: ${({ theme }) => theme.miscellaneous.bodyColor};
+  padding: ${({ theme }) => theme.spacing.deca};
 `;
 
 export const SelectIcon = styled(Icon)<Partial<StyleProps>>`
   padding: ${({ theme }) => theme.spacing.centi};
   color: ${({ theme }) => theme.color.secondary.medium};
 `;
+
+export const FetchIndicator = styled(ActivityIndicator)`
+  align-self: center;
+`;

package/src/components/molecules/Calendar/Calendar.tsx

@@ -5,9 +5,17 @@ import {
 } from '@tecsinapse/react-core';
 import React from 'react';
 import { Text } from '../../atoms/Text';
+import { getLocale } from '../../../utils/date';
 
-export const Calendar = <T extends SelectionType>(
-  props: CalendarProps<T>
-): JSX.Element => {
-  return <CalendarCore {...props} TextComponent={Text} />;
+export const Calendar = <T extends SelectionType>({
+  locale,
+  ...rest
+}): JSX.Element => {
+  return (
+    <CalendarCore
+      {...rest}
+      TextComponent={Text}
+      locale={locale ?? getLocale()}
+    />
+  );
 };

package/src/components/molecules/DatePicker/DatePicker.tsx

@@ -6,16 +6,19 @@ import {
 import React from 'react';
 import { Text } from '../../atoms/Text';
 import { Calendar } from '../Calendar';
+import { getLocale } from '../../../utils/date';
 
-export const DatePicker = <T extends SelectionType>(
-  props: DatePickerProps<T>
-): JSX.Element => {
+export const DatePicker = <T extends SelectionType>({
+  locale,
+  ...rest
+}): JSX.Element => {
   return (
     <DatePickerCore
-      {...props}
+      {...rest}
       TextComponent={Text}
       CalendarComponent={Calendar}
       animationType="slide"
+      locale={locale ?? getLocale()}
     />
   );
 };

package/src/components/molecules/DateTimePicker/DateTimePicker.tsx

@@ -5,14 +5,19 @@ import {
 import React, { FC } from 'react';
 import { Text } from '../../atoms/Text';
 import { DateTimeSelector } from '../DateTimeSelector';
+import { getLocale } from '../../../utils/date';
 
-export const DateTimePicker: FC<DateTimePickerProps> = props => {
+export const DateTimePicker: FC<DateTimePickerProps> = ({
+  locale,
+  ...rest
+}) => {
   return (
     <DateTimePickerCore
-      {...props}
+      {...rest}
       TextComponent={Text}
       DateTimeSelectorComponent={DateTimeSelector}
       animationType="slide"
+      locale={locale ?? getLocale()}
     />
   );
 };

package/src/components/molecules/DateTimeSelector/DateTimeSelector.tsx

@@ -4,7 +4,14 @@ import {
 } from '@tecsinapse/react-core';
 import React, { FC } from 'react';
 import { Text } from '../../atoms/Text';
+import { getLocale } from '../../../utils/date';
 
-export const DateTimeSelector: FC<DateTimeSelectorProps> = props => {
-  return <DateTimeSelectorCore {...props} TextComponent={Text} />;
+export const DateTimeSelector: FC<DateTimeSelectorProps> = ({locale, ...rest}) => {
+  return (
+    <DateTimeSelectorCore
+      {...rest}
+      TextComponent={Text}
+      locale={locale ?? getLocale()}
+    />
+  );
 };

package/src/index.ts

@@ -4,7 +4,7 @@ export { Select, SelectNativeProps } from './components/atoms/Select';
 export { Input, InputNativeProps } from './components/atoms/Input';
 export { TextArea, TextAreaProps } from './components/atoms/TextArea';
 export { Text, TextNativeProps } from './components/atoms/Text';
-export { Error, Loading, Success } from './components/atoms/Button';
+export { Error, Loading, Success, Button, ButtonNativeProps } from './components/atoms/Button';
 export { GroupButtonOption } from './components/atoms/GroupButton';
 export {
   InputPassword,

package/src/utils/date.ts

@@ -0,0 +1,17 @@
+import { NativeModules, Platform } from 'react-native';
+import * as dateFnsLocales from 'date-fns/locale';
+
+export const getLocale = (): Locale => {
+  let locale: string;
+  if (Platform.OS === 'ios') {
+    locale =
+      NativeModules.SettingsManager.settings.AppleLocale ||
+      NativeModules.SettingsManager.settings.AppleLanguages[0];
+  } else {
+    locale = NativeModules.I18nManager.localeIdentifier;
+  }
+
+  const code = locale.replace('_', '');
+
+  return dateFnsLocales[code];
+};