Start countdown timer at another date

JavaScript
1

I have a countdown circle timer (split in 2, first one followed by the other) that I can stop/pause. I am trying to add an initial (& custom) starting date to the timer but I can’t.

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

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.