meharbhutta/react-native-circular-timer

Circular Timer component for React Native

react-native-circular-timer

Circular Timer component for React Native

NPM

• stable release version:
• package downloads:
• 

Show Case

Getting Started

Installation

npm i react-native-circular-timer --save

Basic Usage

• Initialization of a react-native project

$ npx react-native init AwesomeProject

Note: GUIDE

• Then, edit AwesomeProject/App.js, like this:

import { View } from 'react-native';
import CircularTimer from 'react-native-circular-timer';

export default class App extends Component<Props> {
  _restartTimer = () => {
    if (this._timerRef) this._timerRef.restart();
  };

  render() {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'white'
        }}
      >
        <CircularTimer
          ref={refs => (this._timerRef = refs)}
          onTimeElapsed={() => {
            console.log('Timer Finished!');
          }}
          showSecond={true}
        />
        <TouchableOpacity
          onPress={this._restartTimer}
          style={{
            marginTop: 20,
            borderRadius: 6,
            backgroundColor: '#000000'
          }}
        >
          <Text
            style={{
              padding: 16,
              fontSize: 18,
              color: 'white',
              fontWeight: 'bold'
            }}
          >
            Restart Timer
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

Props

parameter	type	required	description	default
seconds	number	yes	Time in seconds
radius	number	yes	Radius of the circle
showSecond	boolean	no	To show the sec keyword with timer	false
borderWidth	number	no	The border width of the circle	10
borderColor	string	no	The color of the border	"#0E3657"
borderBackgroundColor	string	no	The background color of the border	"#A8C3BC"
circleColor	string	no	The color of the circle	"#FFF"
style	object	no	To apply style to the timer
textStyle	object	no	To override the text style	default
secondStyle	object	no	To override the second style	default
onTimeElapsed	function	no	Callback for the timer end	() => {}

Methods

method	description
restart	To restart the timer again

Note:

Firstly, you need to create reference of the component and then call the restart method using that reference GUIDE.

To run example

cd example
npm install
npx react-native run-android (For android)
npx react-native run-ios (For ios)

In case of any issue follow the GUIDE.

Supported React Native Versions

This project aims to support any version of React Native.

If you require new features or bug fixes for older versions you can fork this project.

Credits

The idea for this modules came from MrToph react-native-countdown-circle package.

Licenses

CircularTimer - MIT © MeharBhutta

react-native-circular-timer's Issues

Timer restart counts down in steps of 2s

@meharbhutta I implemented the restart that you suggested in the previous issue (thanks for that) but in a slightly different way. Rather than have a button to restart the counter, I used the onTimeElapsed callback to restart it.
However, on restart, the timer counts down in steps of 2s i.e. if my duration was set at 5 secs, on restart, it counts down as "5...3...1", if 6 secs were set "6...4...2".
Have you encountered this? Or do you know where this stems from?

Below is the component that implements the timer

const Timer = ({ time, onTimeElapsed }) => {
  _restartTimer = () => {
    if (this._timerRef) {
      this._timerRef.restart();
    }
  };

  return (
    <View>
      <CircularTimer
        ref={refs => (this._timerRef = refs)}
        seconds={time}
        showSecond={true}
        radius={50}
        borderWidth={5}
        borderBackgroundColor='#f7f7f7'
        textStyle={{ fontSize: 20 }}
        onTimeElapsed={() => {
          onTimeElapsed();
          this._restartTimer();
        }}
      />
    </View>
  );
}

export default Timer;

Error Stopping the Timer

I have used this plugin successfully for a while now.

I just changed my laptop and deployed my project again on a new one.

The project uses Circular Timer. It was working perfectly. Now whenever I the timer ends, I am getting the following error
this._timerRef.stop is not a function

I am on
react-native-cli: 2.0.1
react-native: 0.58.6

Nothing changed in the code.

Implementation for the restart() method

Awesome library here @meharbhutta.
However, I have searched for an implementation of the restart() method to no avail.
Could you kindly provide one? Most probably in the documentation so that someone else could find it.

Timer Easing Not Working

Hi, the timer animation is not showing, instead the entire background fills once 40% of the designated time is reached. I tried the examples provided and made various changes without success.