Skip to content

meharbhutta/react-native-circular-timer

Repository files navigation

react-native-circular-timer

Circular Timer component for React Native

follow on Twitter

NPM

  • stable release version: version
  • package downloads: downloads
  • MIT license

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