get user inactivity in react native
Finally, I did it using PanResponder. And It works flawlessly. It takes key presses ans swipes and drags.
Expo Link : https://snack.expo.io/Sy8ulr8B-
Here is my code:
import React, { Component } from 'react';
import { Button, PanResponder, View, StyleSheet,TouchableOpacity, Text , Image} from 'react-native';
export default class App extends Component {
state = {
show : false
};
_panResponder = {};
timer = 0;
componentWillMount() {
this._panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => {
this.resetTimer()
return true
},
onMoveShouldSetPanResponder: () => true,
onStartShouldSetPanResponderCapture: () => { this.resetTimer() ; return false},
onMoveShouldSetPanResponderCapture: () => false,
onPanResponderTerminationRequest: () => true,
onShouldBlockNativeResponder: () => false,
});
this.timer = setTimeout(()=>this.setState({show:true}),5000)
}
resetTimer(){
clearTimeout(this.timer)
if(this.state.show)
this.setState({show:false})
this.timer = setTimeout(()=>this.setState({show:true}),5000)
}
render() {
return (
<View
style={styles.container}
collapsable={false}
{...this._panResponder.panHandlers}>
{
this.state.show ? <Text style={{fontSize:30}}>Timer Expired : 5sec</Text> : null
}
<TouchableOpacity>
<Image style={{width: 300, height: 300}} source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} />
</TouchableOpacity>
<Button
title="Here is a button for some reason"
onPress={() => {}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ecf0f1',
}
});