React native logout for inactivity

Question

I have to make a react-native app (not using expo nor hooks) that can login into a user, read some simple info and then logout through a logout button or automatically due to inactivity.

I have no issues with the login, setting the timer, nor the logout button, however I have no idea of how to detect 'inactivity', is this posible with states? and how exactly?

Answer 1

General concensus seems to be to use PanResponder:

get user inactivity in react native

Check for Inactivity in a React Native App

state = {};
  _lastInteraction = new Date();
  _panResponder = {};

  componentWillMount() {
    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: this.handleStartShouldSetPanResponder,
      onMoveShouldSetPanResponder: this.handleMoveShouldSetPanResponder,
      onStartShouldSetPanResponderCapture: () => false,
      onMoveShouldSetPanResponderCapture: () => false,
      onPanResponderTerminationRequest: () => true,
      onShouldBlockNativeResponder: () => false,
    });

    this._maybeStartWatchingForInactivity();
  }

  _maybeStartWatchingForInactivity = () => {
    if (this._inactivityTimer) {
      return;
    }

    this._inactivityTimer = setInterval(() => {
      if (
        new Date() - this._lastInteraction >= TIME_TO_WAIT_FOR_INACTIVITY_MS
      ) {
        this._setIsInactive();
      }
    }, INACTIVITY_CHECK_INTERVAL_MS);
  };

  // NOTE: you almost certainly want to throttle this so it only fires
  // every second or so!
  _setIsActive = () => {
    this._lastInteraction = new Date();
    if (this.state.timeWentInactive) {
      this.setState({ timeWentInactive: null });
    }
    this._maybeStartWatchingForInactivity();
  };

  _setIsInactive = () => {
    this.setState({ timeWentInactive: new Date() });
    clearInterval(this._inactivityTimer);
    this._inactivityTimer = null;
  };

  render() {
    return (
      <View
        style={styles.container}
        collapsable={false}
        {...this._panResponder.panHandlers}>
        <Text style={styles.paragraph}>
          Put your app here
          {' '}
          {this.state.timeWentInactive &&
            `(inactive at: ${this.state.timeWentInactive})`}
        </Text>

        <Button
          title="Here is a button for some reason"
          onPress={() => alert('hi')}
        />
      </View>
    );

Answer 2

You can simply use react-native-inactivity module for this purpose. By using this module you can actually get if the app is inactive for X ms. You can use in this way.

import ReactNativeInactivity from "react-native-inactivity";

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <ReactNativeInactivity
        isActive={true}
        onInactive={() => {//Do Logout or something like that}}
        timeForInactivity={60000} //1 mint in ms
        restartTimerOnActivityAfterExpiration={false}
        loop={false}
        style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: "grey" }}>
        <YOUR_AUTHENTICATED_NAVIGATOR_HERE/>
      </ReactNativeInactivity>
    </View>
  );
}

You can also manage other props according to your requirement.

If this solution helped you just thumbs up and give me a star at repository. For more refer to: https://www.npmjs.com/package/react-native-inactivity