Merge branch 'main' into dependabot/npm_and_yarn/prettier-3.8.1

src/components/Global/helpers/switch-with-label.tsx

@@ -1,8 +1,6 @@
 import { SizeTokens, XStack, Separator, Switch, styled, getToken } from 'tamagui'
 import { Label } from './text'
-import { useEffect } from 'react'
-import { usePreviousValue } from '../../../hooks/use-previous-value'
-import useHapticFeedback from '../../../hooks/use-haptic-feedback'
+import { triggerHaptic } from '../../../hooks/use-haptic-feedback'
 
 interface SwitchWithLabelProps {
 	onCheckedChange: (value: boolean) => void
@@ -20,15 +18,10 @@ const JellifySliderThumb = styled(Switch.Thumb, {
 export function SwitchWithLabel(props: SwitchWithLabelProps) {
 	const id = `switch-${props.size.toString().slice(1)}-${props.checked ?? ''}}`
 
-	const previousChecked = usePreviousValue(props.checked)
-
-	const trigger = useHapticFeedback()
-
-	useEffect(() => {
-		if (previousChecked !== props.checked) {
-			trigger('impactMedium')
-		}
-	}, [props.checked])
+	const handleCheckedChange = (checked: boolean) => {
+		triggerHaptic('impactMedium')
+		props.onCheckedChange(checked)
+	}
 
 	return (
 		<XStack alignItems='center' gap='$3'>
@@ -36,7 +29,7 @@ export function SwitchWithLabel(props: SwitchWithLabelProps) {
 				id={id}
 				size={props.size}
 				checked={props.checked}
-				onCheckedChange={(checked: boolean) => props.onCheckedChange(checked)}
+				onCheckedChange={handleCheckedChange}
 				backgroundColor={props.checked ? '$success' : '$borderColor'}
 				borderColor={'$borderColor'}
 			>

src/hooks/use-haptic-feedback.ts

@@ -1,16 +1,20 @@
 import { HapticFeedbackTypes, trigger } from 'react-native-haptic-feedback'
-import { useReducedHapticsSetting } from '../stores/settings/app'
+import { useAppSettingsStore } from '../stores/settings/app'
 
-const useHapticFeedback: () => (
-	type?: keyof typeof HapticFeedbackTypes | HapticFeedbackTypes,
-) => void = () => {
-	const [reducedHaptics] = useReducedHapticsSetting()
-
-	return (type?: keyof typeof HapticFeedbackTypes | HapticFeedbackTypes) => {
-		if (!reducedHaptics) {
-			trigger(type)
-		}
+/**
+ * Triggers haptic feedback if the user hasn't enabled "Reduce Haptics" setting.
+ * Reads directly from Zustand store - no hook needed, stable reference, works anywhere.
+ */
+export function triggerHaptic(type?: keyof typeof HapticFeedbackTypes | HapticFeedbackTypes): void {
+	const reducedHaptics = useAppSettingsStore.getState().reducedHaptics
+	if (!reducedHaptics) {
+		trigger(type)
 	}
 }
 
+/**
+ * @deprecated Use triggerHaptic() directly instead - it's not a hook anymore
+ */
+const useHapticFeedback = () => triggerHaptic
+
 export default useHapticFeedback