diff --git a/src/components/Global/helpers/switch-with-label.tsx b/src/components/Global/helpers/switch-with-label.tsx index 0f09bf18..e4f5c3fa 100644 --- a/src/components/Global/helpers/switch-with-label.tsx +++ b/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 ( @@ -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'} > diff --git a/src/hooks/use-haptic-feedback.ts b/src/hooks/use-haptic-feedback.ts index 4ec5c96b..04f12525 100644 --- a/src/hooks/use-haptic-feedback.ts +++ b/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