A cross-platform bridge that allows you to enable and disable the screen idle timer in your React Native app
yarn add react-native-idle-timer
react-native link react-native-idle-timer
- 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
➜ selectRNIdleTimer.xcodeproj
- Add
libRNIdleTimer.a
toBuild Phases -> Link Binary With Libraries
- 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!
);
}
import IdleTimerManager from 'react-native-idle-timer';
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");
}, [])
Android
IdleTimerManager.activate(activity, "video");
IdleTimerManager.deactivate(activity, "video");
iOS
[IdleTimerManager activate:@"video"];
[IdleTimerManager deactivate:@"video"];