1.0.3 • Published 2 years ago
react-native-progress-timer v1.0.3
react-native-progress-timer
React Native Timer component with progress indicator
Installation
$ npm install --save react-native-progress react-native-svg @react-native-community/art react-native-progress-timer
Usage
import Timer from 'react-native-progress-timer';
<Timer
remainingTime={10}
size={350}
showsText={true}
animated={true}
direction={'counter-clockwise'}
borderColor={'#d9dcdd'}
borderWidth={3}
thickness={5}
color={'#faac02'}
style={options.style}
textStyle={options.textStyle}
options={options}
></Timer>Properties for Options
| Prop | Description | Default |
|---|---|---|
view | Style for Container | {flexDirection: 'row', justifyContent: 'space-between', margin: 10} |
highlight | Style for Touchable Highlight component | {backgroundColor: '#ffffff'} |
play | Style for Play component | {underlayColor: '#ffffff',borderColor: '#d9dcdd',textStyle:{color: '#000000'},style: {backgroundColor: '#ffffff'}} |
cancel | Style for Cancel component | {underlayColor: '#ffffff',borderColor: '#d9dcdd',textStyle:{color: '#000000'},style: {backgroundColor: '#ffffff'}} |
Properties for Timer Component (for more information refer to react-native-progress)
| Prop | Description | Default |
|---|---|---|
animated | Whether or not to animate changes to progress. | true |
indeterminate | If set to true, the indicator will spin and progress prop will be ignored. | false |
indeterminateAnimationDuration | Sets animation duration in milliseconds when indeterminate is set. | 1000 |
color | Fill color of the indicator. | rgba(0, 122, 255, 1) |
unfilledColor | Color of the remaining progress. | None |
borderWidth | Width of outer border, set to 0 to remove. | 1 |
borderColor | Color of outer border. | color |
size | Diameter of the circle. | 350 |
endAngle | Determines the endAngle of the circle. A number between 0 and 1. The final endAngle would be the number multiplied by 2π | 0.9 |
thickness | Thickness of the inner circle. | 3 |
showsText | Whether or not to show a text representation of current progress. | true |
textStyle | Styles for progress text, defaults to a same color as circle and fontSize proportional to size prop. | { color: '#000000'} |
allowFontScaling | Whether or not to respect device font scale setting. | true |
direction | Direction of the circle clockwise or counter-clockwise. | clockwise |
strokeCap | Stroke Cap style for the circle butt, square or round. | butt |
fill | Fill color of the inner circle. | None (transparent) |
remainingTime | Timer countdown - Mandatory | 0 |
hideCancelCircle | Hide cancel circle | false |
textCancelCircle | Cancel circle text | Cancel |
sizeCancelCircle | Cancel circle size | 100 |
underlayColorCancelCircle | Cancel circle underlay color Mandatory | #ffffff |
hideStartCircle | Hide start circle | false |
textStartCircle | Start circle text | Start |
sizeStartCircle | Start circle size | 100 |
underlayStartCancelCircle | Cancel circle underlay color | #ffffff |
Example
import React from 'react'
import { SafeAreaView, StyleSheet, View } from 'react-native'
import Timer from 'react-native-progress-timer'
const App: () => React$Node = () => {
return (
<>
<SafeAreaView>
<View style={styles.body}>
<Timer
remainingTime={10}
size={350}
showsText={true}
animated={true}
direction={'counter-clockwise'}
borderColor={'#d9dcdd'}
borderWidth={3}
thickness={5}
color={'#faac02'}
style={options.style}
textStyle={options.textStyle}
></Timer>
</View>
</SafeAreaView>
</>
)
}
const options = {
style: {
margin: 'auto',
},
textStyle: {
color: '#000000',
},
view: {
flexDirection: 'row',
justifyContent: 'space-between',
margin: 10,
},
highlight: {
backgroundColor: '#ffffff',
},
play: {
underlayColor: '#ffffff',
borderColor: '#d9dcdd',
textStyle: {
color: '#000000',
},
style: {
backgroundColor: '#ffffff',
},
},
cancel: {
underlayColor: '#ffffff',
borderColor: '#d9dcdd',
textStyle: {
color: '#000000',
},
style: {
backgroundColor: '#ffffff',
},
},
}
const styles = StyleSheet.create({
scrollView: {
backgroundColor: Colors.lighter,
},
body: {
backgroundColor: Colors.white,
alignItems: 'center',
alignContent: 'center',
},
})