npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@conodene/react-native-user-inactivity

v1.2.6

Published

React Native component that notifies if the user is active or not

Downloads

142

Readme

Functional React Native component that notifies when the user stops interacting with the mobile screen for a given amount of time.

As of version 1.1.0, react-native-user-inactivity resets the timer also when the keyboard appears or disappears. If you want to avoid this behaviour, you can set the skipKeyboard property to true.

As of version 1.0.0, react-native-user-inactivity has been rebuilt as a functional component that uses the new React Hook API. Thanks to usetimeout-react-hook, react-native-user-inactivity supports timers different than the standard one (setTimeout). This has solved some of the most recurrent issues, such as #12, #16, #17.

Install

npm install react-native-user-inactivity

If you are running a version of react < 17 you'll need to include the --legacy-peer-deps flag.

npm install react-native-user-inactivity --legacy-peer-deps

🔑 Key features

  • 🥇 supports generic timers (you're no longer constrained to setTimeout)
  • ⚠️ optional reset capability of the timer
  • ✨ super elastic behaviour thanks to the Hooks API
  • 💪 written in TypeScript
  • ✔️ the core logic of this component is delegated to usetimeout-react-hook, which has 100% code coverage

❔ How to use

This package primarily exposes a single functional component, UserInactivity. The signature of the UserInactivity React props is the following:

interface UserInactivityProps<T = unknown> {
  /**
   * Number of milliseconds after which the view is considered inactive.
   * If it changed, the timer restarts and the view is considered active until
   * the new timer expires.
   * It defaults to 1000.
   */
  timeForInactivity?: number;

  /**
   * If it's explicitly set to `true` after the component has already been initialized,
   * the timer restarts and the view is considered active until the new timer expires.
   * It defaults to true.
   */
  isActive?: boolean;

  /**
   * Generic usetimeout-react-hook's TimeoutHandler implementation.
   * It defaults to the standard setTimeout/clearTimeout implementation.
   * See https://github.com/jkomyno/usetimeout-react-hook/#-how-to-use.
   */
  timeoutHandler?: TimeoutHandler<T>;

  /**
   * Children components to embed inside UserInactivity's View.
   * If any children component is pressed, `onAction` is called after
   * `timeForInactivity` milliseconds.
   */
  children: React.ReactNode;

  /**
   * If set to true, the timer is not reset when the keyboard appears
   * or disappears.
   */
  skipKeyboard?: boolean;

  /**
   * Optional custom style for UserInactivity's View.
   * It defaults to { flex: 1 }.
   */
  style?: StyleProp<ViewStyle>;

  /**
   * Callback triggered anytime UserInactivity's View isn't touched for more than
   * `timeForInactivity` seconds.
   * It's `active` argument is true if and only if the View wasn't touched for more
   * than `timeForInactivity` milliseconds.
   */
  onAction: (active: boolean) => void;
}

When a native timer is needed (in order to avoid issues such as #12, #16, #17) an implementation of usetimeout-react-hook's TimeoutHandler should be passed to the timeoutHandler prop. A default one (BackgroundTimer) is optionally provided: in order to use it you must:

  • manually run: npm i -S react-native-background-timer
  • manually link the native library: react-native link react-native-background-timer

In case of doubts, please refer to the official react-native-background-timer repository.

The default BackgroundTimer can be used like this:

import UserInactivity from 'react-native-user-inactivity';
import BackgroundTimer from 'react-native-user-inactivity/lib/BackgroundTimer';

export default () => {
  return (
    <UserInactivity
      timeForInactivity={2000}
      timeoutHandler={BackgroundTimer}
      onAction={isActive => { console.log(isActive); }}
      style={{ flex: 1, paddingTop: '10%' }}
    >
  );
}

Warning: it seems that react-native-background-timer doesn't work properly with Android 10+ (#41). I'm currently unable to reproduce the problem, but help from the open-source community on this matter is certainly appreciated.

✨ Typings

Since the component itself is written in TypeScript, your editor's intellisense system should automagically detect the typings file (even if you're using plain JS!), thus providing a better developer experience. In fact, autocomplete capabilities and warning should come for free as you're typing the props to pass to the UserInactivity component.

💪 Practical Example

import React, { useState } from 'react';
import { View, Text, TextInput, Button } from 'react-native';
import UserInactivity from 'react-native-user-inactivity';

export default () => {
  const [active, setActive] = useState(true);
  const [timer, setTimer] = useState(2000);

  return (
    <View style={{ flex: 1 }}>
      <UserInactivity
        isActive={active}
        timeForInactivity={timer}
        onAction={isActive => { setActive(isActive); }}
        style={{ flex: 1, paddingTop: '10%' }}
      >
        <Button id="btn-1" title="1 Press this to simulate activity" />
        <Button id="btn-2" title="2 Press this to simulate activity" />
        <Text id="text-1" style={{ textAlign: 'center' }}>Type below to simulate activity</Text>
        <TextInput
          id="text-input-1"
          style={{height: 40, borderColor: 'gray', borderWidth: 1}}
          onChange={() => { setActive(true); }}
          textContentType="creditCardNumber"
          value={timer.toString(10)}
          onChangeText={text => setTimer(Number.parseInt(text || 0, 10))}
        />
      </UserInactivity>
      <View style={{ flex: 3, backgroundColor: '#fcfcaa', }}>
        <Text style={{ textAlign: 'center' }}>{active ? 'ACTIVE' : 'NOT ACTIVE'}</Text>
        <Button title="Manually set to Active" onPress={() => { setActive(true); }} />
      </View>
    </View>
  );
}

Also, please checkout the example on Snack/Expo.


🚀 Build package

This package is built using TypeScript, so the source needs to be converted in JavaScript before being usable by the users. This can be achieved using TypeScript directly:

npm run build

👤 Author

Alberto Schiabel

🤝 Contributing

Contributions, issues and feature requests are welcome!Feel free to check issues page. The code is short, throughly commented and well tested, so you should feel quite comfortable working on it. If you have any doubt or suggestion, please open an issue.

⚠️ Issues

Chances are the problem you have bumped into have already been discussed and solved in the past. Please take a look at the issues (both the closed ones and the comments to the open ones) before opening a new issue. Unfortunately, at the moment I'm not able to offer fast support, because I am a student worker and React Native is no longer part of my main tech stack.

🦄 Show your support

Give a ⭐️ if this project helped or inspired you! In the future, I might consider offering premium support to Github Sponsors.

📝 License

Built with ❤️ by Alberto Schiabel. This project is MIT licensed.

Related packages