jkomyno/react-native-user-inactivity

Support custom timers

jkomyno opened this issue · 3 comments

The idea is that this package shouldn't be too opinionated about the setTimeout/clearTimeout-like functions that should be used to handle the activity timer.
This would fix #12, #15, #16 and #17 when paired with a native timer package, such as https://github.com/ocetnik/react-native-background-timer.

export interface TimeoutHandler<T> {
  /**
   * Timeout function that accepts two parameters:
   * a function and the timeout after which that function is fired.
   * If not provided, the default `timeoutFn` will be `setTimeout`.
   */
  setTimeout: (fn: () => void, timeout: number) => T;

  /**
   * Function that should be used to clear the effects of `timeoutFn` after
   * the `UserActivity` component is unmounted.
   */
  clearTimeout: (timeoutFn: T | undefined) => void;
}

const defaultTimeoutHandler: TimeoutHandler<number> = {
  setTimeout: (fn: () => void, timeout: number) => window.setTimeout(fn, timeout),
  clearTimeout: (timeoutFn: number | undefined) => { window.clearTimeout(timeoutFn) },
};

@jkomyno Does the current implementation in the dev branch support custom timers? It appears to support them, despite this PR being open, but I'm having issues implementing BackgroundTimer as referenced. When using BackgroundTimer, I see some weird inconsistencies, such as the onAction function firing too frequently (faster than the timeForInactivity interval).

I'm implementing like so, with useEffect as I will eventually need to dispatch a Redux action when the user has gone inactive:

const TIMEOUT_BEFORE_PROMPTING_USER_IN_MILLISECONDS = 10000;

const InactiveLogout = ({ children }) => {
  const [active, setActive] = useState(true);

  useEffect(() => {
    const resetInactivityTimer = () => setActive(true);

    if (!active) {
      Alert.alert('youve gone inactive');
    }
  }, [active, setActive]);

  return (
    <UserInactivity
      timeForInactivity={TIMEOUT_BEFORE_PROMPTING_USER_IN_MILLISECONDS}
      timeoutHandler={BackgroundTimer}
      onAction={isActive => setActive(isActive)}
      isActive={active}
    >
      {children}
    </UserInactivity>
  );
};

Any help is much appreciated!

@dylinmaust Now it supports them.

@dylinmaust we have having same issues regarding stopBackgroundTimer and runBackgroundTimer of react-native-background-timer lib, see also:

we just can't use https://github.com/jkomyno/react-native-user-inactivity/blob/master/src/BackgroundTimer.ts provided by react-native-user-inactivity because of these issues and then we have to provide our own Android implementation