@oxyhq/bloom 0.1.7 → 0.1.9

package/lib/typescript/module/collapsible/Collapsible.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../../../src/collapsible/Collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAI9C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAwDhD,eAAO,MAAM,WAAW,8CAA6B,CAAC"}
+{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../../../src/collapsible/Collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAK9E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAyFhD,eAAO,MAAM,WAAW,8CAA6B,CAAC"}

package/lib/typescript/module/loading/Loading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Loading.d.ts","sourceRoot":"","sources":["../../../../src/loading/Loading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAKxD,OAAO,KAAK,EACV,YAAY,EAKb,MAAM,SAAS,CAAC;AAmNjB,eAAO,MAAM,OAAO,0CAAyB,CAAC"}
+{"version":3,"file":"Loading.d.ts","sourceRoot":"","sources":["../../../../src/loading/Loading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAMxD,OAAO,KAAK,EACV,YAAY,EAKb,MAAM,SAAS,CAAC;AAmNjB,eAAO,MAAM,OAAO,0CAAyB,CAAC"}

package/lib/typescript/module/skeleton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/skeleton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAc,MAAM,cAAc,CAAC;AAQhF,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,KAAK,GACN,EAAE;IACD,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IAChC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,2CAyBA;AAED,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,KAAK,GACN,EAAE;IACD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CACjC,2CAiBA;AAED,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,KAAK,GACN,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CACjC,2CAgBA;AAED,wBAAgB,GAAG,CAAC,EAClB,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CACjC,2CAEA;AAED,wBAAgB,GAAG,CAAC,EAClB,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CACjC,2CAEA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/skeleton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAkB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAc,MAAM,cAAc,CAAC;AAiC1F,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,KAAK,GACN,EAAE;IACD,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IAChC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,2CA0BA;AAED,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,KAAK,GACN,EAAE;IACD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CACjC,2CAmBA;AAED,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,KAAK,GACN,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CACjC,2CAkBA;AAED,wBAAgB,GAAG,CAAC,EAClB,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CACjC,2CAEA;AAED,wBAAgB,GAAG,CAAC,EAClB,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CACjC,2CAEA"}

package/lib/typescript/module/styles/tokens.d.ts

@@ -51,6 +51,35 @@ export declare const borderRadius: {
     readonly _2xl: 24;
     readonly full: 999;
 };
+/**
+ * Gradient definitions for icon system.
+ */
+/**
+ * Animation timing and spring tokens.
+ * Centralized values ensure consistent motion across all components.
+ */
+export declare const animation: {
+    readonly duration: {
+        readonly instant: 100;
+        readonly fast: 150;
+        readonly normal: 200;
+        readonly slow: 300;
+    };
+    readonly spring: {
+        readonly snappy: {
+            readonly friction: 8;
+            readonly tension: 100;
+        };
+        readonly gentle: {
+            readonly friction: 8;
+            readonly tension: 60;
+        };
+        readonly bouncy: {
+            readonly friction: 6;
+            readonly tension: 120;
+        };
+    };
+};
 /**
  * Gradient definitions for icon system.
  */

package/lib/typescript/module/styles/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../../src/styles/tokens.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;;CAWR,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;;CAWX,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;CAKb,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,YAAY;;;;;;;;;CASf,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,SAAS;;yBAOb,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;;;;yBAOvB,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;;;CAGtB,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../../src/styles/tokens.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;;CAWR,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;;CAWX,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;CAKb,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,YAAY;;;;;;;;;CASf,CAAC;AAEX;;GAEG;AACH;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;CAYZ,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,SAAS;;yBAOb,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;;;;yBAOvB,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;;;CAGtB,CAAC"}

package/lib/typescript/module/switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAIvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAgH3C,eAAO,MAAM,MAAM,4FAAwB,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAKvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AA6G3C,eAAO,MAAM,MAAM,4FAAwB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -46,7 +46,7 @@
       }
     },
     "./portal": {
-      "react-native": "./src/portal/index.ts",
+      "react-native": "./src/portal/index.tsx",
       "import": {
         "types": "./lib/typescript/module/portal/index.d.ts",
         "default": "./lib/module/portal/index.js"

package/src/button/Button.tsx

@@ -1,7 +1,8 @@
-import React, { useMemo, memo } from 'react';
-import { TouchableOpacity, Text, Platform, type ViewStyle, type TextStyle } from 'react-native';
+import React, { useCallback, useMemo, useRef, memo } from 'react';
+import { Pressable, Text, Platform, Animated, type ViewStyle, type TextStyle } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
+import { animation } from '../styles/tokens';
 import type { ButtonProps } from './types';
 
 export type { ButtonProps, ButtonVariant, ButtonSize } from './types';
@@ -29,6 +30,9 @@ const SIZE_CONFIG = {
 
 const ICON_HIT_SLOP = { top: 10, bottom: 10, left: 10, right: 10 } as const;
 
+const PRESS_SCALE = 0.97;
+const SCALE_VARIANTS = new Set<string>(['primary', 'secondary']);
+
 const ButtonComponent: React.FC<ButtonProps> = ({
   onPress,
   children,
@@ -46,6 +50,26 @@ const ButtonComponent: React.FC<ButtonProps> = ({
   testID,
 }) => {
   const theme = useTheme();
+  const scaleAnim = useRef(new Animated.Value(1)).current;
+  const hasScaleFeedback = SCALE_VARIANTS.has(variant);
+
+  const onPressIn = useCallback(() => {
+    if (!hasScaleFeedback) return;
+    Animated.spring(scaleAnim, {
+      toValue: PRESS_SCALE,
+      useNativeDriver: true,
+      ...animation.spring.snappy,
+    }).start();
+  }, [scaleAnim, hasScaleFeedback]);
+
+  const onPressOut = useCallback(() => {
+    if (!hasScaleFeedback) return;
+    Animated.spring(scaleAnim, {
+      toValue: 1,
+      useNativeDriver: true,
+      ...animation.spring.gentle,
+    }).start();
+  }, [scaleAnim, hasScaleFeedback]);
 
   const baseStyles = useMemo((): ViewStyle => {
     const sizeConfig = SIZE_CONFIG[size];
@@ -120,26 +144,35 @@ const ButtonComponent: React.FC<ButtonProps> = ({
   }, [variant, size, theme]);
 
   const defaultHitSlop = variant === 'icon' ? ICON_HIT_SLOP : undefined;
+  const resolvedActiveOpacity = activeOpacity ?? (variant === 'icon' ? 0.7 : 0.8);
 
   return (
-    <TouchableOpacity
-      style={[baseStyles, disabled && { opacity: 0.5 }, style]}
-      onPress={onPress}
-      disabled={disabled}
-      activeOpacity={activeOpacity ?? (variant === 'icon' ? 0.7 : 0.8)}
-      hitSlop={hitSlop ?? defaultHitSlop}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityHint={accessibilityHint}
-      accessibilityRole="button"
-      accessibilityState={{ disabled }}
-      testID={testID}
-    >
-      {iconPosition === 'left' && icon}
-      {children != null && (
-        <Text style={[computedTextStyle, textStyle]}>{children}</Text>
-      )}
-      {iconPosition === 'right' && icon}
-    </TouchableOpacity>
+    <Animated.View style={hasScaleFeedback ? { transform: [{ scale: scaleAnim }] } : undefined}>
+      <Pressable
+        style={({ pressed }) => [
+          baseStyles,
+          disabled && { opacity: 0.5 },
+          pressed && !hasScaleFeedback && { opacity: resolvedActiveOpacity },
+          style,
+        ]}
+        onPress={onPress}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        disabled={disabled}
+        hitSlop={hitSlop ?? defaultHitSlop}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityHint={accessibilityHint}
+        accessibilityRole="button"
+        accessibilityState={{ disabled }}
+        testID={testID}
+      >
+        {iconPosition === 'left' && icon}
+        {children != null && (
+          <Text style={[computedTextStyle, textStyle]}>{children}</Text>
+        )}
+        {iconPosition === 'right' && icon}
+      </Pressable>
+    </Animated.View>
   );
 };
 

package/src/collapsible/Collapsible.tsx

@@ -1,9 +1,17 @@
-import React, { memo, useState } from 'react';
-import { View, Text, TouchableOpacity } from 'react-native';
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { View, Text, TouchableOpacity, Animated, LayoutAnimation, Platform, UIManager } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
+import { animation } from '../styles/tokens';
 import type { CollapsibleProps } from './types';
 
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+const CHEVRON_CLOSED = '0deg';
+const CHEVRON_OPEN = '90deg';
+
 const CollapsibleComponent: React.FC<CollapsibleProps> = ({
   title,
   children,
@@ -15,12 +23,38 @@ const CollapsibleComponent: React.FC<CollapsibleProps> = ({
 }) => {
   const [isOpen, setIsOpen] = useState(defaultOpen);
   const theme = useTheme();
+  const chevronAnim = useRef(new Animated.Value(defaultOpen ? 1 : 0)).current;
+
+  useEffect(() => {
+    Animated.spring(chevronAnim, {
+      toValue: isOpen ? 1 : 0,
+      useNativeDriver: true,
+      ...animation.spring.gentle,
+    }).start();
+  }, [isOpen, chevronAnim]);
+
+  const handleToggle = useCallback(() => {
+    LayoutAnimation.configureNext({
+      duration: animation.duration.normal,
+      update: { type: LayoutAnimation.Types.easeInEaseOut },
+      create: { type: LayoutAnimation.Types.easeInEaseOut, property: LayoutAnimation.Properties.opacity },
+      delete: { type: LayoutAnimation.Types.easeInEaseOut, property: LayoutAnimation.Properties.opacity },
+    });
+    setIsOpen((prev) => !prev);
+  }, []);
+
+  const chevronRotation = chevronAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [CHEVRON_CLOSED, CHEVRON_OPEN],
+  });
 
   return (
     <View style={style} testID={testID}>
       <TouchableOpacity
-        onPress={() => setIsOpen((prev) => !prev)}
+        onPress={handleToggle}
         activeOpacity={0.7}
+        accessibilityRole="button"
+        accessibilityState={{ expanded: isOpen }}
         style={{
           flexDirection: 'row',
           alignItems: 'center',
@@ -29,15 +63,15 @@ const CollapsibleComponent: React.FC<CollapsibleProps> = ({
         }}
       >
         {chevronIcon ?? (
-          <Text
+          <Animated.Text
             style={{
               fontSize: 16,
               color: theme.colors.textSecondary,
-              transform: [{ rotate: isOpen ? '90deg' : '0deg' }],
+              transform: [{ rotate: chevronRotation }],
             }}
           >
             ›
-          </Text>
+          </Animated.Text>
         )}
         <Text
           style={[

package/src/loading/Loading.tsx

@@ -2,6 +2,7 @@ import React, { memo, useEffect, useMemo } from 'react';
 import { View, Text, StyleSheet, type DimensionValue } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
+import { animation } from '../styles/tokens';
 import { SpinnerIcon } from './SpinnerIcon';
 import type {
   LoadingProps,
@@ -108,7 +109,7 @@ const TopLoading: React.FC<TopLoadingProps> = ({
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const translateY = useSharedValue(showLoading ? 0 : -targetHeight);
 
-  const timingConfig = { duration: 250, easing: Easing.out(Easing.cubic) };
+  const timingConfig = { duration: animation.duration.slow, easing: Easing.out(Easing.cubic) };
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {

package/src/skeleton/index.tsx

@@ -1,11 +1,36 @@
-import React from 'react';
-import { View, type ViewStyle, type TextStyle, StyleSheet } from 'react-native';
+import React, { useEffect, useRef } from 'react';
+import { Animated, View, type ViewStyle, type TextStyle, StyleSheet } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
 
-type SkeletonProps = {
-  blend?: boolean;
-};
+const SHIMMER_DURATION = 1500;
+const SHIMMER_MIN_OPACITY = 0.4;
+const SHIMMER_MAX_OPACITY = 1;
+
+function useShimmer() {
+  const opacity = useRef(new Animated.Value(SHIMMER_MAX_OPACITY)).current;
+
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: SHIMMER_MIN_OPACITY,
+          duration: SHIMMER_DURATION / 2,
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacity, {
+          toValue: SHIMMER_MAX_OPACITY,
+          duration: SHIMMER_DURATION / 2,
+          useNativeDriver: true,
+        }),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [opacity]);
+
+  return opacity;
+}
 
 export function Text({
   blend,
@@ -15,6 +40,7 @@ export function Text({
   blend?: boolean;
 }) {
   const { colors } = useTheme();
+  const shimmer = useShimmer();
   const flattened = StyleSheet.flatten(style);
   const width = (flattened as ViewStyle)?.width;
   const lineHeight = (flattened?.lineHeight as number) || 14;
@@ -26,13 +52,13 @@ export function Text({
         { maxWidth: width as number },
         { paddingVertical: lineHeight * 0.15 },
       ]}>
-      <View
+      <Animated.View
         style={[
           styles.textInner,
           {
             backgroundColor: colors.contrast50,
             height: lineHeight * 0.7,
-            opacity: blend ? 0.6 : 1,
+            opacity: Animated.multiply(shimmer, blend ? 0.6 : 1),
           },
         ]}
       />
@@ -52,20 +78,22 @@ export function Circle({
   style?: ViewStyle | ViewStyle[];
 }) {
   const { colors } = useTheme();
+  const shimmer = useShimmer();
+
   return (
-    <View
+    <Animated.View
       style={[
         styles.circle,
         {
           backgroundColor: colors.contrast50,
           width: size,
           height: size,
-          opacity: blend ? 0.6 : 1,
+          opacity: Animated.multiply(shimmer, blend ? 0.6 : 1),
         },
         style,
       ]}>
       {children}
-    </View>
+    </Animated.View>
   );
 }
 
@@ -79,15 +107,17 @@ export function Pill({
   style?: ViewStyle | ViewStyle[];
 }) {
   const { colors } = useTheme();
+  const shimmer = useShimmer();
+
   return (
-    <View
+    <Animated.View
       style={[
         styles.pill,
         {
           backgroundColor: colors.contrast50,
           width: size * 1.618,
           height: size,
-          opacity: blend ? 0.6 : 1,
+          opacity: Animated.multiply(shimmer, blend ? 0.6 : 1),
         },
         style,
       ]}

package/src/styles/tokens.ts

@@ -57,6 +57,27 @@ export const borderRadius = {
   full: 999,
 } as const;
 
+/**
+ * Gradient definitions for icon system.
+ */
+/**
+ * Animation timing and spring tokens.
+ * Centralized values ensure consistent motion across all components.
+ */
+export const animation = {
+  duration: {
+    instant: 100,
+    fast: 150,
+    normal: 200,
+    slow: 300,
+  },
+  spring: {
+    snappy: { friction: 8, tension: 100 },
+    gentle: { friction: 8, tension: 60 },
+    bouncy: { friction: 6, tension: 120 },
+  },
+} as const;
+
 /**
  * Gradient definitions for icon system.
  */

package/src/switch/Switch.tsx

@@ -2,6 +2,7 @@ import React, { memo, useEffect, useRef } from 'react';
 import { Pressable, Animated } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
+import { animation } from '../styles/tokens';
 import type { SwitchProps } from './types';
 
 const TRACK = { default: { w: 44, h: 26 }, sm: { w: 36, h: 22 } } as const;
@@ -19,8 +20,7 @@ const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, Swi
       Animated.spring(anim, {
         toValue: value ? 1 : 0,
         useNativeDriver: false,
-        friction: 8,
-        tension: 60,
+        ...animation.spring.gentle,
       }).start();
     }, [value, anim]);
 
@@ -29,8 +29,7 @@ const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, Swi
       Animated.spring(pressAnim, {
         toValue: 1,
         useNativeDriver: false,
-        friction: 8,
-        tension: 100,
+        ...animation.spring.snappy,
       }).start();
     };
 
@@ -38,8 +37,7 @@ const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, Swi
       Animated.spring(pressAnim, {
         toValue: 0,
         useNativeDriver: false,
-        friction: 8,
-        tension: 60,
+        ...animation.spring.gentle,
       }).start();
     };
 
@@ -79,7 +77,7 @@ const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, Swi
         onPressIn={onPressIn}
         onPressOut={onPressOut}
         style={[{ opacity: disabled ? 0.4 : 1 }, style]}
-        hitSlop={4}
+        hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
         testID={testID}
       >
         <Animated.View