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',
    },
})

License

This project is released under the MIT License.