1.0.1 • Published 5 years ago
react-native-circle-timer v1.0.1
React-Native-Circle-Timer
The React Native Native iOS and Android Circle timer or countdown timer which renders the Circular countdown timer with user specific time and colors. This renders the timer with Hours & Minutes within it
See Example.js for example
Install
npm install --save react-native-circle-timerHow to use
This shows the default properties.
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| radius | number | 40 | YES | To change the radius of timer |
| seconds | number | 60 | YES | Set the timer in seconds |
| borderWidth | number | 10 | NO | Border witdth of the timer |
| showSecond | bool | false | NO | Render Elapsed time when set to TRUE |
| borderColor | string | #0E3657 | NO | Set the border color of the timer |
| textStyle | style | null | NO | Render the elapsed time with user cutomization |
| style | style | null | NO | Render the timer with user cutomization |
| circleColor | string | #FFFFFF | NO | Change the color of timer circle |
| borderBackgroundColor | string | #A8C3BC | NO | Color of the left time in Timer |
| onTimeElapsed | funtion | null | NO | Called when the timer is finished |
import React, { View } from 'react-native';
import CircleTimer from 'react-native-circle-timer';
class ComponentClass extends React.Component {
constructor(props) {
super();
}
render() {
return (
<View
style={{backgroundColor: "#06566e", justifyContent: 'center', alignItems: 'center', flex: 1}}>
<CircleTimer
radius={80}
borderWidth={10}
seconds={1800}
borderColor={'#F5F5F5'}
borderBackgroundColor={"#FF0000"}
onTimeElapsed={() => {
console.log('Timer Finished!');
}}
showSecond={true}
/>
</View>
)
}
}