Build a React Native StopWatch Background Timer Component Using react-native-background-timer Library in Javascript Full Project For Beginners



npm i react-native-background-timer



React Native Background Timer

Emit event periodically (even when app is in the background).


  1. If you use Expo to create a project you’ll just need to “eject“.
    expo eject
  2. Install React Native Background Timer package.
    yarn add react-native-background-timer
    # or using npm 
    npm install react-native-background-timer –save
  3. Link React Native Background Timer library. This step is not necessary when you use React Native >= 0.60 (and your app is not ejected from Expo).
    react-native link react-native-background-timer
  4. If you use CocoaPods or React Native >= 0.60 (and your app is not ejected from Expo) or your app is ejected from Expo, then before running your app on iOS, make sure you have CocoaPods installed and run:
    cd ios
    pod install

Link the library manually if you get errors:

  • Android: TypeError: Cannot read property 'setTimeout' of undefined or TypeError: null is not an object (evaluating 'RNBackgroundTimer.setTimeout')
  • iOS: Native module cannot be null
Android manual linking
iOS manual linking


import BackgroundTimer from react-native-background-timer;


To use the same code both on Android and iOS use runBackgroundTimer() and stopBackgroundTimer(). There can be used only one background timer to keep code consistent.

BackgroundTimer.runBackgroundTimer(() => { 
//code that will be called every 3 seconds 
//rest of code will be performing for iOS on background too
BackgroundTimer.stopBackgroundTimer(); //after this call all code on background stop run.


See also  Build a React.js PDF Renderer Document Generator in Browser Using react-pdf Library in Javascript Full Project For Beginners



You can use the setInterval and setTimeout functions. This API is identical to that of react-native and can be used to quickly replace existing timers with background timers.

// Start a timer that runs continuous after X milliseconds
const intervalId = BackgroundTimer.setInterval(() => {
    // this will be executed every 200 ms
    // even when app is the the background
}, 200);
// Cancel the timer when you are done with it
// Start a timer that runs once after X milliseconds
const timeoutId = BackgroundTimer.setTimeout(() => {
    // this will be executed once after 10 seconds
    // even when app is the the background
}, 10000);
// Cancel the timeout if necessary


Obsolete usage which doesn’t support multiple background timers.

import {
} from react-native;
import BackgroundTimer from react-native-background-timer;
const EventEmitter ={
  ios: () => NativeAppEventEmitter,
  android: () => DeviceEventEmitter,
// start a global timer
BackgroundTimer.start(5000); // delay in milliseconds only for Android
// listen for event
EventEmitter.addListener(backgroundTimer, () => {
    // this will be executed once after 5 seconds
// stop the timer

Leave a Reply