Package Exports

react-native-idle-timer
react-native-idle-timer/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-idle-timer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-idle-timer

A cross-platform bridge that allows you to enable and disable the screen idle timer in your React Native app

Install

yarn add react-native-idle-timer

Link

Automatically

react-native link react-native-idle-timer

Manually

iOS

In the XCode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to <...>
Go to node_modules ➜ react-native-idle-timer ➜ ios ➜ select RNIdleTimer.xcodeproj
Add libRNIdleTimer.a to Build Phases -> Link Binary With Libraries

Android

in android/settings.gradle

...
include ':react-native-idle-timer'
project(':react-native-idle-timer').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-idle-timer/android')

in android/app/build.gradle add:

dependencies {
  ...
  compile project(':react-native-idle-timer')
}

and finally, in android/src/main/java/com/{YOUR_APP_NAME}/MainActivity.java add:

//...
import com.marcshilling.idletimer.IdleTimerPackage; // <--- This!

//...
@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
    new MainReactPackage(),
    new IdleTimerPackage() // <---- and This!
  );
}

Usage

In your React Native javascript code, bring in the native module:

import IdleTimerManager from 'react-native-idle-timer';

To disable the idle timer while a certain component is mounted:

Class component

componentWillMount() {
  IdleTimerManager.setIdleTimerDisabled(true);
}

componentWillUnmount() {
  IdleTimerManager.setIdleTimerDisabled(false);
}

Function component

useEffect(() => {
  IdleTimerManager.setIdleTimerDisabled(true);

  return () => IdleTimerManager.setIdleTimerDisabled(false);
}, [])

If you have multiple components that are responsible for interacting with the idle timer, you can pass a tag as the second parameter:

useEffect(() => {
  IdleTimerManager.setIdleTimerDisabled(true, "video");

  return () => IdleTimerManager.setIdleTimerDisabled(false, "video");
}, [])

If you need to interact from the native Android or iOS side:

Android

IdleTimerManager.activate(activity, "video");
IdleTimerManager.deactivate(activity, "video");

iOS

[IdleTimerManager activate:@"video"];
[IdleTimerManager deactivate:@"video"];