diff --git a/src/components/features/NotificationToggleBox.tsx b/src/components/features/NotificationToggleBox.tsx index f4917cd38..126397159 100644 --- a/src/components/features/NotificationToggleBox.tsx +++ b/src/components/features/NotificationToggleBox.tsx @@ -1,4 +1,5 @@ -import {useCallback, useEffect, useState} from 'react' +import {useFocusEffect} from '@react-navigation/native' +import {useCallback, useEffect, useRef, useState} from 'react' import {Box} from '@/components/ui/containers/Box' import {Notice} from '@/components/ui/feedback/Notice' import {Switch} from '@/components/ui/forms/Switch' @@ -48,21 +49,32 @@ export const NotificationToggleBox = ({ const accessibilityAnnounce = useAccessibilityAnnounce() const {registerDeviceIfPermitted} = useRegisterDevice() const [isValueChanged, setIsValueChanged] = useState(false) - const onChangeFn = useCallback(() => { - setIsValueChanged(true) + const retryChangeOnFocusRef = useRef(false) - if (value) { - onChange(false) - } else { - void registerDeviceIfPermitted(true).then(hasPermission => { - if (hasPermission) { - onChange(true) - } else { - navigateToInstructionsScreen() - } - }) - } - }, [onChange, value, registerDeviceIfPermitted, navigateToInstructionsScreen]) + const onChangeFn = useCallback( + (handler: 'onFocus' | 'onPress') => { + setIsValueChanged(true) + + if (value) { + onChange(false) + } else { + void registerDeviceIfPermitted(true) + .then(hasPermission => { + if (hasPermission) { + onChange(true) + retryChangeOnFocusRef.current = false + } else if (handler === 'onPress') { + navigateToInstructionsScreen() + retryChangeOnFocusRef.current = true + } else { + retryChangeOnFocusRef.current = false + } + }) + .catch(() => (retryChangeOnFocusRef.current = false)) + } + }, + [onChange, value, registerDeviceIfPermitted, navigateToInstructionsScreen], + ) useEffect(() => { if (isValueChanged) { @@ -70,6 +82,14 @@ export const NotificationToggleBox = ({ } }, [accessibilityAnnounce, isValueChanged, value]) + useFocusEffect( + useCallback(() => { + if (retryChangeOnFocusRef.current) { + onChangeFn('onFocus') + } + }, [onChangeFn]), + ) + return ( } loading={loading} - onChange={onChangeFn} + onChange={() => { + onChangeFn('onPress') + }} testID={`${testID}Switch`} value={value} wrapper={Wrapper}