@retray-dev/ui-kit 2.5.2 → 2.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "2.5.2",
+  "version": "2.7.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/AlertBanner/AlertBanner.tsx

@@ -3,6 +3,7 @@ import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import { FontAwesome5, MaterialIcons, Entypo } from '@expo/vector-icons'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
+import { renderIcon } from '../../utils/icons'
 
 export type AlertBannerVariant = 'default' | 'destructive' | 'success'
 
@@ -11,10 +12,17 @@ export interface AlertBannerProps {
   description?: string
   variant?: AlertBannerVariant
   icon?: React.ReactNode
+  /**
+   * Icon name from `@expo/vector-icons`. See https://icons.expo.fyi.
+   * Takes precedence over `icon`. When neither is set, a default variant icon is shown.
+   */
+  iconName?: string
+  /** Override the resolved icon color. Defaults to the variant title color. */
+  iconColor?: string
   style?: ViewStyle
 }
 
-export function AlertBanner({ title, description, variant = 'default', icon, style }: AlertBannerProps) {
+export function AlertBanner({ title, description, variant = 'default', icon, iconName, iconColor, style }: AlertBannerProps) {
   const { colors } = useTheme()
 
   const borderColor =
@@ -41,9 +49,13 @@ export function AlertBanner({ title, description, variant = 'default', icon, sty
       <Entypo name="info-with-circle" size={18} color={titleColor} />
     )
 
+  const effectiveIcon: React.ReactNode = iconName
+    ? renderIcon(iconName, 18, iconColor ?? titleColor)
+    : icon ?? defaultIcon
+
   return (
     <View style={[styles.container, { backgroundColor: colors.card, borderColor }, style]}>
-      <View style={styles.icon}>{icon ?? defaultIcon}</View>
+      <View style={styles.icon}>{effectiveIcon}</View>
       <View style={styles.content}>
         {title ? <Text style={[styles.title, { color: titleColor }]} allowFontScaling={true}>{title}</Text> : null}
         {description ? (

package/src/components/Badge/Badge.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
+import { renderIcon } from '../../utils/icons'
 
 export type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline'
 export type BadgeSize = 'sm' | 'md' | 'lg'
@@ -14,6 +15,13 @@ export interface BadgeProps {
   size?: BadgeSize
   /** Icon rendered before the label/children. */
   icon?: React.ReactNode
+  /**
+   * Icon name from `@expo/vector-icons` rendered before the label.
+   * See https://icons.expo.fyi. Takes precedence over `icon`.
+   */
+  iconName?: string
+  /** Override the resolved icon color. Defaults to the variant foreground color. */
+  iconColor?: string
   style?: ViewStyle
 }
 
@@ -35,7 +43,9 @@ const sizeIconGap: Record<BadgeSize, number> = {
   lg: s(6),
 }
 
-export function Badge({ label, children, variant = 'default', size = 'md', icon, style }: BadgeProps) {
+const sizeIconSize: Record<BadgeSize, number> = { sm: 10, md: 12, lg: 14 }
+
+export function Badge({ label, children, variant = 'default', size = 'md', icon, iconName, iconColor, style }: BadgeProps) {
   const { colors } = useTheme()
 
   const containerStyle: ViewStyle = {
@@ -52,11 +62,15 @@ export function Badge({ label, children, variant = 'default', size = 'md', icon,
     outline: colors.foreground,
   }[variant]
 
+  const effectiveIcon: React.ReactNode = iconName
+    ? renderIcon(iconName, sizeIconSize[size], iconColor ?? textColor)
+    : icon
+
   const content = children ?? label
 
   return (
     <View style={[styles.container, containerStyle, sizePadding[size], { gap: sizeIconGap[size] }, style]}>
-      {icon ? <View style={styles.iconContainer}>{icon}</View> : null}
+      {effectiveIcon ? <View style={styles.iconContainer}>{effectiveIcon}</View> : null}
       {typeof content === 'string' ? (
         <Text style={[styles.label, { color: textColor }, sizeFontSize[size]]} allowFontScaling={true}>
           {content}

package/src/components/Button/Button.tsx

@@ -15,6 +15,7 @@ const nativeDriver = Platform.OS !== 'web'
 import { impactLight } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
+import { renderIcon } from '../../utils/icons'
 
 export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive'
 export type ButtonSize = 'sm' | 'md' | 'lg'
@@ -34,6 +35,14 @@ export interface ButtonProps extends TouchableOpacityProps {
   fullWidth?: boolean
   /** Icon rendered alongside the label. Can be a ReactNode or a render function `(props) => ReactNode`. */
   icon?: React.ReactNode | ((props: { label: string; size: ButtonSize; variant: ButtonVariant }) => React.ReactNode)
+  /**
+   * Icon name from `@expo/vector-icons` (e.g. `"home"`, `"star"`, `"arrow-right"`).
+   * See https://icons.expo.fyi to browse available icons.
+   * Takes precedence over `icon` when both are supplied.
+   */
+  iconName?: string
+  /** Override the resolved icon color. Defaults to the label foreground color for the active variant. */
+  iconColor?: string
   /** Side the icon appears on. Defaults to `'left'`. */
   iconPosition?: 'left' | 'right'
 }
@@ -50,6 +59,8 @@ const labelSizeStyles: Record<ButtonSize, TextStyle> = {
   lg: { fontSize: ms(18) },
 }
 
+const iconSizeMap: Record<ButtonSize, number> = { sm: 16, md: 18, lg: 20 }
+
 export function Button({
   label,
   variant = 'primary',
@@ -57,6 +68,8 @@ export function Button({
   loading = false,
   fullWidth = false,
   icon,
+  iconName,
+  iconColor,
   iconPosition = 'left',
   disabled,
   style,
@@ -102,6 +115,10 @@ export function Button({
     destructive: { color: colors.destructiveForeground },
   }[variant]
 
+  const effectiveIcon: React.ReactNode = iconName
+    ? renderIcon(iconName, iconSizeMap[size], iconColor ?? (labelVariantStyle.color as string))
+    : typeof icon === 'function' ? icon({ label, size, variant }) : icon
+
   const spinnerColor =
     variant === 'destructive' ? colors.destructiveForeground
     : variant === 'primary' || variant === 'secondary' ? colors.primaryForeground
@@ -130,9 +147,9 @@ export function Button({
           <ActivityIndicator size="small" color={spinnerColor} />
         ) : (
           <>
-            {icon && iconPosition === 'left' && <>{typeof icon === 'function' ? icon({ label, size, variant }) : icon}</>}
-            <Text style={[styles.label, labelVariantStyle, labelSizeStyles[size], icon ? styles.labelWithIcon : undefined]}>{label}</Text>
-            {icon && iconPosition === 'right' && <>{typeof icon === 'function' ? icon({ label, size, variant }) : icon}</>}
+            {effectiveIcon && iconPosition === 'left' && <>{effectiveIcon}</>}
+            <Text style={[styles.label, labelVariantStyle, labelSizeStyles[size], effectiveIcon ? styles.labelWithIcon : undefined]}>{label}</Text>
+            {effectiveIcon && iconPosition === 'right' && <>{effectiveIcon}</>}
           </>
         )}
       </TouchableOpacity>

package/src/components/EmptyState/EmptyState.tsx

@@ -2,9 +2,17 @@ import React from 'react'
 import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
+import { renderIcon } from '../../utils/icons'
 
 export interface EmptyStateProps {
   icon?: React.ReactNode
+  /**
+   * Icon name from `@expo/vector-icons`. See https://icons.expo.fyi.
+   * Takes precedence over `icon`. Sized automatically to fit the slot (48 default, 32 compact).
+   */
+  iconName?: string
+  /** Override the resolved icon color. Defaults to `mutedForeground`. */
+  iconColor?: string
   title: string
   description?: string
   action?: React.ReactNode
@@ -13,10 +21,14 @@ export interface EmptyStateProps {
   style?: ViewStyle
 }
 
-export function EmptyState({ icon, title, description, action, size = 'default', style }: EmptyStateProps) {
+export function EmptyState({ icon, iconName, iconColor, title, description, action, size = 'default', style }: EmptyStateProps) {
   const { colors } = useTheme()
   const isCompact = size === 'compact'
 
+  const effectiveIcon: React.ReactNode = iconName
+    ? renderIcon(iconName, isCompact ? 32 : 48, iconColor ?? colors.mutedForeground)
+    : icon
+
   return (
     <View
       style={[
@@ -26,7 +38,7 @@ export function EmptyState({ icon, title, description, action, size = 'default',
         style,
       ]}
     >
-      {icon ? (
+      {effectiveIcon ? (
         <View
           style={[
             styles.iconWrapper,
@@ -34,7 +46,7 @@ export function EmptyState({ icon, title, description, action, size = 'default',
             { backgroundColor: colors.muted },
           ]}
         >
-          {icon}
+          {effectiveIcon}
         </View>
       ) : null}
       <View style={styles.textWrapper}>

package/src/components/Input/Input.tsx

@@ -3,6 +3,7 @@ import { TextInput, View, Text, StyleSheet, TextInputProps, ViewStyle, TextStyle
 import { AntDesign } from '@expo/vector-icons'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
+import { renderIcon } from '../../utils/icons'
 
 const webInputResetStyle: any =
   Platform.OS === 'web'
@@ -23,13 +24,27 @@ export interface InputProps extends TextInputProps {
   prefixStyle?: TextStyle
   /** Style applied to suffix text if suffix is a string. */
   suffixStyle?: TextStyle
+  /**
+   * Icon name from `@expo/vector-icons` rendered before the input text.
+   * See https://icons.expo.fyi. Takes precedence over `prefix`.
+   */
+  prefixIcon?: string
+  /**
+   * Icon name from `@expo/vector-icons` rendered after the input text.
+   * See https://icons.expo.fyi. Takes precedence over `suffix` (unless `type="password"`).
+   */
+  suffixIcon?: string
+  /** Override the resolved prefix icon color. Defaults to `mutedForeground`. */
+  prefixIconColor?: string
+  /** Override the resolved suffix icon color. Defaults to `mutedForeground`. */
+  suffixIconColor?: string
   /** Input type. When set to \`'password'\`, shows a toggle button to reveal/hide text. */
   type?: 'text' | 'password'
   /** Style for the outer container \`View\`. Use \`style\` (from \`TextInputProps\`) to style the \`TextInput\` itself. */
   containerStyle?: ViewStyle
 }
 
-export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, type = 'text', containerStyle, style, onFocus, onBlur, secureTextEntry, ...props }: InputProps) {
+export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = 'text', containerStyle, style, onFocus, onBlur, secureTextEntry, ...props }: InputProps) {
   const { colors } = useTheme()
   const [focused, setFocused] = useState(false)
   const [showPassword, setShowPassword] = useState(false)
@@ -37,12 +52,18 @@ export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixS
   const isPassword = type === 'password'
   const effectiveSecure = isPassword ? !showPassword : secureTextEntry
 
-  // If type is password and no suffix is provided, add the toggle button
-  const effectiveSuffix = isPassword && !suffix ? (
+  const effectivePrefix: React.ReactNode = prefixIcon
+    ? renderIcon(prefixIcon, 20, prefixIconColor ?? colors.mutedForeground)
+    : prefix
+
+  // If type is password and no suffix override is provided, add the toggle button
+  const effectiveSuffix: React.ReactNode = isPassword && !suffix && !suffixIcon ? (
     <TouchableOpacity onPress={() => setShowPassword(!showPassword)} style={styles.passwordToggle} activeOpacity={0.6}>
       <AntDesign name={showPassword ? 'eye' : 'eye-invisible'} size={20} color={colors.mutedForeground} />
     </TouchableOpacity>
-  ) : suffix
+  ) : suffixIcon
+    ? renderIcon(suffixIcon, 20, suffixIconColor ?? colors.mutedForeground)
+    : suffix
 
   return (
     <View style={[styles.container, containerStyle]}>
@@ -60,13 +81,13 @@ export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixS
           },
         ]}
       >
-        {prefix ? (
-          typeof prefix === 'string' ? (
+        {effectivePrefix ? (
+          typeof effectivePrefix === 'string' ? (
             <Text style={[styles.prefixText, { color: colors.mutedForeground }, prefixStyle]} allowFontScaling={true}>
-              {prefix}
+              {effectivePrefix}
             </Text>
           ) : (
-            <View style={styles.prefixContainer}>{prefix}</View>
+            <View style={styles.prefixContainer}>{effectivePrefix}</View>
           )
         ) : null}
         <TextInput

package/src/components/ListItem/ListItem.tsx

@@ -13,6 +13,7 @@ import { Entypo } from '@expo/vector-icons'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
+import { renderIcon } from '../../utils/icons'
 
 const nativeDriver = Platform.OS !== 'web'
 
@@ -33,6 +34,20 @@ export interface ListItemProps {
   trailing?: React.ReactNode | string
   /** @deprecated Use `leftRender` instead. */
   icon?: React.ReactNode
+  /**
+   * Icon name from `@expo/vector-icons` rendered in the left slot.
+   * See https://icons.expo.fyi. Takes precedence over `leftRender`.
+   */
+  leftIcon?: string
+  /**
+   * Icon name from `@expo/vector-icons` rendered in the right slot.
+   * See https://icons.expo.fyi. Takes precedence over `rightRender`.
+   */
+  rightIcon?: string
+  /** Override the resolved left icon color. Defaults to `foreground`. */
+  leftIconColor?: string
+  /** Override the resolved right icon color. Defaults to `mutedForeground`. */
+  rightIconColor?: string
 
   title: string
   /** Secondary line below the title. */
@@ -69,6 +84,10 @@ export function ListItem({
   rightRender,
   trailing,
   icon,
+  leftIcon,
+  rightIcon,
+  leftIconColor,
+  rightIconColor,
   title,
   subtitle,
   caption,
@@ -109,9 +128,13 @@ export function ListItem({
     onPress?.()
   }
 
-  // Support legacy props
-  const effectiveLeft = leftRender ?? icon
-  const effectiveRight = rightRender ?? trailing
+  const effectiveLeft: React.ReactNode = leftIcon
+    ? renderIcon(leftIcon, 24, leftIconColor ?? colors.foreground)
+    : leftRender ?? icon
+
+  const effectiveRight: React.ReactNode | string | undefined = rightIcon
+    ? renderIcon(rightIcon, 24, rightIconColor ?? colors.mutedForeground)
+    : rightRender ?? trailing
 
   const cardStyle: ViewStyle =
     variant === 'card'

package/src/components/Toast/Toast.tsx

@@ -14,6 +14,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { notificationSuccess, notificationError, impactLight } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
+import { renderIcon } from '../../utils/icons'
 
 export type ToastVariant = 'default' | 'destructive' | 'success'
 
@@ -23,6 +24,13 @@ export interface ToastItem {
   description?: string
   variant?: ToastVariant
   icon?: React.ReactNode
+  /**
+   * Icon name from `@expo/vector-icons`. See https://icons.expo.fyi.
+   * Takes precedence over `icon`. When neither is set, a default variant icon is shown.
+   */
+  iconName?: string
+  /** Override the resolved icon color. Defaults to the variant text color. */
+  iconColor?: string
   /** Auto-dismiss delay in milliseconds. Defaults to `3000`. */
   duration?: number
 }
@@ -109,7 +117,9 @@ function ToastNotification({ item, onDismiss }: { item: ToastItem; onDismiss: ()
       <Entypo name="info-with-circle" size={22} color={textColor} />
     )
 
-  const leftIcon = item.icon ?? defaultIcon
+  const leftIcon: React.ReactNode = item.iconName
+    ? renderIcon(item.iconName, 22, item.iconColor ?? textColor)
+    : item.icon ?? defaultIcon
 
   return (
     <GestureDetector gesture={panGesture}>

package/src/components/Toggle/Toggle.tsx

@@ -4,6 +4,7 @@ import { FontAwesome5 } from '@expo/vector-icons'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
+import { renderIcon } from '../../utils/icons'
 
 export type ToggleVariant = 'default' | 'outline'
 export type ToggleSize = 'sm' | 'md' | 'lg'
@@ -18,6 +19,20 @@ export interface ToggleProps extends TouchableOpacityProps {
   icon?: React.ReactNode | ((pressed: boolean) => React.ReactNode)
   /** Icon to show when pressed/active. If omitted, a default check mark is used. */
   activeIcon?: React.ReactNode | ((pressed: boolean) => React.ReactNode)
+  /**
+   * Icon name from `@expo/vector-icons` shown when not pressed.
+   * See https://icons.expo.fyi. Takes precedence over `icon`.
+   */
+  iconName?: string
+  /**
+   * Icon name from `@expo/vector-icons` shown when pressed/active.
+   * See https://icons.expo.fyi. Takes precedence over `activeIcon`.
+   */
+  activeIconName?: string
+  /** Override the resolved inactive icon color. Defaults to `mutedForeground`. */
+  iconColor?: string
+  /** Override the resolved active icon color. Defaults to `primary`. */
+  activeIconColor?: string
 }
 
 const sizeStyles: Record<ToggleSize, ViewStyle> = {
@@ -26,6 +41,8 @@ const sizeStyles: Record<ToggleSize, ViewStyle> = {
   lg: { paddingHorizontal: s(20), paddingVertical: vs(14), minWidth: s(48), minHeight: vs(48) },
 }
 
+const iconSizeMap: Record<ToggleSize, number> = { sm: 16, md: 18, lg: 20 }
+
 export function Toggle({
   pressed = false,
   onPressedChange,
@@ -34,6 +51,10 @@ export function Toggle({
   label,
   icon,
   activeIcon,
+  iconName,
+  activeIconName,
+  iconColor,
+  activeIconColor,
   disabled,
   style,
   ...props
@@ -78,6 +99,8 @@ export function Toggle({
     outputRange: [colors.foreground, colors.primary],
   })
 
+  const iconSize = iconSizeMap[size]
+
   const LeftIcon = () => {
     const renderProp = (prop?: any) => {
       if (!prop) return null
@@ -86,16 +109,18 @@ export function Toggle({
     }
 
     if (pressed) {
+      if (activeIconName) return <>{renderIcon(activeIconName, iconSize, activeIconColor ?? colors.primary)}</>
       const active = renderProp(activeIcon)
       if (active) return <>{active}</>
-      return <FontAwesome5 name="check-circle" size={20} color={colors.primary} />
+      return <FontAwesome5 name="check-circle" size={iconSize} color={colors.primary} />
     }
 
+    if (iconName) return <>{renderIcon(iconName, iconSize, iconColor ?? colors.mutedForeground)}</>
     const custom = renderProp(icon)
     if (custom) return <>{custom}</>
 
     // Default: empty circle to signal an action is available
-    return <FontAwesome5 name="circle" size={20} color={colors.mutedForeground} />
+    return <FontAwesome5 name="circle" size={iconSize} color={colors.mutedForeground} />
   }
 
   return (

package/src/index.ts

@@ -36,3 +36,24 @@ export * from './components/Chip'
 export * from './components/ConfirmDialog'
 export * from './components/LabelValue'
 export * from './components/MonthPicker'
+
+// Icon utility
+export { Icon, renderIcon } from './utils/icons'
+export type { IconProps, IconFamily } from './utils/icons'
+
+// Design tokens
+export {
+  SPACING,
+  ICON_SIZES,
+  RADIUS,
+  SHADOWS,
+  BREAKPOINTS,
+} from './tokens'
+export type {
+  Spacing,
+  SpacingKey,
+  IconSize,
+  IconSizeKey,
+  Radius,
+  RadiusKey,
+} from './tokens'

package/src/tokens.ts

@@ -0,0 +1,69 @@
+export const SPACING = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  '2xl': 32,
+  '3xl': 48,
+} as const
+
+export const ICON_SIZES = {
+  sm: 14,
+  md: 18,
+  lg: 22,
+  xl: 28,
+  '2xl': 32,
+} as const
+
+export const RADIUS = {
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  full: 9999,
+} as const
+
+export const SHADOWS = {
+  sm: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.08,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  md: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.12,
+    shadowRadius: 8,
+    elevation: 5,
+  },
+  lg: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.2,
+    shadowRadius: 16,
+    elevation: 10,
+  },
+  xl: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 12 },
+    shadowOpacity: 0.28,
+    shadowRadius: 24,
+    elevation: 18,
+  },
+} as const
+
+export const BREAKPOINTS = {
+  wide: 700,
+} as const
+
+export type Spacing = typeof SPACING
+export type SpacingKey = keyof Spacing
+
+export type IconSize = typeof ICON_SIZES
+export type IconSizeKey = keyof IconSize
+
+export type Radius = typeof RADIUS
+export type RadiusKey = keyof Radius

package/src/utils/haptics.ts

@@ -1,32 +1,38 @@
 import { Platform } from 'react-native'
 
-/**
- * Web-safe haptics helpers. All calls are no-ops on web since expo-haptics
- * is a native-only module and throws on web.
- */
+type HapticsModule = typeof import('expo-haptics')
 
-let Haptics: typeof import('expo-haptics') | null = null
+let _haptics: HapticsModule | null = null
 
-if (Platform.OS !== 'web') {
-  Haptics = require('expo-haptics')
+async function getHaptics(): Promise<HapticsModule | null> {
+  if (Platform.OS === 'web') return null
+  if (!_haptics) {
+    _haptics = await import('expo-haptics')
+  }
+  return _haptics
 }
 
 export function selectionAsync(): void {
-  Haptics?.selectionAsync()
+  if (Platform.OS === 'web') return
+  getHaptics().then(h => h?.selectionAsync())
 }
 
 export function impactLight(): void {
-  Haptics?.impactAsync(Haptics.ImpactFeedbackStyle.Light)
+  if (Platform.OS === 'web') return
+  getHaptics().then(h => h?.impactAsync(h.ImpactFeedbackStyle.Light))
 }
 
 export function impactMedium(): void {
-  Haptics?.impactAsync(Haptics.ImpactFeedbackStyle.Medium)
+  if (Platform.OS === 'web') return
+  getHaptics().then(h => h?.impactAsync(h.ImpactFeedbackStyle.Medium))
 }
 
 export function notificationSuccess(): void {
-  Haptics?.notificationAsync(Haptics.NotificationFeedbackType.Success)
+  if (Platform.OS === 'web') return
+  getHaptics().then(h => h?.notificationAsync(h.NotificationFeedbackType.Success))
 }
 
 export function notificationError(): void {
-  Haptics?.notificationAsync(Haptics.NotificationFeedbackType.Error)
+  if (Platform.OS === 'web') return
+  getHaptics().then(h => h?.notificationAsync(h.NotificationFeedbackType.Error))
 }