how can i modify my hook so i can use in on a press event i’m new to custom hooks here is the hook import { useState, useEffect, useCallback } from ‘react’;
import { Alert } from ‘react-native’;
import { NavigationProp, } from ‘@react-navigation/native’;
type UseValidationCodeReturn = {
startValidation: () => void;`your text`
validateCode: (inputCode: string) => void;
};
const useValidationCode = (generateCode: () => string, timeout: number = 120000,{ navigation }: { navigation: NavigationProp<any> }): UseValidationCodeReturn => {
const [code, setCode] = useState<string>('');
const [isCodeValid, setIsCodeValid] = useState<boolean>(false);
const [timer, setTimer] = useState<NodeJS.Timeout | null>(null);
const startValidation = useCallback(() => {
const newCode = generateCode();
setCode(newCode);
setIsCodeValid(true);
Alert.alert(
'Reset Password',
`This is your Validation code ${newCode}. You have 2 mins to enter it.`,
[{ text: 'Understood' }]
);
const newTimer = setTimeout(() => {
setIsCodeValid(false);
setCode('');
Alert.alert('Reset Password', 'Time is up, the code is invalid. Please request a new code.', [
{ text: 'Okay' },
]);`your text`
}, timeout);
setTimer(newTimer);
return () => clearTimeout(newTimer);
}, [generateCode, timeout]);
const validateCode = useCallback(
(inputCode: string) => {
if (isCodeValid && inputCode === code) {
if (timer) {
clearTimeout(timer);
}
navigation.navigate('Reset_Password' );
} else {
Alert.alert('Invalid Code', 'The code you entered is incorrect. Please try again.', [
{ text: 'Okay' },
]);
}
},
[code, isCodeValid, navigation, timer]
);
useEffect(() => {
return () => {
if (timer) {
clearTimeout(timer);
}
};
}, [timer]);
return { startValidation, validateCode };
};
export default useValidationCode;
it is hook a that allows navigation to a reset password screen once the correct code is entered
New contributor
oussema Ladheri is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.