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 Cases
Getting Started
Installation
npm i react-native-circular-timer --saveBasic Usage
- Install react-native-cli first
$ npm install -g react-native-cliNote: GUIDE
- Initialization of a react-native project
$ react-native init AwesomeProject- 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> {
render() {
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white'
}}
>
<CircularTimer
onTimeElapsed={() => {
console.log('Timer Finished!');
}}
/>
</View>
);
}
}Props
| parameter | type | required | description | default |
|---|---|---|---|---|
| seconds | number | yes | Time in seconds | |
| radius | number | yes | Radius of the circle | |
| 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 | default |
| textStyle | object | no | To override the text style | default |
| onTimeElapsed | function | no | Callback for the timer end | () => {} |
To run example
cd example
npm install
react-native run-android (For android)
react-native run-ios (For ios)