How to make a countdown timer in react native? - react-native

Question

I have to make a countdown timer in an react-native app but i dont know how, i already looked it up and and found some librarys such as react-native-countdown component but it didnt worked as id like, and got some other solutions like setInterval but i dont know how to implement it in my code and make it display on the screen as in the images below:
The time goes from 00:00 to 60:00 (MM:SS) as the user slides the bar, that changes the number 05:00 by 05:00, ive already done that but with a static number, i couldnt make it countdown.
Heres how my code is looking right now:
import { useNavigation } from '#react-navigation/core';
import React, { useEffect, useState } from 'react';
import { SafeAreaView, Text, Image, TouchableOpacity, StyleSheet, Dimensions, TextInput, KeyboardAvoidingView, Platform, View } from 'react-native';
import Slider from '#react-native-community/slider';
import CountDown from 'react-native-countdown-component';
import abacatezinImg from '../assets/abacatezinin.png';
import botaoStop from '../assets/botaoStop.png';
import botaoPlay from '../assets/botaoPlay.png';
export function Timer(){
const [range, setRange] = useState('0');
const [sliding, setSliding] = useState('Inactive');
const [isSecureEntry,setIsSecureEntry]=useState(true);
const navigation = useNavigation<any>();
function handleQuit(){
navigation.navigate('Quit');
}
if(isSecureEntry){
return(
<SafeAreaView style={styles.container}>
<Text style={styles.texto}>{range}</Text>
<View style={styles.container2}>
<Slider
style={styles.slider}
minimumValue={0}
maximumValue={60}
minimumTrackTintColor='#7E9F70'
maximumTrackTintColor='#A7C99A'
thumbImage={abacatezinImg}
value={30}
onValueChange={value => setRange(parseInt(value) + ':00')}
onSlidingStart={() => setSliding('Sliding')}
onSlidingComplete={() => setSliding('Inactive')}
step={5}
/>
<TouchableOpacity onPress={() =>{
setIsSecureEntry((prev)=> !prev)
}}>
<Image source={botaoPlay} style={styles.bPlay}/>
</TouchableOpacity>
</View>
</SafeAreaView>
);
}
else{
return(
<SafeAreaView style={styles.container}>
<Text style={styles.texto}>{range}</Text>
<View style={styles.container3}>
<TouchableOpacity onPress={handleQuit}>
<Image source={botaoStop} style={styles.bStop}/>
</TouchableOpacity>
</View>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container:{
flex: 1,
alignItems: 'center',
justifyContent: 'flex-start',
},
container2:{
backgroundColor: '#E4F0E2',
alignItems: 'center',
justifyContent: 'space-between',
flexDirection: 'row',
borderRadius: 100,
width: 327,
height: 66,
paddingHorizontal: 19,
marginTop: 20,
},
container3:{
alignItems: 'center',
justifyContent:'space-between',
marginTop: 20,
},
slider:{
width: 209,
height: 50,
transform: [{scaleY: 4}]
},
bPlay:{
width: 50,
height: 50,
},
bStop:{
width: 66,
height: 66,
},
texto:{
fontWeight: '300',
fontSize: 58,
lineHeight: 87,
letterSpacing: 0.03,
color: '#1B3810',
},
})
If anyone has any idea how to make it Id appreciate the help

Answer 1

Hooks(using useEffect) to countdown using setInterval in react - native:
const [timerCount, setTimer] = useState(60)
useEffect(() => {
let interval = setInterval(() => {
setTimer(lastTimerCount => {
if (lastTimerCount == 0) {
//your redirection to Quit screen
} else {
lastTimerCount <= 1 && clearInterval(interval)
return lastTimerCount - 1
}
})
}, 1000) //each count lasts for a second
//cleanup the interval on complete
return () => clearInterval(interval)
}, []);
use the state variable timerCount as:
<Text>{timerCount}</Text>