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).

Installation

  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

Usage

import BackgroundTimer from react-native-background-timer;

Crossplatform

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 
}, 
3000);
//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

 

Android

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
    console.log(tic);
}, 200);
 
// Cancel the timer when you are done with it
BackgroundTimer.clearInterval(intervalId);
// 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
   console.log(tac);
}, 10000);
 
// Cancel the timeout if necessary
BackgroundTimer.clearTimeout(timeoutId);

Obsolete

Obsolete usage which doesn’t support multiple background timers.

import {
  DeviceEventEmitter,
  NativeAppEventEmitter,
  Platform,
} from react-native;
 
import BackgroundTimer from react-native-background-timer;
const EventEmitter = Platform.select({
  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
    console.log(toe);
});
// stop the timer
BackgroundTimer.stop();

Leave a Reply