Package Exports

react-native-circular-timer

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-circular-timer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.