Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marcshilling/react-native-idle-timer
A cross-platform bridge that allows you to enable and disable the screen idle timer in your React Native app
https://github.com/marcshilling/react-native-idle-timer
Last synced: 6 days ago
JSON representation
A cross-platform bridge that allows you to enable and disable the screen idle timer in your React Native app
- Host: GitHub
- URL: https://github.com/marcshilling/react-native-idle-timer
- Owner: marcshilling
- License: mit
- Created: 2015-08-25T15:54:27.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2024-05-08T14:12:42.000Z (7 months ago)
- Last Synced: 2024-12-02T11:56:22.267Z (11 days ago)
- Language: Java
- Homepage:
- Size: 11.1 MB
- Stars: 217
- Watchers: 1
- Forks: 42
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-react-native - react-native-idle-timer ★79 - An Objective-C bridge that allows you to enable and disable the screen idle timer in your React Native app (Components / UI)
- awesome-reactnative-ui - react-native-idle-timer - platform bridge that allows you to enable and disable the screen idle timer in your React Native app|<ul><li>Last updated : 1 month ago</li><li>Stars : 82</li><li>Open issues : 2</li></ul>|![]()| (Others)
- awesome-react-native - react-native-idle-timer ★79 - An Objective-C bridge that allows you to enable and disable the screen idle timer in your React Native app (Components / UI)
- awesome-reactnative-ui - react-native-idle-timer - platform bridge that allows you to enable and disable the screen idle timer in your React Native app|<ul><li>Last updated : 1 month ago</li><li>Stars : 82</li><li>Open issues : 2</li></ul>|![]()| (Others)
- awesome-react-native - react-native-idle-timer ★79 - An Objective-C bridge that allows you to enable and disable the screen idle timer in your React Native app (Components / UI)
- awesome-react-native - react-native-idle-timer ★79 - An Objective-C bridge that allows you to enable and disable the screen idle timer in your React Native app (Components / UI)
- awesome-react-native-ui - react-native-idle-timer ★36 - An Objective-C bridge that allows you to enable and disable the screen idle timer in your React Native app (Components / UI)
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
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`
```gradle
...
include ':react-native-idle-timer'
project(':react-native-idle-timer').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-idle-timer/android')
```
2. in `android/app/build.gradle` add:
```gradle
dependencies {
...
compile project(':react-native-idle-timer')
}
```
3. and finally, in `android/src/main/java/com/{YOUR_APP_NAME}/MainActivity.java` add:
```java
//...
import com.marcshilling.idletimer.IdleTimerPackage; // <--- This!
//...
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
new IdleTimerPackage() // <---- and This!
);
}
```
## Usage
### In your React Native javascript code, bring in the native module:
```javascript
import IdleTimerManager from 'react-native-idle-timer';
```
### To disable the idle timer while a certain component is mounted:
Class component
```javascript
componentWillMount() {
IdleTimerManager.setIdleTimerDisabled(true);
}
componentWillUnmount() {
IdleTimerManager.setIdleTimerDisabled(false);
}
```
Function component
```javascript
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:
```javascript
useEffect(() => {
IdleTimerManager.setIdleTimerDisabled(true, "video");
return () => IdleTimerManager.setIdleTimerDisabled(false, "video");
}, [])
```
### If you need to interact from the native Android or iOS side:
Android
```java
IdleTimerManager.activate(activity, "video");
IdleTimerManager.deactivate(activity, "video");
```
iOS
```objectivec
[IdleTimerManager activate:@"video"];
[IdleTimerManager deactivate:@"video"];
```