Can I integrate two timers in the same one?

I’m using the react-countdown-circle-timer snack example provided. With it, I want to have two timers … Read more Can I integrate two timers in the same one?

I’m using the react-countdown-circle-timer snack example provided. With it, I want to have two timers in one, or one after the other in an unlimited sequence.

What I mean is to have the first timer count (and when it finishes) followed by a second timer (different time/colour) and then the first one again switching indefinitely.

import * as React from 'react';
import { Text, View, StyleSheet, Animated, Button } from 'react-native';
import Constants from 'expo-constants';
import { CountdownCircleTimer } from 'react-native-countdown-circle-timer';


export default function App() {
  const [isPlaying, setIsPlaying] = React.useState(true)
  return (
    <View style={styles.container}>
      <CountdownCircleTimer
        isPlaying={isPlaying}
        duration={10}                  // could I have 2 different durations here??
        colors={[
          ['#FFFF00', 0.4],               //Colour 1
          ['#0000ff', 0.4],               //Colour 2
        ]}
        onComplete={() => [true]}
    >
      {({ remainingTime, animatedColor }) => (
        <Animated.Text style={{ color: animatedColor, fontSize: 40 }}>
          {remainingTime}
        </Animated.Text>
      )}
    </CountdownCircleTimer>
    <Button title="Toggle Playing" onPress={() => setIsPlaying(prev => !prev)}/>
  </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  }
});

Source: JavaSript – Stack Overflow



Leave a Reply

Your email address will not be published. Required fields are marked *