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