React Native Countdown Component

A customizable countdown component for React Native applications. This component provides a flexible and customizable countdown timer with support for days, hours, minutes, and seconds.

Preview

Basic Countdown

Custom Styled Countdown

Features

• Customizable time units (Days, Hours, Minutes, Seconds)
• Configurable digit and label styles
• Support for separators between time units
• Background state handling
• TypeScript support
• Flexible styling options

Installation

# Using npm
npm install react-native-countdown-eggmun
# Using yarn
yarn add react-native-countdown-eggmun

Usage

importReactfrom'react';import{View}from'react-native';importCountDownfrom'react-native-countdown-eggmun';constApp=()=>{return(<View><CountDownuntil={3600}// secondsonFinish={()=>console.log('Countdown finished!')}size={20}timeToShow={['H','M','S']}timeLabels={{h: 'Hours',m: 'Minutes',s: 'Seconds'}}/></View>);};

Props

Prop	Type	Default	Description
until	number	required	Number of seconds to count down
onChange	(until: number) => void	-	Callback when countdown changes
onFinish	() => void	-	Callback when countdown finishes
onPress	() => void	-	Callback when countdown is pressed
running	boolean	true	Whether the countdown is running
size	number	15	Size of the digits
digitStyle	object	{ backgroundColor: '#FAB913' }	Style for the digit container
digitTxtStyle	object	{ color: '#000' }	Style for the digit text
timeLabelStyle	object	{ color: '#000' }	Style for the time labels
separatorStyle	object	{ color: '#000' }	Style for the separator
timeToShow	string[]	['D', 'H', 'M', 'S']	Which time units to show
showSeparator	boolean	false	Whether to show separators between time units
timeLabels	object	{ d: 'Days', h: 'Hours', m: 'Minutes', s: 'Seconds' }	Labels for time units

Complete Example

importReactfrom'react';import{View,StyleSheet}from'react-native';importCountDownfrom'react-native-countdown-eggmun';constExample=()=>{return(<Viewstyle={styles.container}><CountDownuntil={86400}// 24 hourssize={25}timeToShow={['D','H','M','S']}timeLabels={{d: 'Days',h: 'Hours',m: 'Minutes',s: 'Seconds'}}digitStyle={{backgroundColor: '#1B5E20'}}digitTxtStyle={{color: '#fff'}}timeLabelStyle={{color: '#1B5E20'}}separatorStyle={{color: '#1B5E20'}}showSeparatoronFinish={()=>console.log('Countdown finished!')}style={styles.countdown}/></View>);};conststyles=StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#fff',},countdown: {padding: 20,},});exportdefaultExample;

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.