react-native-better-html 1.0.16 → 1.0.18

package/dist/index.js

@@ -36,41 +36,44 @@ __export(index_exports, {
   Icon: () => Icon_default,
   Image: () => Image_default,
   InputField: () => InputField_default,
+  ListItem: () => ListItem_default,
   Loader: () => Loader_default,
   ScreenHolder: () => ScreenHolder_default,
   StatusBar: () => StatusBar_default,
+  Switch: () => Switch_default,
   Text: () => Text_default,
   View: () => View_default,
   asyncStoragePlugin: () => asyncStoragePlugin,
-  colorThemeControls: () => import_react_better_core12.colorThemeControls,
-  countries: () => import_react_better_core12.countries,
-  darkenColor: () => import_react_better_core12.darkenColor,
+  colorThemeControls: () => import_react_better_core14.colorThemeControls,
+  countries: () => import_react_better_core14.countries,
+  darkenColor: () => import_react_better_core14.darkenColor,
   defaultAsyncStoragePluginOptions: () => defaultAsyncStoragePluginOptions,
-  desaturateColor: () => import_react_better_core12.desaturateColor,
-  eventPreventDefault: () => import_react_better_core12.eventPreventDefault,
-  eventPreventStop: () => import_react_better_core12.eventPreventStop,
-  eventStopPropagation: () => import_react_better_core12.eventStopPropagation,
-  formatPhoneNumber: () => import_react_better_core12.formatPhoneNumber,
+  desaturateColor: () => import_react_better_core14.desaturateColor,
+  eventPreventDefault: () => import_react_better_core14.eventPreventDefault,
+  eventPreventStop: () => import_react_better_core14.eventPreventStop,
+  eventStopPropagation: () => import_react_better_core14.eventStopPropagation,
+  formatPhoneNumber: () => import_react_better_core14.formatPhoneNumber,
   generateAsyncStorage: () => generateAsyncStorage,
-  generateRandomString: () => import_react_better_core12.generateRandomString,
+  generateRandomString: () => import_react_better_core14.generateRandomString,
   getFormErrorObject: () => getFormErrorObject,
-  getPluralWord: () => import_react_better_core12.getPluralWord,
-  lightenColor: () => import_react_better_core12.lightenColor,
-  loaderControls: () => import_react_better_core12.loaderControls,
+  getPluralWord: () => import_react_better_core14.getPluralWord,
+  lightenColor: () => import_react_better_core14.lightenColor,
+  loaderControls: () => import_react_better_core14.loaderControls,
   pressStrength: () => pressStrength,
-  saturateColor: () => import_react_better_core12.saturateColor,
+  saturateColor: () => import_react_better_core14.saturateColor,
   useBetterComponentsContext: () => useBetterComponentsContext,
-  useBooleanState: () => import_react_better_core12.useBooleanState,
-  useDebounceState: () => import_react_better_core12.useDebounceState,
+  useBooleanState: () => import_react_better_core14.useBooleanState,
+  useDebounceState: () => import_react_better_core14.useDebounceState,
   useDevice: () => useDevice,
+  useEventEmitter: () => useEventEmitter,
   useForm: () => useForm,
   useKeyboard: () => useKeyboard,
-  useLoader: () => import_react_better_core12.useLoader,
-  useLoaderControls: () => import_react_better_core12.useLoaderControls,
-  useTheme: () => import_react_better_core12.useTheme
+  useLoader: () => import_react_better_core14.useLoader,
+  useLoaderControls: () => import_react_better_core14.useLoaderControls,
+  useTheme: () => import_react_better_core14.useTheme
 });
 module.exports = __toCommonJS(index_exports);
-var import_react_better_core12 = require("react-better-core");
+var import_react_better_core14 = require("react-better-core");
 
 // src/components/BetterComponentsProvider.tsx
 var import_react = require("react");
@@ -84,6 +87,26 @@ var theme = {};
 
 // src/constants/icons.ts
 var icons = {
+  eye: {
+    width: 576,
+    height: 512,
+    paths: [
+      {
+        d: "M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z",
+        type: "fill"
+      }
+    ]
+  },
+  eyeDashed: {
+    width: 640,
+    height: 512,
+    paths: [
+      {
+        d: "M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z",
+        type: "fill"
+      }
+    ]
+  },
   magnifyingGlass: {
     width: 512,
     height: 512,
@@ -563,6 +586,22 @@ function useForm(options) {
     },
     [values, setFieldValue, errors, requiredFields, additional, onSubmitFunction]
   );
+  const getSwitchProps = (0, import_react2.useCallback)(
+    (field, insideListItem) => {
+      return insideListItem ? {
+        switchIsEnabled: values[field],
+        switchOnChange: (value) => {
+          setFieldValue(field, value);
+        }
+      } : {
+        isEnabled: values[field],
+        onChange: (value) => {
+          setFieldValue(field, value);
+        }
+      };
+    },
+    [values, setFieldValue]
+  );
   const reset = (0, import_react2.useCallback)(() => {
     setValues(defaultValues);
     setErrors({});
@@ -586,6 +625,7 @@ function useForm(options) {
     setFieldValue,
     setFieldsValue,
     getInputFieldProps,
+    getSwitchProps,
     focusField,
     inputFieldRefs: inputFieldRefs.current,
     validate: validateForm,
@@ -597,6 +637,17 @@ function useForm(options) {
     canSubmit
   };
 }
+function useEventEmitter() {
+  return {
+    emit: (eventName, params) => {
+      import_react_native.DeviceEventEmitter.emit(eventName, params);
+    },
+    listen: (eventName, callback = () => {
+    }) => {
+      return import_react_native.DeviceEventEmitter.addListener(eventName, callback);
+    }
+  };
+}
 
 // src/utils/functions.ts
 var getFormErrorObject = (formValues) => {
@@ -1281,7 +1332,13 @@ var ImageComponent = function Image({ name, source, withDevFittingMode, ...props
   }, [assets2, name]);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.Image, { source: name ? assets2[name.toString()] : source, style, ...props });
 };
-ImageComponent.profileImage = function ProfileImage({ size = 50, letters, backgroundColor, ...props }) {
+ImageComponent.profileImage = function ProfileImage({
+  size = 50,
+  letters,
+  color,
+  backgroundColor,
+  ...props
+}) {
   const theme2 = (0, import_react_better_core8.useTheme)();
   return letters ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     View_default,
@@ -1295,7 +1352,7 @@ ImageComponent.profileImage = function ProfileImage({ size = 50, letters, backgr
       alignItems: "center",
       justifyContent: "center",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text_default, { fontSize: size / 2.5, fontWeight: 700, marginTop: 1, children: letters.toUpperCase().slice(0, 2) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text_default, { fontSize: size / 2.5, fontWeight: 700, color: color ?? theme2.colors.textPrimary, marginTop: 1, children: letters.toUpperCase().slice(0, 2) })
     }
   ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     ImageComponent,
@@ -1332,26 +1389,38 @@ function Icon({ name, nameIOS, size = 16, color, ...props }) {
         `The icon \`${name}\` you are trying to use does not exist. Make sure to add it to the \`icons\` object in \`<BetterComponentsProvider>\` config value prop.`
       );
   }, [icons2, name]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(View_default, { width: size, height: size, pressType: "opacity", pressStrength: pressStrength().p2, ...props, children: import_react_native8.Platform.OS === "ios" && nameIOS ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_expo_symbols.SymbolView, { name: nameIOS, tintColor: svgColor, size }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    import_react_native_svg.Svg,
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    View_default,
     {
-      width: size,
-      height: size,
-      viewBox: `0 0 ${icons2[name.toString()]?.width ?? 0} ${icons2[name.toString()]?.height ?? 0}`,
-      fill: "none",
-      children: icons2[name.toString()]?.paths.map(({ type, ...path }) => /* @__PURE__ */ (0, import_react11.createElement)(
-        import_react_native_svg.Path,
+      width: size + (parseFloat(props.padding?.toString() ?? "0") ?? 0) + (parseFloat(props.paddingHorizontal?.toString() ?? "0") ?? 0),
+      height: size + (parseFloat(props.padding?.toString() ?? "0") ?? 0) + (parseFloat(props.paddingVertical?.toString() ?? "0") ?? 0),
+      alignItems: "center",
+      justifyContent: "center",
+      pressType: "opacity",
+      pressStrength: pressStrength().p2,
+      ...props,
+      children: import_react_native8.Platform.OS === "ios" && nameIOS ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_expo_symbols.SymbolView, { name: nameIOS, tintColor: svgColor, size }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        import_react_native_svg.Svg,
         {
-          ...path,
-          fill: type === "fill" ? svgColor : void 0,
-          stroke: type === "stroke" ? svgColor : void 0,
-          key: path.d
+          width: size,
+          height: size,
+          viewBox: `0 0 ${icons2[name.toString()]?.width ?? 0} ${icons2[name.toString()]?.height ?? 0}`,
+          fill: "none",
+          children: icons2[name.toString()]?.paths.map(({ type, ...path }) => /* @__PURE__ */ (0, import_react11.createElement)(
+            import_react_native_svg.Path,
+            {
+              ...path,
+              fill: type === "fill" ? svgColor : void 0,
+              stroke: type === "stroke" ? svgColor : void 0,
+              key: path.d
+            }
+          ))
         }
-      ))
+      )
     }
-  ) });
+  );
 }
-var Icon_default = Icon;
+var Icon_default = (0, import_react10.memo)(Icon);
 
 // src/components/InputField.tsx
 var import_react12 = require("react");
@@ -1378,7 +1447,7 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
     autoCapitalize,
     autoComplete,
     autoCorrect,
-    keyboardAppearance = "default",
+    keyboardAppearance,
     keyboardType,
     secureTextEntry,
     returnKeyLabel,
@@ -1395,8 +1464,10 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
     numberOfLines = 2,
     leftIcon,
     leftIconIOS,
+    onPressLeftIcon,
     rightIcon,
     rightIconIOS,
+    onPressRightIcon,
     paddingHorizontal,
     paddingVertical,
     onFocus,
@@ -1416,6 +1487,7 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
     const [isFocused, setIsFocused] = (0, import_react_better_core10.useBooleanState)();
     const isIOSDateTime = import_react_native9.Platform.OS === "ios" && (type === "date" || type === "time");
     const iconSize = 16;
+    const iconPadding = onPressRightIcon ? theme2.styles.gap : 0;
     const iconSideSpace = theme2.styles.space;
     const borderWidth = 1;
     const readyPaddingHorizontal = paddingHorizontal ?? theme2.styles.space;
@@ -1579,6 +1651,7 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
                   mode: type,
                   display: iOSDateTimeFullSize ? type === "date" ? "inline" : "spinner" : "default",
                   accentColor: theme2.colors.primary,
+                  themeVariant: colorTheme === "dark" ? "dark" : "light",
                   style: rnDateTimePickerStyle,
                   onChange: onChangeRNDateTimePicker
                 }
@@ -1614,11 +1687,13 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
                         Icon_default,
                         {
                           position: "absolute",
-                          left: iconSideSpace,
+                          left: iconSideSpace - iconPadding,
                           name: leftIcon,
                           nameIOS: leftIconIOS,
                           size: iconSize,
-                          pointerEvents: "box-none"
+                          pointerEvents: !onPressLeftIcon ? "box-none" : void 0,
+                          padding: iconPadding,
+                          onPress: onPressLeftIcon
                         }
                       ),
                       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -1639,7 +1714,7 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
                           readOnly: !editable || disabled || type === "date" || type === "time",
                           textAlign,
                           editable: !disabled,
-                          keyboardAppearance,
+                          keyboardAppearance: keyboardAppearance ?? colorTheme === "dark" ? "dark" : "light",
                           keyboardType,
                           cursorColor: theme2.colors.primary,
                           selectionColor: theme2.colors.primary,
@@ -1658,11 +1733,13 @@ var InputFieldComponent = (0, import_react12.forwardRef)(
                         Icon_default,
                         {
                           position: "absolute",
-                          right: iconSideSpace,
+                          right: iconSideSpace - iconPadding,
                           name: rightIcon,
                           nameIOS: rightIconIOS,
                           size: iconSize,
-                          pointerEvents: "box-none"
+                          pointerEvents: !onPressRightIcon ? "box-none" : void 0,
+                          padding: iconPadding,
+                          onPress: onPressRightIcon
                         }
                       )
                     ]
@@ -1740,16 +1817,31 @@ InputFieldComponent.email = (0, import_react12.forwardRef)(function Email(props,
   );
 });
 InputFieldComponent.password = (0, import_react12.forwardRef)(function Password(props, ref) {
+  const inputFieldRef = (0, import_react12.useRef)(null);
+  const [showPassword, setShowPassword] = (0, import_react_better_core10.useBooleanState)();
+  const onPressEye = (0, import_react12.useCallback)(() => {
+    setShowPassword.toggle();
+    inputFieldRef.current?.focus();
+  }, []);
+  (0, import_react12.useImperativeHandle)(
+    ref,
+    () => {
+      return inputFieldRef.current;
+    },
+    []
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     InputFieldComponent,
     {
-      secureTextEntry: true,
+      secureTextEntry: !showPassword,
       placeholder: "******",
       autoCapitalize: "none",
       autoComplete: "password",
       autoCorrect: false,
+      rightIcon: showPassword ? "eyeDashed" : "eye",
+      onPressRightIcon: onPressEye,
       ...props,
-      ref
+      ref: inputFieldRef
     }
   );
 });
@@ -1780,23 +1872,148 @@ InputField.search = InputFieldComponent.search;
 InputField.code = InputFieldComponent.code;
 var InputField_default = InputField;
 
-// src/components/StatusBar.tsx
+// src/components/Switch.tsx
 var import_react13 = require("react");
-var import_react_better_core11 = require("react-better-core");
 var import_react_native10 = require("react-native");
+var import_react_better_core11 = require("react-better-core");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-function StatusBar({ darkStatusBar, hidden, barStyle, androidBarStyle, iOSBarStyle }) {
+function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }) {
   const theme2 = (0, import_react_better_core11.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    import_react_native10.StatusBar,
+  const [enabled, setEnabled] = (0, import_react_better_core11.useBooleanState)(isEnabled ?? defaultIsEnabled);
+  const onPressElement = (0, import_react13.useCallback)(() => {
+    onChange?.(!enabled);
+    setEnabled.toggle();
+  }, [onChange, enabled]);
+  const trackColor = (0, import_react13.useMemo)(
+    () => ({
+      false: theme2.colors.border,
+      true: theme2.colors.primary
+    }),
+    [theme2.colors]
+  );
+  (0, import_react13.useEffect)(() => {
+    if (isEnabled === void 0) return;
+    setEnabled.setState(isEnabled);
+  }, [isEnabled]);
+  const ballSize = 26;
+  const ballGap = 3;
+  const holderWidth = ballSize * 2.1;
+  return import_react_native10.Platform.OS === "ios" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_react_native10.Switch,
+    {
+      trackColor,
+      ios_backgroundColor: theme2.colors.border,
+      onValueChange: onPressElement,
+      value: enabled,
+      disabled
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    View_default,
+    {
+      width: holderWidth,
+      borderRadius: 999,
+      pressStrength: pressStrength().p05,
+      disabled,
+      onPress: !disabled ? onPressElement : void 0,
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        Animate_default.View,
+        {
+          width: "100%",
+          height: ballGap + ballSize + ballGap,
+          borderRadius: 999,
+          initialOpacity: 1,
+          animateOpacity: disabled ? 0.6 : 1,
+          initialBackgroundColor: theme2.colors.border,
+          animateBackgroundColor: enabled ? theme2.colors.primary : theme2.colors.border,
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            Animate_default.View,
+            {
+              width: ballSize,
+              height: ballSize,
+              top: ballGap,
+              borderRadius: 999,
+              backgroundColor: theme2.colors.backgroundContent,
+              initialX: ballGap,
+              animateX: enabled ? holderWidth - ballGap - ballSize : ballGap
+            }
+          )
+        }
+      )
+    }
+  );
+}
+var Switch_default = (0, import_react13.memo)(Switch);
+
+// src/components/StatusBar.tsx
+var import_react14 = require("react");
+var import_react_better_core12 = require("react-better-core");
+var import_react_native11 = require("react-native");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function StatusBar({ darkStatusBar, hidden, barStyle, androidBarStyle, iOSBarStyle }) {
+  const theme2 = (0, import_react_better_core12.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_react_native11.StatusBar,
     {
       backgroundColor: darkStatusBar ? theme2.colors.backgroundSecondary : void 0,
-      barStyle: barStyle ?? (import_react_native10.Platform.OS === "android" ? androidBarStyle : iOSBarStyle),
+      barStyle: barStyle ?? (import_react_native11.Platform.OS === "android" ? androidBarStyle : iOSBarStyle),
       hidden
     }
   );
 }
-var StatusBar_default = (0, import_react13.memo)(StatusBar);
+var StatusBar_default = (0, import_react14.memo)(StatusBar);
+
+// src/components/ListItem.tsx
+var import_react15 = require("react");
+var import_react_better_core13 = require("react-better-core");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function ListItem({
+  icon,
+  iconIOS,
+  title,
+  description,
+  rightElement,
+  backgroundColor,
+  insideScreenHolder,
+  onPress,
+  rightArrowValue,
+  switchIsEnabled,
+  switchOnChange
+}) {
+  const theme2 = (0, import_react_better_core13.useTheme)();
+  const device = useDevice();
+  const sideSpace = theme2.styles.space;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    View_default,
+    {
+      width: insideScreenHolder ? device.windowDimensions.width : "100%",
+      backgroundColor: backgroundColor ?? theme2.colors.backgroundBase,
+      marginHorizontal: insideScreenHolder ? -sideSpace : void 0,
+      paddingVertical: theme2.styles.gap,
+      paddingHorizontal: sideSpace,
+      pressStrength: pressStrength().p05,
+      onPress,
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.space, children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon_default, { name: icon, nameIOS: iconIOS, size: 22, color: theme2.colors.primary }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(View_default, { flex: 1, flexDirection: "row", alignItems: "center", gap: theme2.styles.gap, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(View_default, { flex: 1, children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text_default, { fontSize: 20, fontWeight: 700, children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text_default.body, { children: description })
+        ] }) }),
+        rightElement ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: rightElement === "arrow" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.gap / 2, children: [
+          rightArrowValue !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text_default, { fontSize: 14, fontWeight: 700, children: rightArrowValue }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            Icon_default,
+            {
+              name: "chevronRight",
+              nameIOS: "chevron.right",
+              color: rightArrowValue !== void 0 ? theme2.colors.textPrimary : theme2.colors.textSecondary
+            }
+          )
+        ] }) : rightElement === "switch" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Switch_default, { isEnabled: switchIsEnabled, onChange: switchOnChange }) : void 0 }) : void 0
+      ] })
+    }
+  );
+}
+var ListItem_default = (0, import_react15.memo)(ListItem);
 
 // src/plugins/asyncStorage.ts
 var defaultAsyncStoragePluginOptions = {};
@@ -1818,9 +2035,11 @@ var asyncStoragePlugin = (options) => ({
   Icon,
   Image,
   InputField,
+  ListItem,
   Loader,
   ScreenHolder,
   StatusBar,
+  Switch,
   Text,
   View,
   asyncStoragePlugin,
@@ -1845,6 +2064,7 @@ var asyncStoragePlugin = (options) => ({
   useBooleanState,
   useDebounceState,
   useDevice,
+  useEventEmitter,
   useForm,
   useKeyboard,
   useLoader,