Example of React Native Countdown Component Timer

Hello friends, In today’s tutorial we would learn about Countdown timer component in react native. We have all seen countdown timer in our mobile apps, Where after a certain given time we can fire a Event or function and does some work. This timer also does the same but it comes in very beautiful look. Now many of us thinks, How we can use this timer in our mobile application, So we have seen sometimes when a company or individual starts a new application or website then they have sometimes given us a Timer. When this timer finished then automatically new application would appear on screen. So in this tutorial we would learn about Example of React Native Countdown Component Timer.

Contents in this project Example of React Native Countdown Component Timer :-

1. First of all we have to install the React Native Countdown Component Timer in our current react native application. So open your App’s main Root directory in CMD in windows and Terminal in MAC and execute below command

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

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

yarn add react-native-countdown-component

1	yarn add react-native-countdown-component

Screenshots :-

2. Now the Countdown timer package has installed. Next step is to start coding for the application. So open your project’s main App.js file and import Alert, SafeAreaView, StyleSheet, Text, View and CountDown from ‘react-native-countdown-component‘.

import React from "react";

import { Alert, SafeAreaView, StyleSheet, Text, View } from 'react-native';

import CountDown from 'react-native-countdown-component';

import React from "react";

import { Alert, SafeAreaView, StyleSheet, Text, View } from 'react-native';

import CountDown from 'react-native-countdown-component';

3. Creating our main App component.

export default function App() {



}

export default function App() {

}

4. Creating a function named as onFinishCD. We would call this function when Countdown timer finished.

  const onFinishCD = () => {
    Alert.alert('Countdown Finished...');
  }

const onFinishCD = () => {

Alert.alert('Countdown Finished...');

}

5. Creating a function named as onPressCD. We would call this function when user clicks on the Timer.

  const onPressCD = () => {
    Alert.alert('Countdown Component Pressed...');
  }

const onPressCD = () => {

Alert.alert('Countdown Component Pressed...');

}

6. Creating return() block, Now here we would make our main Countdown timer.

until :- Here we would pass the countdown timer time in seconds. It will be automatically calculated.
onFinish :- Calls a function when countdown timer will be finished.
onPress :- Calls a function when countdown timer clicks.
size :- Size of countdown timer.

   <CountDown
          until={600}
          onFinish={onFinishCD}
          onPress={onPressCD}
          size={20}
        />

<CountDown

until={600}

onFinish={onFinishCD}

onPress={onPressCD}

size={20}

7. Creating Style.

const styleSheet = StyleSheet.create({

  MainContainer: {
    flex: 1,
    padding: 5,
    alignItems: 'center',
  },

  title: {
    fontSize: 24,
    textAlign: 'center',
    color: 'green',
    padding: 3,
  }

});

const styleSheet = StyleSheet.create({

MainContainer: {

flex: 1,

padding: 5,

alignItems: 'center',

title: {

fontSize: 24,

textAlign: 'center',

color: 'green',

padding: 3,

}

});

8. Complete Source Code for App.js file :-

import React from "react";

import { Alert, SafeAreaView, StyleSheet, Text, View } from 'react-native';

import CountDown from 'react-native-countdown-component';

export default function App() {

  const onFinishCD = () => {
    Alert.alert('Countdown Finished...');
  }

  const onPressCD = () => {
    Alert.alert('Countdown Component Pressed...');
  }

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={styleSheet.MainContainer}>

        <Text style={styleSheet.title}>
          Example of React Native Countdown Component
        </Text>

        <CountDown
          until={600}
          onFinish={onFinishCD}
          onPress={onPressCD}
          size={20}
        />

      </View>
    </SafeAreaView>
  );
}

const styleSheet = StyleSheet.create({

  MainContainer: {
    flex: 1,
    padding: 5,
    alignItems: 'center',
  },

  title: {
    fontSize: 24,
    textAlign: 'center',
    color: 'green',
    padding: 3,
  }

});