react-native-idle-timer
TypeScript icon, indicating that this package has built-in type declarations

2.2.3 • Public • Published

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
  1. In the XCode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to <...>
  2. Go to node_modulesreact-native-idle-timerios ➜ select RNIdleTimer.xcodeproj
  3. Add libRNIdleTimer.a to Build Phases -> Link Binary With Libraries
Android
  1. 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')
  1. in android/app/build.gradle add:
dependencies {
  ...
  compile project(':react-native-idle-timer')
}
  1. 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"];

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
2.2.31,084latest

Version History

VersionDownloads (Last 7 Days)Published
2.2.31,084
2.2.2312
2.2.11,600
2.2.017
2.1.76,249
2.1.655
2.1.53
2.1.40
2.1.30
2.1.20
2.1.11
2.1.00
2.0.20
2.0.10
2.0.00
1.0.10
1.0.00

Package Sidebar

Install

npm i react-native-idle-timer

Weekly Downloads

9,321

Version

2.2.3

License

MIT

Unpacked Size

87.4 kB

Total Files

17

Last publish

Collaborators

  • marcshilling