React Native CountDown Timer | react-native-countdown-component

React Native Countdown Timer

This is an example of React Native Countdown Timer using react-native-countdown-component. A CountDown Timer is the reverse of the timer we usually see.  To make a CountDown Timer we will use CountDown component from react-native-countdown-component.

Countdown Timer can be used if you are making an App which has some time constraints like if you are making a quiz App, You need some sort of timer to show the remaining time. Let’s see the example below.

How to Make a Countdown Timer?

<CountDown
  until={this.state.totalDuration}
  //duration of countdown in seconds
  timetoShow={('H', 'M', 'S')}
  //formate to show
  onFinish={() => alert('finished')}
  //on Finish call
  onPress={() => alert('hello')}
  //on Press call
  size={20}
/>

In our example, we will make a CountDown Timer which will show the Count Down from the Expiry DateTime to the Current DateTime. If you want to make a simple quiz app using this you can directly pass the time for the CountDown Timer in seconds. We have used a library called moment which is very helpful if you are playing around the Date and Time.

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run

npm install -g react-native-cli

Run the following commands to create a new React Native project

react-native init ProjectName

If you want to start a new project with a specific React Native version, you can use the --version argument:

react-native init ProjectName --version X.XX.X
react-native init ProjectName --version react-native@next

This will make a project structure with an index file named App.js in your project directory.

Installation of Dependencies

To install dependencies open the terminal and jump into your project

cd ProjectName

1. To use CountDown you need to install react-native-countdown-component dependency.

To install this run the following command

npm install react-native-countdown-component --save

2. To use moment you need to install moment.

To install this run the following command

npm install moment --save

These commands will copy all the dependencies into your node_module directory. –save is optional, it is just to update the react-native-countdown-component and moment dependencies in your package.json file.

Code

Now Open App.js in any code editor and replace the code with the following code

App.js

/*This is an example of CountDown Timer*/
import React, { Component } from 'react';
//import React in our project
import { View } from 'react-native';
//import all the component we need in our project
import CountDown from 'react-native-countdown-component';
//import CountDown to show the timer
import moment from 'moment';
//import moment to help you play with date and time

export default class App extends Component {
  constructor(props) {
    super(props);
    //initialize the counter duration
    this.state = {
      totalDuration: 0,
    };
  }
  componentDidMount() {
    var that = this;
    //We are showing the coundown timer for a given expiry date-time
    //If you are making a quize type app then you need to make a simple timer
    //which can be done by using the simple like given below
    //that.setState({ totalDuration: 30 }); //which is 30 sec
    var date = moment()
      .utcOffset('+05:30')
      .format('YYYY-MM-DD hh:mm:ss');
    //Getting the current date-time with required formate and UTC   
    var expirydate = '2018-08-23 04:00:45';//You can set your own date-time
    //Let suppose we have to show the countdown for above date-time 
    var diffr = moment.duration(moment(expirydate).diff(moment(date)));
    //difference of the expiry date-time given and current date-time
    var hours = parseInt(diffr.asHours());
    var minutes = parseInt(diffr.minutes());
    var seconds = parseInt(diffr.seconds());
    var d = hours * 60 * 60 + minutes * 60 + seconds;
    //converting in seconds
    that.setState({ totalDuration: d });
    //Settign up the duration of countdown in seconds to re-render
  }
  render() {
    console.log(this.state.totalDuration);
    return (
      <View style={{ flex: 1, justifyContent: 'center' }}>
        <CountDown
          until={this.state.totalDuration}
          //duration of countdown in seconds
          timetoShow={('H', 'M', 'S')}
          //formate to show
          onFinish={() => alert('finished')}
          //on Finish call
          onPress={() => alert('hello')}
          //on Press call
          size={20}
        />
      </View>
    );
  }
}

To Run the React Native App

Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running
react-native run-ios (macOS only).

Output Screenshots

Android

IOS

 

Output in Online Emulator

That was the React Native Count Down Timer. If you have any doubts or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂


Related Posts

5 thoughts on “React Native CountDown Timer | react-native-countdown-component”

    • Hey hi Tarik, Thank you for the appreciation. CountDown used in this example is an imported component form the react-native-countdown-component library. Do you want to add `:` in between or want to show the time?

      Reply
    • You can use setInterval for that. You can set the interval parallel to the countdown timer and can clear the interval using onFinish={() => alert(‘finished’)} as countdown is finished.

      Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.