Tengo un temporizador circular de cuenta regresiva (dividido en 2, primero uno seguido por el otro) que puedo detener/pausar con un botón de alternancia. También tengo un botón de incremento y disminución que afecta a un contador, que he estado tratando sin éxito de "relacionar" con una fecha personalizada (que inicia el temporizador).

Quiero poder iniciar el temporizador en una fecha personalizable (¿con botones?).

Aquí está mi código de trabajo hasta ahora ...

 import * as React from 'react'; import { useState } from 'react'; import { Text, View, StyleSheet, Animated, Button, TouchableOpacity, SafeAreaView } from 'react-native'; import Constants from 'expo-constants'; import { CountdownCircleTimer } from 'react-native-countdown-circle-timer'; const duration = [15, 6]; export default function App() { const [isPlaying, setIsPlaying] = React.useState(true); const [timeIndex, setTimeIndex] = React.useState(0); const [count, setCount] = useState(0); return ( <View style={styles.container}> <CountdownCircleTimer key={timeIndex} isPlaying={isPlaying} duration={duration[timeIndex]} colors={[ ['#FFFF00', 0.4], ['#0000ff', 0.4], ]} onComplete={() => { setTimeIndex((index) => { let newIndex = index + 1; if (newIndex >= duration.length) { newIndex = 0; } return newIndex; }); return [true]; }}> {({ remainingTime, animatedColor }) => ( <Animated.Text style={{ color: animatedColor, fontSize: 40 }}> {remainingTime} </Animated.Text> )} </CountdownCircleTimer> <Button title="Toggle Playing" onPress={() => setIsPlaying((prev) => !prev)} /> <Text>Counter: {count}</Text> <View style={styles.buttons}> <TouchableOpacity onPress={() => setCount(currentValue => currentValue + 1)}> <Text>Increment</Text> </TouchableOpacity> <TouchableOpacity onPress={() => setCount(currentValue => currentValue - 1)}> <Text>Decrement</Text> </TouchableOpacity> </View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', paddingTop: Constants.statusBarHeight, backgroundColor: '#ecf0f1', padding: 8, }, });