/Javascript/React/React native countdown

React native countdown

Count down timer in react native

// isResendEnable is just my custom variable to check if i have enabled 
// resend function in my otp box
  const [timerCount, setTimer] = useState(20);
  const [activator, setActivator] = useState(Math.random());
  useEffect(() => {
    let interval;
    if (isResendEnable) {
      interval = setInterval(() => {
        if (timerCount > 0) {
          setTimer(lastTimerCount => {
            lastTimerCount <= 1 && clearInterval(interval);
            return lastTimerCount - 1;
          });
        }
      }, 1000);
    }

    return () => {
      if (isResendEnable) {
        clearInterval(interval);
      }
    };
  }, [activator]);
  
  return <Text> Resend in {timerCount} sec </Text>

React native countdown

import CountDown from 'react-native-countdown-component'; render() {    return (      <CountDown        size={30}        until={1000}        onFinish={() => alert('Finished')}        digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}        digitTxtStyle={{color: '#1CC625'}}        timeLabelStyle={{color: 'red', fontWeight: 'bold'}}        separatorStyle={{color: '#1CC625'}}        timeToShow={['H', 'M', 'S']}        timeLabels={{m: null, s: null}}        showSeparator      />    )}

-1

Source: npmjs.com

Similar codes

11 votes413 views4 answers
Prototype react
Javascript React
63 votes353 views6 answers
React router install
Javascript React
11 votes349 views3 answers
React Hook "useState" is called in function "cardState" which is neither a React function component or a custom React Hook function
Javascript React
5 votes351 views4 answers
Google map in react js
Javascript React
0 vote323 views1 answer
Ctx beginpath react
Javascript React
0 vote414 views1 answer
Header logo react native img
Javascript React
0 vote396 views1 answer
React-native-safe-area-context
Javascript React
0 vote369 views1 answer
React native run on a particular emu
Javascript React
0 vote379 views1 answer
Publish reactjs package to gitlab repository
Javascript React
0 vote380 views1 answer
Jest mock react router params
Javascript React