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

import React from 'react';
import { View } from 'react-native';
import CountDown from 'react-native-countdown-eggmun';

const App = () => {
  return (
    <View>
      <CountDown
        until={3600} // seconds
        onFinish={() => 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

import React from 'react';
import { View, StyleSheet } from 'react-native';
import CountDown from 'react-native-countdown-eggmun';

const Example = () => {
  return (
    <View style={styles.container}>
      <CountDown
        until={86400} // 24 hours
        size={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' }}
        showSeparator
        onFinish={() => console.log('Countdown finished!')}
        style={styles.countdown}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  countdown: {
    padding: 20,
  },
});

export default Example;

License

MIT

Contributing

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