@webority-technologies/mobile 0.0.7 → 0.0.9

package/lib/module/components/TimePicker/TimePicker.js

@@ -2,7 +2,7 @@
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AccessibilityInfo, Animated, Easing, FlatList, Modal, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import Button from "../Button/Button.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -59,7 +59,7 @@ const Wheel = ({
   testID
 }) => {
   const listRef = useRef(null);
-  const scrollY = useRef(new Animated.Value(selectedIndex * ITEM_HEIGHT)).current;
+  const scrollY = useRef(createAnimatedValue(selectedIndex * ITEM_HEIGHT)).current;
   const lastIndexRef = useRef(selectedIndex);
   const lastHapticAtRef = useRef(0);
 
@@ -258,8 +258,8 @@ const TimePicker = ({
   }, [visible, value, format, minuteStep, hours, minutes]);
 
   // Sheet animations.
-  const opacity = useRef(new Animated.Value(0)).current;
-  const translateY = useRef(new Animated.Value(40)).current;
+  const opacity = useRef(createAnimatedValue(0)).current;
+  const translateY = useRef(createAnimatedValue(40)).current;
   useEffect(() => {
     if (visible) {
       Animated.parallel([Animated.timing(opacity, {

package/lib/module/components/Toast/Toast.js

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useMemo, useRef } from 'react';
 import { Animated, PanResponder, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { fontFor, useTheme, createAnimatedValue } from "../../theme/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SWIPE_DISMISS_THRESHOLD = 80;
 const SWIPE_VELOCITY_THRESHOLD = 0.5;
@@ -18,10 +18,15 @@ const Toast = ({
   const position = toast.position ?? 'bottom';
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const tint = useMemo(() => tintFor(theme, variant), [theme, variant]);
+  const toastTokens = theme.components.toast;
+  const iconCircleSize = toastTokens?.iconCircleSize ?? 28;
+  const iconCircleBorderRadius = toastTokens?.iconCircleBorderRadius ?? 14;
+  const iconGlyphFontSize = toastTokens?.iconGlyphFontSize ?? 16;
+  const tintBarWidth = toastTokens?.tintBarWidth ?? 4;
   const enterFrom = position === 'top' ? -120 : 120;
-  const translateY = useRef(new Animated.Value(enterFrom)).current;
-  const translateX = useRef(new Animated.Value(0)).current;
-  const opacity = useRef(new Animated.Value(0)).current;
+  const translateY = useRef(createAnimatedValue(enterFrom)).current;
+  const translateX = useRef(createAnimatedValue(0)).current;
+  const opacity = useRef(createAnimatedValue(0)).current;
   const dismissedRef = useRef(false);
   const dismiss = (animateOut = true) => {
     if (dismissedRef.current) return;
@@ -107,11 +112,15 @@ const Toast = ({
     if (!glyph) return null;
     return /*#__PURE__*/_jsx(View, {
       style: [styles.iconCircle, {
+        width: iconCircleSize,
+        height: iconCircleSize,
+        borderRadius: iconCircleBorderRadius,
         backgroundColor: tint + '22'
       }],
       children: /*#__PURE__*/_jsx(Text, {
         style: [styles.iconGlyph, {
-          color: tint
+          color: tint,
+          fontSize: iconGlyphFontSize
         }],
         accessible: false,
         children: glyph
@@ -138,9 +147,10 @@ const Toast = ({
       }, {
         scale: stackScale
       }]
-    }],
+    }, toast.style],
     children: [/*#__PURE__*/_jsx(View, {
       style: [styles.tintBar, {
+        width: tintBarWidth,
         backgroundColor: tint
       }]
     }), /*#__PURE__*/_jsxs(View, {
@@ -151,8 +161,8 @@ const Toast = ({
           style: [styles.message, {
             color: theme.colors.text.primary,
             fontSize: theme.typography.fontSize.base,
-            fontWeight: theme.typography.fontWeight.semibold
-          }],
+            ...fontFor(theme, 'semibold')
+          }, toast.textStyle],
           numberOfLines: 2,
           children: toast.message
         }), toast.description ? /*#__PURE__*/_jsx(Text, {
@@ -176,7 +186,7 @@ const Toast = ({
           style: {
             color: tint,
             fontSize: theme.typography.fontSize.sm,
-            fontWeight: theme.typography.fontWeight.semibold
+            ...fontFor(theme, 'semibold')
           },
           numberOfLines: 1,
           children: toast.action.label
@@ -224,8 +234,7 @@ const buildStyles = _theme => StyleSheet.create({
     position: 'absolute',
     left: 0,
     top: 0,
-    bottom: 0,
-    width: 4
+    bottom: 0
   },
   row: {
     flexDirection: 'row',
@@ -233,15 +242,11 @@ const buildStyles = _theme => StyleSheet.create({
     paddingLeft: 8
   },
   iconCircle: {
-    width: 28,
-    height: 28,
-    borderRadius: 14,
     alignItems: 'center',
     justifyContent: 'center',
     marginRight: 12
   },
   iconGlyph: {
-    fontSize: 16,
     fontWeight: '700',
     lineHeight: 18
   },

package/lib/module/components/Tooltip/Tooltip.js

@@ -2,7 +2,7 @@
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Dimensions, Modal, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const TOOLTIP_GAP = 8;
 const SCREEN_PADDING = 8;
@@ -36,8 +36,8 @@ const Tooltip = props => {
     height: 0
   });
   const wrapperRef = useRef(null);
-  const scale = useRef(new Animated.Value(visible ? 1 : 0.85)).current;
-  const opacity = useRef(new Animated.Value(visible ? 1 : 0)).current;
+  const scale = useRef(createAnimatedValue(visible ? 1 : 0.85)).current;
+  const opacity = useRef(createAnimatedValue(visible ? 1 : 0)).current;
   const autoHideTimer = useRef(null);
   const didMount = useRef(false);
   const setVisible = useCallback(next => {

package/lib/module/theme/Gradient.js

@@ -0,0 +1,50 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Render a linear gradient using `react-native-linear-gradient` when available.
+ *
+ * The dep is OPTIONAL — apps that never use gradients don't need it installed.
+ * If `<Gradient>` (or any component that accepts a `gradient` prop) is reached
+ * without the package present, we fall back to a flat View using the first
+ * colour and emit a one-time dev warning so the omission is loud but
+ * non-fatal.
+ */
+let LinearGradientImpl = null;
+let warned = false;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  LinearGradientImpl = require('react-native-linear-gradient').default;
+} catch {
+  // Optional peer; resolved lazily by consumers that need gradients.
+}
+export const Gradient = ({
+  gradient,
+  style,
+  children
+}) => {
+  if (LinearGradientImpl) {
+    return /*#__PURE__*/_jsx(LinearGradientImpl, {
+      colors: gradient.colors,
+      locations: gradient.locations,
+      start: gradient.start,
+      end: gradient.end,
+      style: style,
+      children: children
+    });
+  }
+  if (__DEV__ && !warned) {
+    warned = true;
+    console.warn('[@webority-technologies/mobile] gradient prop set but react-native-linear-gradient is not installed. ' + 'Run `npm install react-native-linear-gradient` to enable.');
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      backgroundColor: gradient.colors[0]
+    }, style],
+    children: children
+  });
+};
+export const isGradientAvailable = () => LinearGradientImpl != null;
+//# sourceMappingURL=Gradient.js.map

package/lib/module/theme/animatedValue.js

@@ -0,0 +1,24 @@
+"use strict";
+
+import { Animated } from 'react-native';
+
+/**
+ * Create an `Animated.Value` that survives RN 0.85's dev-mode prop deepFreeze.
+ *
+ * RN's Fabric renderer deep-freezes prop trees on host components. If an
+ * `Animated.Value` is reachable from a `style` prop via interpolation chains
+ * (the `_parent` ref on `AnimatedInterpolation` nodes), the recursive freeze
+ * converts the value's `_animation` slot into a throwing setter — the next
+ * `Animated.timing(v).start()` then crashes with
+ *   "_animation: object that is meant to be immutable".
+ *
+ * Sealing the value at construction makes `Object.isSealed(v) === true`,
+ * which causes `deepFreezeAndThrowOnMutationInDev` to skip-and-return at
+ * its top guard. Existing-property mutation (`_animation`, `_value`,
+ * `_listeners`, `_tracking`) keeps working — seal only blocks adding NEW
+ * properties, and `Animated.Value` doesn't add any post-construction.
+ *
+ * Use everywhere the library would otherwise call `new Animated.Value(...)`.
+ */
+export const createAnimatedValue = (initial, config) => Object.seal(new Animated.Value(initial, config));
+//# sourceMappingURL=animatedValue.js.map

package/lib/module/theme/index.js

@@ -45,4 +45,7 @@ export const subscribeTheme = callback => {
 export { ThemeProvider, useTheme, useThemeMode } from "./ThemeContext.js";
 export { lightTheme, darkTheme } from "./tokens.js";
 export { mergeTheme } from "./merge.js";
+export { fontFor } from "./textStyle.js";
+export { createAnimatedValue } from "./animatedValue.js";
+export { Gradient, isGradientAvailable } from "./Gradient.js";
 //# sourceMappingURL=index.js.map

package/lib/module/theme/textStyle.js

@@ -0,0 +1,32 @@
+"use strict";
+
+const FAMILY_KEY = {
+  normal: 'regular',
+  medium: 'medium',
+  semibold: 'semibold',
+  bold: 'bold'
+};
+
+/**
+ * Resolve text-weight style for the active theme.
+ *
+ * When the consumer registers a brand `theme.typography.fontFamily.<weight>`,
+ * we set `fontFamily` and leave `fontWeight` undefined — RN can't combine the
+ * two reliably across iOS/Android once a custom face is in play, so the brand
+ * file controls the weight glyph itself. Falls back to `fontWeight` when no
+ * brand font is registered for that weight.
+ *
+ * Note: the fontWeight scale uses `normal` while FontFamilyScale uses
+ * `regular` (the conventional font-name suffix). The helper maps between
+ * them transparently.
+ */
+export const fontFor = (theme, weight) => {
+  const family = theme.typography.fontFamily?.[FAMILY_KEY[weight]];
+  if (family) return {
+    fontFamily: family
+  };
+  return {
+    fontWeight: theme.typography.fontWeight[weight]
+  };
+};
+//# sourceMappingURL=textStyle.js.map

package/lib/module/theme/tokens.js

@@ -50,6 +50,260 @@ const radius = {
   '2xl': 28,
   full: 9999
 };
+const components = {
+  button: {
+    xs: {
+      paddingHorizontal: 10,
+      paddingVertical: 4,
+      minHeight: 28,
+      fontSize: 12,
+      borderRadius: 8
+    },
+    sm: {
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+      minHeight: 34,
+      fontSize: 13,
+      borderRadius: 10
+    },
+    md: {
+      paddingHorizontal: 16,
+      paddingVertical: 9,
+      minHeight: 42,
+      fontSize: 15,
+      borderRadius: 12
+    },
+    lg: {
+      paddingHorizontal: 20,
+      paddingVertical: 12,
+      minHeight: 50,
+      fontSize: 16,
+      borderRadius: 14
+    },
+    xl: {
+      paddingHorizontal: 24,
+      paddingVertical: 14,
+      minHeight: 58,
+      fontSize: 17,
+      borderRadius: 16
+    }
+  },
+  input: {
+    sm: {
+      paddingHorizontal: 12,
+      paddingVertical: 8,
+      minHeight: 38,
+      multilineMinHeight: 72,
+      fontSize: 13,
+      borderRadius: 10,
+      iconSize: 16
+    },
+    md: {
+      paddingHorizontal: 14,
+      paddingVertical: 11,
+      minHeight: 46,
+      multilineMinHeight: 92,
+      fontSize: 15,
+      borderRadius: 12,
+      iconSize: 18
+    },
+    lg: {
+      paddingHorizontal: 16,
+      paddingVertical: 14,
+      minHeight: 54,
+      multilineMinHeight: 110,
+      fontSize: 16,
+      borderRadius: 14,
+      iconSize: 20
+    }
+  },
+  searchBar: {
+    sm: {
+      height: 36,
+      paddingHorizontal: 10,
+      fontSize: 13,
+      iconSize: 16,
+      gap: 6
+    },
+    md: {
+      height: 44,
+      paddingHorizontal: 12,
+      fontSize: 15,
+      iconSize: 18,
+      gap: 8
+    },
+    lg: {
+      height: 52,
+      paddingHorizontal: 14,
+      fontSize: 16,
+      iconSize: 20,
+      gap: 10
+    },
+    cancelButtonWidth: 72
+  },
+  emptyState: {
+    sm: {
+      iconSize: 48,
+      titleFontSize: 'lg',
+      descriptionFontSize: 'sm',
+      paddingVertical: 'lg'
+    },
+    md: {
+      iconSize: 64,
+      titleFontSize: 'xl',
+      descriptionFontSize: 'base',
+      paddingVertical: 'xl'
+    },
+    lg: {
+      iconSize: 80,
+      titleFontSize: '2xl',
+      descriptionFontSize: 'base',
+      paddingVertical: '2xl'
+    }
+  },
+  listItem: {
+    sm: {
+      paddingVertical: 'sm',
+      titleFontSize: 'sm',
+      subtitleFontSize: 'xs',
+      minHeight: 44
+    },
+    md: {
+      paddingVertical: 'md',
+      titleFontSize: 'base',
+      subtitleFontSize: 'sm',
+      minHeight: 56
+    },
+    lg: {
+      paddingVertical: 'lg',
+      titleFontSize: 'lg',
+      subtitleFontSize: 'sm',
+      minHeight: 72
+    }
+  },
+  badge: {
+    sm: {
+      fontSize: 10,
+      minWidth: 16,
+      height: 16,
+      paddingHorizontal: 5,
+      dotSize: 8
+    },
+    md: {
+      fontSize: 11,
+      minWidth: 20,
+      height: 20,
+      paddingHorizontal: 6,
+      dotSize: 10
+    },
+    borderWidth: 1.5,
+    anchorOffset: 4
+  },
+  chip: {
+    sm: {
+      paddingHorizontal: 10,
+      paddingVertical: 4,
+      fontSize: 12,
+      minHeight: 26,
+      closeSize: 16,
+      closeFontSize: 12,
+      gap: 6
+    },
+    md: {
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+      fontSize: 13,
+      minHeight: 32,
+      closeSize: 18,
+      closeFontSize: 13,
+      gap: 8
+    }
+  },
+  checkbox: {
+    sm: {
+      boxSize: 16
+    },
+    md: {
+      boxSize: 20
+    },
+    lg: {
+      boxSize: 24
+    },
+    borderWidth: 1.5,
+    labelGap: 10
+  },
+  radio: {
+    sm: {
+      outer: 16,
+      inner: 8
+    },
+    md: {
+      outer: 20,
+      inner: 10
+    },
+    lg: {
+      outer: 24,
+      inner: 12
+    },
+    borderWidth: 1.5,
+    labelGap: 10
+  },
+  switch: {
+    sm: {
+      trackWidth: 42,
+      trackHeight: 26,
+      thumbSize: 22,
+      padding: 2
+    },
+    md: {
+      trackWidth: 51,
+      trackHeight: 31,
+      thumbSize: 27,
+      padding: 2
+    },
+    lg: {
+      trackWidth: 60,
+      trackHeight: 36,
+      thumbSize: 32,
+      padding: 2
+    },
+    thumbColor: '#FFFFFF'
+  },
+  otpInput: {
+    sm: {
+      cell: 36,
+      fontSize: 16,
+      borderRadius: 8,
+      gap: 8
+    },
+    md: {
+      cell: 48,
+      fontSize: 20,
+      borderRadius: 10,
+      gap: 10
+    },
+    lg: {
+      cell: 56,
+      fontSize: 24,
+      borderRadius: 12,
+      gap: 12
+    }
+  },
+  dialog: {
+    iconWrapperSize: 48,
+    iconWrapperBorderRadius: 24,
+    actionButtonMinHeight: 44
+  },
+  toast: {
+    iconCircleSize: 28,
+    iconCircleBorderRadius: 14,
+    iconGlyphFontSize: 16,
+    tintBarWidth: 4
+  },
+  formField: {
+    inlineLabelWidth: '35%'
+  }
+};
 const motion = {
   duration: {
     instant: 80,
@@ -258,7 +512,9 @@ export const lightTheme = {
   spacing,
   radius,
   shadows: lightShadows,
-  motion
+  motion,
+  components,
+  gradients: {}
 };
 export const darkTheme = {
   mode: 'dark',
@@ -310,6 +566,8 @@ export const darkTheme = {
   spacing,
   radius,
   shadows: darkShadows,
-  motion
+  motion,
+  components,
+  gradients: {}
 };
 //# sourceMappingURL=tokens.js.map

package/lib/typescript/commonjs/components/BottomSheet/BottomSheet.d.ts

@@ -19,6 +19,7 @@
 import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 export type SnapPoint = number | `${number}%`;
+export type KeyboardBehavior = 'none' | 'shift';
 export interface BottomSheetProps {
     snapPoints: SnapPoint[];
     index?: number;
@@ -27,6 +28,15 @@ export interface BottomSheetProps {
     enablePanDownToClose?: boolean;
     enableBackdropPress?: boolean;
     backdropOpacity?: number;
+    /**
+     * How the sheet reacts to the soft keyboard.
+     * - `'none'` (default): the sheet stays put; keyboard may overlap content.
+     * - `'shift'`: animate the sheet upward by the keyboard height while it's
+     *   visible (clamped so the sheet never extends past the top of the screen)
+     *   and animate back when dismissed. Best for forms that live inside the
+     *   sheet itself.
+     */
+    keyboardBehavior?: KeyboardBehavior;
     handleIndicatorStyle?: StyleProp<ViewStyle>;
     containerStyle?: StyleProp<ViewStyle>;
     children?: React.ReactNode;

package/lib/typescript/commonjs/components/Button/Button.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import type { PressableProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { GradientDefinition } from '../../theme/types';
 import type { HapticType } from '../../utils/hapticUtils';
 export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'link';
 export type ButtonTone = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
@@ -23,6 +24,13 @@ export interface ButtonProps extends Omit<PressableProps, 'style' | 'children'>
     rightIcon?: React.ReactNode;
     haptic?: HapticType | false;
     rounded?: boolean;
+    /**
+     * Optional gradient background. Pass either a key from `theme.gradients`
+     * (e.g. `"primary"`) or a `GradientDefinition` literal. Requires
+     * `react-native-linear-gradient` to be installed; without it the button
+     * falls back to flat colour with a dev warning.
+     */
+    gradient?: string | GradientDefinition;
     style?: StyleProp<ViewStyle>;
     textStyle?: StyleProp<TextStyle>;
     pressAnimation?: boolean;

package/lib/typescript/commonjs/components/Card/Card.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import type { GestureResponderEvent, ImageSourcePropType, PressableProps, StyleProp, ViewStyle } from 'react-native';
+import type { GradientDefinition } from '../../theme/types';
 export type CardVariant = 'elevated' | 'outlined' | 'filled';
 export type CardElevation = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 export type CardRadius = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
@@ -24,6 +25,13 @@ export interface CardProps extends Omit<PressableProps, 'style' | 'children'> {
      * with shimmer blocks. Use this when the data driving the component is still being fetched.
      */
     loading?: boolean;
+    /**
+     * Optional gradient background. Pass a key from `theme.gradients` or a
+     * literal `GradientDefinition`. Layered behind the card's content so
+     * existing variant/elevation/radius continue to work. Requires
+     * `react-native-linear-gradient` to be installed.
+     */
+    gradient?: string | GradientDefinition;
     onPress?: (event: GestureResponderEvent) => void;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;

package/lib/typescript/commonjs/components/Dialog/Dialog.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 export type DialogVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';
 export type DialogActionTone = 'primary' | 'neutral' | 'danger';
 export interface DialogAction {
@@ -17,6 +18,10 @@ export interface DialogProps {
     actions?: DialogAction[];
     dismissOnAction?: boolean;
     accessibilityLabel?: string;
+    /** Style applied to the underlying Modal sheet (consumer may override radius, padding, etc.). */
+    contentStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the dialog inner container (above icon/title/message). */
+    containerStyle?: StyleProp<ViewStyle>;
     testID?: string;
 }
 declare const Dialog: React.FC<DialogProps>;

package/lib/typescript/commonjs/components/Input/Input.d.ts

@@ -20,6 +20,18 @@ export interface InputProps extends Omit<TextInputProps, 'style'> {
     variant?: InputVariant;
     required?: boolean;
     maxLength?: number;
+    /**
+     * Format the raw `value` for display. Common uses: phone-number formatting
+     * ("5551234567" → "(555) 123-4567"), currency, postal codes, masked IDs.
+     * The TextInput shows `format(value)`; user input is passed to `parse` (or
+     * left raw) before reaching `onChangeText`.
+     */
+    format?: (raw: string) => string;
+    /**
+     * Reverse of `format` — strips the formatted display back to the canonical
+     * value the consumer wants in state. If omitted, defaults to identity.
+     */
+    parse?: (formatted: string) => string;
     style?: StyleProp<ViewStyle>;
     inputStyle?: StyleProp<TextStyle>;
     labelStyle?: StyleProp<TextStyle>;

package/lib/typescript/commonjs/components/Switch/Switch.d.ts

@@ -13,6 +13,11 @@ export interface SwitchProps extends Omit<PressableProps, 'style' | 'children' |
     label?: string;
     accessibilityLabel?: string;
     haptic?: HapticType | false;
+    /**
+     * When true, the thumb briefly scales up on value change (1 → 1.15 → 1).
+     * Use for playful/brand-flavored switches; default off for system feel.
+     */
+    bounce?: boolean;
     style?: StyleProp<ViewStyle>;
     trackStyle?: StyleProp<ViewStyle>;
     thumbStyle?: StyleProp<ViewStyle>;

package/lib/typescript/commonjs/components/Toast/Toast.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils/hapticUtils';
 export type ToastVariant = 'default' | 'success' | 'error' | 'warning' | 'info';
 export type ToastPosition = 'top' | 'bottom';
@@ -15,6 +16,10 @@ export interface ToastOptions {
     action?: ToastAction;
     haptic?: HapticType | false;
     icon?: React.ReactNode;
+    /** Style applied to the toast container (override radius, padding, shadow per-toast). */
+    style?: StyleProp<ViewStyle>;
+    /** Style applied to the toast message Text. */
+    textStyle?: StyleProp<TextStyle>;
 }
 export interface ToastItem extends ToastOptions {
     id: string;