react-native-better-html 1.0.9 → 1.0.11

package/dist/index.d.mts

@@ -3,7 +3,7 @@ export { AnyOtherString, AssetName, AssetsConfig, Color, ColorName, ColorTheme,
 import * as react from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react_native from 'react-native';
-import { ViewStyle, GestureResponderEvent, ViewProps as ViewProps$1, TextProps as TextProps$1, TextStyle, ColorValue, ImageSourcePropType, ImageProps as ImageProps$1, ImageStyle, TextInput, FocusEvent } from 'react-native';
+import { ViewStyle, GestureResponderEvent, ViewProps as ViewProps$1, TextProps as TextProps$1, TextStyle, ColorValue, ImageSourcePropType, ImageProps as ImageProps$1, ImageStyle, TextInput, FocusEvent, NativeSyntheticEvent, NativeTouchEvent, TextInputSubmitEditingEvent, StatusBar as StatusBar$1 } from 'react-native';
 import { EaseFunction, PropsTransforms } from '@legendapp/motion';
 
 type AppConfig = {};
@@ -316,12 +316,16 @@ declare const Image: typeof ImageComponent & {
 
 type InputFieldProps = {
     placeholder?: string;
-    prefix?: string;
-    suffix?: string;
+    prefix?: string | React.ReactNode;
+    suffix?: string | React.ReactNode;
     defaultValue?: string;
     value?: string | number;
     /** @default true */
     editable?: boolean;
+    label?: string;
+    isError?: boolean;
+    infoMessage?: string;
+    errorMessage?: string;
     /** @default false */
     autoFocus?: boolean;
     autoCapitalize?: React.ComponentProps<typeof TextInput>["autoCapitalize"];
@@ -332,32 +336,52 @@ type InputFieldProps = {
     keyboardType?: React.ComponentProps<typeof TextInput>["keyboardType"];
     /** @default false */
     secureTextEntry?: boolean;
+    returnKeyLabel?: React.ComponentProps<typeof TextInput>["enterKeyHint"];
+    returnKeyType?: React.ComponentProps<typeof TextInput>["returnKeyType"];
+    height?: number;
+    /** @default 16 */
+    fontSize?: number;
+    /** @default 400 */
+    fontWeight?: TextStyle["fontWeight"];
+    /** @default 20 */
+    lineHeight?: number;
+    textAlign?: React.ComponentProps<typeof TextInput>["textAlign"];
     onFocus?: (event: FocusEvent) => void;
     onBlur?: (event: FocusEvent) => void;
     onChange?: (text: string) => void;
-};
-type InputFieldRef = {};
+    onPress?: (event: NativeSyntheticEvent<NativeTouchEvent>) => void;
+    onPressEnter?: (event: TextInputSubmitEditingEvent) => void;
+} & Pick<ComponentPaddingProps, "paddingHorizontal" | "paddingVertical">;
+type InputFieldRef = TextInput;
 type InputFieldComponentType = {
-    (props: ComponentPropWithRef<InputFieldRef, InputFieldProps>): React.ReactElement;
-    email: (props: ComponentPropWithRef<InputFieldRef, InputFieldProps>) => React.ReactElement;
-    password: (props: ComponentPropWithRef<InputFieldRef, InputFieldProps>) => React.ReactElement;
+    (props: ComponentPropWithRef<TextInput, InputFieldProps>): React.ReactElement;
+    email: (props: ComponentPropWithRef<TextInput, InputFieldProps>) => React.ReactElement;
+    password: (props: ComponentPropWithRef<TextInput, InputFieldProps>) => React.ReactElement;
+    code: (props: ComponentPropWithRef<TextInput, InputFieldProps & {
+        /** @default false */
+        isSmall?: boolean;
+    }>) => React.ReactElement;
 };
 declare const InputFieldComponent: InputFieldComponentType;
 declare const InputField: typeof InputFieldComponent & {
     email: typeof InputFieldComponent.email;
     password: typeof InputFieldComponent.password;
+    code: typeof InputFieldComponent.code;
 };
 
 type StatusBarProps = {
     darkStatusBar?: boolean;
     /** @default false */
     hidden?: boolean;
+    barStyle?: React.ComponentProps<typeof StatusBar$1>["barStyle"];
+    androidBarStyle?: React.ComponentProps<typeof StatusBar$1>["barStyle"];
+    iOSBarStyle?: React.ComponentProps<typeof StatusBar$1>["barStyle"];
 };
-declare function StatusBar({ darkStatusBar, hidden }: StatusBarProps): react_jsx_runtime.JSX.Element;
+declare function StatusBar({ darkStatusBar, hidden, barStyle, androidBarStyle, iOSBarStyle }: StatusBarProps): react_jsx_runtime.JSX.Element;
 declare const _default: react.MemoExoticComponent<typeof StatusBar>;
 
 type AsyncStoragePluginOptions = {};
 declare const defaultAsyncStoragePluginOptions: Required<AsyncStoragePluginOptions>;
 declare const asyncStoragePlugin: BetterComponentsPluginConstructor<AsyncStoragePluginOptions>;
 
-export { Animate, type AnimateTextProps, type AnimateViewProps, type AppConfig, type AsyncStoragePluginOptions, type BetterComponentsConfig, type BetterComponentsPlugin, _default$1 as BetterComponentsProvider, type BetterComponentsProviderConfig, Button, type ButtonProps, type ComponentMarginProps, type ComponentPaddingProps, type FooterProps, Image, type ImageProps, InputField, type InputFieldProps, Loader, type LoaderProps, type LoaderSize, type PluginName, ScreenHolder, type ScreenHolderProps, _default as StatusBar, type StatusBarProps, Text, type TextProps, View, type ViewProps, asyncStoragePlugin, defaultAsyncStoragePluginOptions, generateAsyncStorage, pressStrength, useBetterComponentsContext, useDevice, useKeyboard };
+export { Animate, type AnimateTextProps, type AnimateViewProps, type AppConfig, type AsyncStoragePluginOptions, type BetterComponentsConfig, type BetterComponentsPlugin, _default$1 as BetterComponentsProvider, type BetterComponentsProviderConfig, Button, type ButtonProps, type ComponentMarginProps, type ComponentPaddingProps, type FooterProps, Image, type ImageProps, InputField, type InputFieldProps, type InputFieldRef, Loader, type LoaderProps, type LoaderSize, type PluginName, ScreenHolder, type ScreenHolderProps, _default as StatusBar, type StatusBarProps, Text, type TextProps, View, type ViewProps, asyncStoragePlugin, defaultAsyncStoragePluginOptions, generateAsyncStorage, pressStrength, useBetterComponentsContext, useDevice, useKeyboard };

package/dist/index.d.ts

@@ -3,7 +3,7 @@ export { AnyOtherString, AssetName, AssetsConfig, Color, ColorName, ColorTheme,
 import * as react from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react_native from 'react-native';
-import { ViewStyle, GestureResponderEvent, ViewProps as ViewProps$1, TextProps as TextProps$1, TextStyle, ColorValue, ImageSourcePropType, ImageProps as ImageProps$1, ImageStyle, TextInput, FocusEvent } from 'react-native';
+import { ViewStyle, GestureResponderEvent, ViewProps as ViewProps$1, TextProps as TextProps$1, TextStyle, ColorValue, ImageSourcePropType, ImageProps as ImageProps$1, ImageStyle, TextInput, FocusEvent, NativeSyntheticEvent, NativeTouchEvent, TextInputSubmitEditingEvent, StatusBar as StatusBar$1 } from 'react-native';
 import { EaseFunction, PropsTransforms } from '@legendapp/motion';
 
 type AppConfig = {};
@@ -316,12 +316,16 @@ declare const Image: typeof ImageComponent & {
 
 type InputFieldProps = {
     placeholder?: string;
-    prefix?: string;
-    suffix?: string;
+    prefix?: string | React.ReactNode;
+    suffix?: string | React.ReactNode;
     defaultValue?: string;
     value?: string | number;
     /** @default true */
     editable?: boolean;
+    label?: string;
+    isError?: boolean;
+    infoMessage?: string;
+    errorMessage?: string;
     /** @default false */
     autoFocus?: boolean;
     autoCapitalize?: React.ComponentProps<typeof TextInput>["autoCapitalize"];
@@ -332,32 +336,52 @@ type InputFieldProps = {
     keyboardType?: React.ComponentProps<typeof TextInput>["keyboardType"];
     /** @default false */
     secureTextEntry?: boolean;
+    returnKeyLabel?: React.ComponentProps<typeof TextInput>["enterKeyHint"];
+    returnKeyType?: React.ComponentProps<typeof TextInput>["returnKeyType"];
+    height?: number;
+    /** @default 16 */
+    fontSize?: number;
+    /** @default 400 */
+    fontWeight?: TextStyle["fontWeight"];
+    /** @default 20 */
+    lineHeight?: number;
+    textAlign?: React.ComponentProps<typeof TextInput>["textAlign"];
     onFocus?: (event: FocusEvent) => void;
     onBlur?: (event: FocusEvent) => void;
     onChange?: (text: string) => void;
-};
-type InputFieldRef = {};
+    onPress?: (event: NativeSyntheticEvent<NativeTouchEvent>) => void;
+    onPressEnter?: (event: TextInputSubmitEditingEvent) => void;
+} & Pick<ComponentPaddingProps, "paddingHorizontal" | "paddingVertical">;
+type InputFieldRef = TextInput;
 type InputFieldComponentType = {
-    (props: ComponentPropWithRef<InputFieldRef, InputFieldProps>): React.ReactElement;
-    email: (props: ComponentPropWithRef<InputFieldRef, InputFieldProps>) => React.ReactElement;
-    password: (props: ComponentPropWithRef<InputFieldRef, InputFieldProps>) => React.ReactElement;
+    (props: ComponentPropWithRef<TextInput, InputFieldProps>): React.ReactElement;
+    email: (props: ComponentPropWithRef<TextInput, InputFieldProps>) => React.ReactElement;
+    password: (props: ComponentPropWithRef<TextInput, InputFieldProps>) => React.ReactElement;
+    code: (props: ComponentPropWithRef<TextInput, InputFieldProps & {
+        /** @default false */
+        isSmall?: boolean;
+    }>) => React.ReactElement;
 };
 declare const InputFieldComponent: InputFieldComponentType;
 declare const InputField: typeof InputFieldComponent & {
     email: typeof InputFieldComponent.email;
     password: typeof InputFieldComponent.password;
+    code: typeof InputFieldComponent.code;
 };
 
 type StatusBarProps = {
     darkStatusBar?: boolean;
     /** @default false */
     hidden?: boolean;
+    barStyle?: React.ComponentProps<typeof StatusBar$1>["barStyle"];
+    androidBarStyle?: React.ComponentProps<typeof StatusBar$1>["barStyle"];
+    iOSBarStyle?: React.ComponentProps<typeof StatusBar$1>["barStyle"];
 };
-declare function StatusBar({ darkStatusBar, hidden }: StatusBarProps): react_jsx_runtime.JSX.Element;
+declare function StatusBar({ darkStatusBar, hidden, barStyle, androidBarStyle, iOSBarStyle }: StatusBarProps): react_jsx_runtime.JSX.Element;
 declare const _default: react.MemoExoticComponent<typeof StatusBar>;
 
 type AsyncStoragePluginOptions = {};
 declare const defaultAsyncStoragePluginOptions: Required<AsyncStoragePluginOptions>;
 declare const asyncStoragePlugin: BetterComponentsPluginConstructor<AsyncStoragePluginOptions>;
 
-export { Animate, type AnimateTextProps, type AnimateViewProps, type AppConfig, type AsyncStoragePluginOptions, type BetterComponentsConfig, type BetterComponentsPlugin, _default$1 as BetterComponentsProvider, type BetterComponentsProviderConfig, Button, type ButtonProps, type ComponentMarginProps, type ComponentPaddingProps, type FooterProps, Image, type ImageProps, InputField, type InputFieldProps, Loader, type LoaderProps, type LoaderSize, type PluginName, ScreenHolder, type ScreenHolderProps, _default as StatusBar, type StatusBarProps, Text, type TextProps, View, type ViewProps, asyncStoragePlugin, defaultAsyncStoragePluginOptions, generateAsyncStorage, pressStrength, useBetterComponentsContext, useDevice, useKeyboard };
+export { Animate, type AnimateTextProps, type AnimateViewProps, type AppConfig, type AsyncStoragePluginOptions, type BetterComponentsConfig, type BetterComponentsPlugin, _default$1 as BetterComponentsProvider, type BetterComponentsProviderConfig, Button, type ButtonProps, type ComponentMarginProps, type ComponentPaddingProps, type FooterProps, Image, type ImageProps, InputField, type InputFieldProps, type InputFieldRef, Loader, type LoaderProps, type LoaderSize, type PluginName, ScreenHolder, type ScreenHolderProps, _default as StatusBar, type StatusBarProps, Text, type TextProps, View, type ViewProps, asyncStoragePlugin, defaultAsyncStoragePluginOptions, generateAsyncStorage, pressStrength, useBetterComponentsContext, useDevice, useKeyboard };

package/dist/index.js

@@ -1187,6 +1187,10 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
     defaultValue,
     value,
     editable = true,
+    label,
+    isError,
+    infoMessage,
+    errorMessage,
     autoFocus,
     autoCapitalize,
     autoComplete,
@@ -1194,19 +1198,30 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
     keyboardAppearance = "default",
     keyboardType,
     secureTextEntry,
+    returnKeyLabel,
+    returnKeyType,
+    height,
+    fontSize = 16,
+    fontWeight = 400,
+    lineHeight = 20,
+    textAlign,
+    paddingHorizontal,
+    paddingVertical,
     onFocus,
     onBlur,
-    onChange
+    onChange,
+    onPress,
+    onPressEnter
   }, ref) => {
     const theme2 = (0, import_react_better_core9.useTheme)();
     const { colorTheme } = (0, import_react_better_core9.useBetterCoreContext)();
+    const textInputRef = (0, import_react10.useRef)(null);
     const [internalValue, setInternalValue] = (0, import_react10.useState)(value?.toString() || defaultValue || "");
     const [isFocused, setIsFocused] = (0, import_react_better_core9.useBooleanState)();
     const borderWidth = 1;
-    const lineHeight = 20;
-    const paddingHorizontal = theme2.styles.space;
-    const paddingVertical = (theme2.styles.space + theme2.styles.gap) / 2;
-    const height = borderWidth + paddingVertical + lineHeight + paddingVertical + borderWidth;
+    const readyPaddingHorizontal = paddingHorizontal ?? theme2.styles.space;
+    const readyPaddingVertical = paddingVertical ? parseFloat(paddingVertical.toString()) : (theme2.styles.space + theme2.styles.gap) / 2;
+    const readyHeight = height ?? borderWidth + readyPaddingVertical + lineHeight + readyPaddingVertical + borderWidth;
     const onFocusElement = (0, import_react10.useCallback)((event) => {
       setIsFocused.setTrue();
       onFocus?.(event);
@@ -1225,13 +1240,14 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
     const textInputStyle = (0, import_react10.useMemo)(
       () => ({
         flex: 1,
-        fontSize: 16,
+        fontSize,
+        fontWeight,
         lineHeight,
         color: theme2.colors.textPrimary,
-        paddingHorizontal,
-        paddingVertical
+        paddingHorizontal: readyPaddingHorizontal,
+        paddingVertical: readyPaddingVertical
       }),
-      [theme2.colors, lineHeight, paddingHorizontal, paddingVertical]
+      [theme2.colors, fontSize, fontWeight, lineHeight, readyPaddingHorizontal, readyPaddingVertical]
     );
     (0, import_react10.useEffect)(() => {
       if (value === void 0) return;
@@ -1240,80 +1256,113 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
     (0, import_react10.useImperativeHandle)(
       ref,
       () => {
-        return {};
+        return textInputRef.current;
       },
       []
     );
     const prefixSuffixBackgroundColor = colorTheme === "light" ? (0, import_react_better_core9.darkenColor)(theme2.colors.backgroundContent, 0.03) : (0, import_react_better_core9.lightenColor)(theme2.colors.backgroundContent, 0.1);
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(View_default, { isRow: true, position: "relative", alignItems: "center", height, children: [
-      prefix && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        View_default,
-        {
-          isRow: true,
-          height: "100%",
-          backgroundColor: prefixSuffixBackgroundColor,
-          alignItems: "center",
-          borderWidth,
-          borderRightWidth: 0,
-          borderTopLeftRadius: theme2.styles.borderRadius,
-          borderBottomLeftRadius: theme2.styles.borderRadius,
-          borderColor: theme2.colors.border,
-          paddingHorizontal,
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { fontWeight: 700, children: prefix })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        Animate_default.View,
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(View_default, { flex: 1, gap: theme2.styles.gap / 3, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { fontSize: 14, color: theme2.colors.textSecondary, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(View_default, { isRow: true, position: "relative", alignItems: "center", flex: 1, height: readyHeight, children: [
+        prefix && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          View_default,
+          {
+            isRow: true,
+            height: "100%",
+            backgroundColor: prefixSuffixBackgroundColor,
+            alignItems: "center",
+            borderWidth,
+            borderRightWidth: 0,
+            borderTopLeftRadius: theme2.styles.borderRadius,
+            borderBottomLeftRadius: theme2.styles.borderRadius,
+            borderColor: theme2.colors.border,
+            paddingHorizontal: readyPaddingHorizontal,
+            children: typeof prefix === "string" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { fontWeight: 700, children: prefix }) : prefix
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          Animate_default.View,
+          {
+            flex: 1,
+            backgroundColor: theme2.colors.backgroundContent,
+            borderTopLeftRadius: prefix ? 0 : theme2.styles.borderRadius,
+            borderBottomLeftRadius: prefix ? 0 : theme2.styles.borderRadius,
+            borderTopRightRadius: suffix ? 0 : theme2.styles.borderRadius,
+            borderBottomRightRadius: suffix ? 0 : theme2.styles.borderRadius,
+            borderWidth,
+            initialBorderColor: theme2.colors.border,
+            animateBorderColor: isFocused ? theme2.colors.primary : isError ? theme2.colors.error : theme2.colors.border,
+            overflow: "hidden",
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              import_react_native8.TextInput,
+              {
+                style: textInputStyle,
+                value: internalValue,
+                defaultValue,
+                autoCapitalize,
+                autoComplete,
+                autoCorrect,
+                autoFocus,
+                placeholder,
+                placeholderTextColor: theme2.colors.textSecondary + "80",
+                enterKeyHint: returnKeyLabel,
+                returnKeyType,
+                onSubmitEditing: onPressEnter,
+                readOnly: !editable,
+                textAlign,
+                keyboardAppearance,
+                keyboardType,
+                cursorColor: theme2.colors.primary,
+                selectionColor: theme2.colors.primary,
+                secureTextEntry,
+                onFocus: onFocusElement,
+                onBlur: onBlurElement,
+                onChangeText,
+                onPress,
+                ref: textInputRef
+              }
+            )
+          }
+        ),
+        suffix && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          View_default,
+          {
+            isRow: true,
+            height: "100%",
+            backgroundColor: prefixSuffixBackgroundColor,
+            alignItems: "center",
+            borderWidth,
+            borderLeftWidth: 0,
+            borderTopRightRadius: theme2.styles.borderRadius,
+            borderBottomRightRadius: theme2.styles.borderRadius,
+            borderColor: theme2.colors.border,
+            paddingHorizontal: readyPaddingHorizontal,
+            children: typeof suffix === "string" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { fontWeight: 700, children: suffix }) : suffix
+          }
+        )
+      ] }),
+      infoMessage && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        Animate_default.Text,
         {
-          flex: 1,
-          backgroundColor: theme2.colors.backgroundContent,
-          borderTopLeftRadius: prefix ? 0 : theme2.styles.borderRadius,
-          borderBottomLeftRadius: prefix ? 0 : theme2.styles.borderRadius,
-          borderTopRightRadius: suffix ? 0 : theme2.styles.borderRadius,
-          borderBottomRightRadius: suffix ? 0 : theme2.styles.borderRadius,
-          borderWidth,
-          initialBorderColor: theme2.colors.border,
-          animateBorderColor: isFocused ? theme2.colors.primary : theme2.colors.border,
-          overflow: "hidden",
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-            import_react_native8.TextInput,
-            {
-              style: textInputStyle,
-              value: internalValue,
-              defaultValue,
-              autoCapitalize,
-              autoComplete,
-              autoCorrect,
-              autoFocus,
-              placeholder,
-              placeholderTextColor: theme2.colors.textSecondary + "80",
-              readOnly: !editable,
-              keyboardAppearance,
-              keyboardType,
-              cursorColor: theme2.colors.primary,
-              selectionColor: theme2.colors.primary,
-              secureTextEntry,
-              onFocus: onFocusElement,
-              onBlur: onBlurElement,
-              onChangeText
-            }
-          )
+          fontSize: 14,
+          color: theme2.colors.textSecondary,
+          initialHeight: 0,
+          initialOpacity: 0,
+          animateHeight: 17,
+          animateOpacity: 1,
+          children: infoMessage
         }
       ),
-      suffix && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        View_default,
+      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        Animate_default.Text,
         {
-          isRow: true,
-          height: "100%",
-          backgroundColor: prefixSuffixBackgroundColor,
-          alignItems: "center",
-          borderWidth,
-          borderLeftWidth: 0,
-          borderTopRightRadius: theme2.styles.borderRadius,
-          borderBottomRightRadius: theme2.styles.borderRadius,
-          borderColor: theme2.colors.border,
-          paddingHorizontal,
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { fontWeight: 700, children: suffix })
+          fontSize: 14,
+          color: theme2.colors.error,
+          initialHeight: 0,
+          initialOpacity: 0,
+          animateHeight: 17,
+          animateOpacity: 1,
+          children: errorMessage
         }
       )
     ] });
@@ -1347,9 +1396,26 @@ InputFieldComponent.password = (0, import_react10.forwardRef)(function Password(
     }
   );
 });
+InputFieldComponent.code = (0, import_react10.forwardRef)(function Password2({ isSmall, ...props }, ref) {
+  const theme2 = (0, import_react_better_core9.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    InputFieldComponent,
+    {
+      fontSize: isSmall ? 36 : 42,
+      fontWeight: 900,
+      lineHeight: isSmall ? 42 : 50,
+      paddingVertical: isSmall ? theme2.styles.space : theme2.styles.space * 2,
+      paddingHorizontal: isSmall ? theme2.styles.gap : void 0,
+      textAlign: "center",
+      ...props,
+      ref
+    }
+  );
+});
 var InputField = (0, import_react10.memo)(InputFieldComponent);
 InputField.email = InputFieldComponent.email;
 InputField.password = InputFieldComponent.password;
+InputField.code = InputFieldComponent.code;
 var InputField_default = InputField;
 
 // src/components/StatusBar.tsx
@@ -1357,12 +1423,13 @@ var import_react11 = require("react");
 var import_react_better_core10 = require("react-better-core");
 var import_react_native9 = require("react-native");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-function StatusBar({ darkStatusBar, hidden }) {
+function StatusBar({ darkStatusBar, hidden, barStyle, androidBarStyle, iOSBarStyle }) {
   const theme2 = (0, import_react_better_core10.useTheme)();
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     import_react_native9.StatusBar,
     {
       backgroundColor: darkStatusBar ? theme2.colors.backgroundSecondary : void 0,
+      barStyle: barStyle ?? (import_react_native9.Platform.OS === "android" ? androidBarStyle : iOSBarStyle),
       hidden
     }
   );