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_modules ➜ react-native-idle-timer ➜ ios ➜ select RNIdleTimer.xcodeproj
3. Add libRNIdleTimer.a to Build Phases -> Link Binary With Libraries

Android

1. in android/settings.gradle

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

2. in android/app/build.gradle add:

1dependencies {
2  ...
3  compile project(':react-native-idle-timer')
4}

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

1//...
2import com.marcshilling.idletimer.IdleTimerPackage; // <--- This!
3
4//...
5@Override
6protected List<ReactPackage> getPackages() {
7  return Arrays.<ReactPackage>asList(
8    new MainReactPackage(),
9    new IdleTimerPackage() // <---- and This!
10  );
11}

Usage

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

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

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

Class component

1componentWillMount() {
2  IdleTimerManager.setIdleTimerDisabled(true);
3}
4
5componentWillUnmount() {
6  IdleTimerManager.setIdleTimerDisabled(false);
7}

Function component

1useEffect(() => {
2  IdleTimerManager.setIdleTimerDisabled(true);
3
4  return () => IdleTimerManager.setIdleTimerDisabled(false);
5}, [])

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

1useEffect(() => {
2  IdleTimerManager.setIdleTimerDisabled(true, "video");
3
4  return () => IdleTimerManager.setIdleTimerDisabled(false, "video");
5}, [])

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

Android

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

iOS

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