react-native-circular-timer
Circular Timer component for React Native
NPM
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
GUIDE
Note:- Then, edit
AwesomeProject/App.js
, like this:
;; <Props> { if this_timerRef this_timerRef; }; { return <View style= flex: 1 justifyContent: 'center' alignItems: 'center' backgroundColor: 'white' > <CircularTimer ref= this_timerRef = refs onTimeElapsed= { console; } 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 examplenpm installnpx react-native run-android npx react-native run-ios
GUIDE.
In case of any issue follow theSupported 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