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