Animated SVG progress ring timer for React Native.
npm install @rific/timer react-native-svgimport { Timer } from '@rific/timer'
import { Text } from 'react-native'
const [started, setStarted] = useState<string | null>(null)
<Timer
color='#6200ee'
duration={30}
radius={28}
started={started}
onStart={() => console.log('started')}
onStop={() => setStarted(null)}
>
<Text>30s</Text>
</Timer>
<Button title='Start' onPress={() => setStarted(new Date().toISOString())} />| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
color |
string |
✓ | — | Stroke color of the progress ring |
duration |
number |
✓ | — | Timer duration in seconds |
radius |
number |
✓ | — | Radius of the SVG ring in pixels |
started |
string | null |
✓ | — | ISO timestamp when the timer started; null to stop |
children |
ReactNode |
undefined |
Rendered in the center of the ring | |
onStart |
() => void |
undefined |
Called when the timer starts | |
onStop |
() => void |
undefined |
Called when the timer reaches 100% | |
startProgress |
number |
0 |
Starting progress (0–1) | |
style |
ViewStyle |
undefined |
Style applied to the container | |
width |
number |
6 |
Stroke width of the ring |
Pass an ISO timestamp string to started to begin the countdown. Set started to null to reset. The ring animates from empty to full over duration seconds and calls onStop on completion.
react >= 17.0.0react-native >= 0.70.0react-native-svg >= 13.0.0