I have a countdown circle timer (split in 2, first one followed by the other) that I can stop/pause with a toggle playing button. I also have and increment and decrement button that affects a counter, that I have been unsuccessfully trying to "relate" to a custom date (that begins the timer).

I want to be able to start the timer at a customizable date (with buttons?).

Here is my working code so far...

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,
  },
});