{"id":41179718,"url":"https://github.com/jkomyno/react-native-user-inactivity","last_synced_at":"2026-01-22T20:04:00.274Z","repository":{"id":46625191,"uuid":"97243528","full_name":"jkomyno/react-native-user-inactivity","owner":"jkomyno","description":"Simple component that alerts when the user is inactive (i.e. when the App surface hasn't been touched for X ms)","archived":false,"fork":false,"pushed_at":"2023-10-10T09:51:00.000Z","size":294,"stargazers_count":171,"open_issues_count":17,"forks_count":51,"subscribers_count":7,"default_branch":"master","last_synced_at":"2023-11-07T18:16:15.086Z","etag":null,"topics":["hacktoberfest","inactivity","react-native","react-native-component"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jkomyno.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-14T14:40:12.000Z","updated_at":"2023-11-04T20:50:18.000Z","dependencies_parsed_at":"2022-09-23T02:30:35.229Z","dependency_job_id":null,"html_url":"https://github.com/jkomyno/react-native-user-inactivity","commit_stats":null,"previous_names":[],"tags_count":5,"template":null,"template_full_name":null,"purl":"pkg:github/jkomyno/react-native-user-inactivity","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jkomyno%2Freact-native-user-inactivity","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jkomyno%2Freact-native-user-inactivity/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jkomyno%2Freact-native-user-inactivity/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jkomyno%2Freact-native-user-inactivity/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jkomyno","download_url":"https://codeload.github.com/jkomyno/react-native-user-inactivity/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jkomyno%2Freact-native-user-inactivity/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28670366,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-22T19:36:09.361Z","status":"ssl_error","status_checked_at":"2026-01-22T19:36:05.567Z","response_time":144,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","inactivity","react-native","react-native-component"],"created_at":"2026-01-22T20:04:00.211Z","updated_at":"2026-01-22T20:04:00.261Z","avatar_url":"https://github.com/jkomyno.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003ereact-native-user-inactivity\u003c/h1\u003e\n\u003cp\u003e\n  \u003cimg alt=\"Version\" src=\"https://img.shields.io/badge/version-1.2.0-blue.svg?cacheSeconds=2592000\" /\u003e\n  \u003ca href=\"https://github.com/jkomyno/react-native-user-inactivity#readme\"\u003e\n    \u003cimg alt=\"Documentation\" src=\"https://img.shields.io/badge/documentation-yes-brightgreen.svg\" target=\"_blank\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/jkomyno/react-native-user-inactivity/graphs/commit-activity\"\u003e\n    \u003cimg alt=\"Maintenance\" src=\"https://img.shields.io/badge/Maintained%3F-yes-green.svg\" target=\"_blank\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/jkomyno/react-native-user-inactivity/blob/master/LICENSE\"\u003e\n    \u003cimg alt=\"License: MIT\" src=\"https://img.shields.io/badge/License-MIT-yellow.svg\" target=\"_blank\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003e Functional React Native component that notifies when the user stops interacting with the mobile screen for a given amount of time.\n\nAs of version 1.1.0, `react-native-user-inactivity` resets the timer also when the keyboard appears or disappears.\nIf you want to avoid this behaviour, you can set the `skipKeyboard` property to `true`.\n\nAs of version 1.0.0, `react-native-user-inactivity` has been rebuilt as a functional component that uses the new React Hook API.\nThanks to [`usetimeout-react-hook`](https://github.com/jkomyno/usetimeout-react-hook), `react-native-user-inactivity` supports timers different\nthan the standard one (`setTimeout`). This has solved some of the most recurrent issues, such as [#12](https://github.com/jkomyno/react-native-user-inactivity/issues/12), [#16](https://github.com/jkomyno/react-native-user-inactivity/issues/16), [#17](https://github.com/jkomyno/react-native-user-inactivity/issues/17).\n\n## Install\n\n```sh\nnpm install react-native-user-inactivity\n```\nIf you are running a version of react \u003c 17 you'll need to include the `--legacy-peer-deps` flag.\n```sh\nnpm install react-native-user-inactivity --legacy-peer-deps\n```\n\n## 🔑 Key features\n\n* 🥇 supports generic timers (you're no longer constrained to `setTimeout`)\n* ⚠️ optional reset capability of the timer \n* ✨ super elastic behaviour thanks to the Hooks API\n* 💪 written in TypeScript\n* ✔️ the core logic of this component is delegated to [`usetimeout-react-hook`](https://github.com/jkomyno/usetimeout-react-hook), which has 100% code coverage\n\n## ❔ How to use\n\nThis package primarily exposes a single functional component, [UserInactivity](src/index.tsx).\nThe signature of the `UserInactivity` React props is the following:\n\n```typescript\ninterface UserInactivityProps\u003cT = unknown\u003e {\n  /**\n   * Number of milliseconds after which the view is considered inactive.\n   * If it changed, the timer restarts and the view is considered active until\n   * the new timer expires.\n   * It defaults to 1000.\n   */\n  timeForInactivity?: number;\n\n  /**\n   * If it's explicitly set to `true` after the component has already been initialized,\n   * the timer restarts and the view is considered active until the new timer expires.\n   * It defaults to true.\n   */\n  isActive?: boolean;\n\n  /**\n   * Generic usetimeout-react-hook's TimeoutHandler implementation.\n   * It defaults to the standard setTimeout/clearTimeout implementation.\n   * See https://github.com/jkomyno/usetimeout-react-hook/#-how-to-use.\n   */\n  timeoutHandler?: TimeoutHandler\u003cT\u003e;\n\n  /**\n   * Children components to embed inside UserInactivity's View.\n   * If any children component is pressed, `onAction` is called after\n   * `timeForInactivity` milliseconds.\n   */\n  children: React.ReactNode;\n\n  /**\n   * If set to true, the timer is not reset when the keyboard appears\n   * or disappears.\n   */\n  skipKeyboard?: boolean;\n\n  /**\n   * Optional custom style for UserInactivity's View.\n   * It defaults to { flex: 1 }.\n   */\n  style?: StyleProp\u003cViewStyle\u003e;\n\n  /**\n   * Callback triggered anytime UserInactivity's View isn't touched for more than\n   * `timeForInactivity` seconds.\n   * It's `active` argument is true if and only if the View wasn't touched for more\n   * than `timeForInactivity` milliseconds.\n   */\n  onAction: (active: boolean) =\u003e void;\n}\n```\n\nWhen a native timer is needed (in order to avoid issues such as #12, #16, #17) an implementation of\n[usetimeout-react-hook's TimeoutHandler](https://github.com/jkomyno/usetimeout-react-hook/#-how-to-use) should be\npassed to the `timeoutHandler` prop.\nA default one (BackgroundTimer) is optionally provided: in order to use it you must:\n\n* manually run: `npm i -S react-native-background-timer`\n* manually link the native library: `react-native link react-native-background-timer`\n\nIn case of doubts, please refer to the official [`react-native-background-timer`](https://github.com/ocetnik/react-native-background-timer) repository.\n\nThe default `BackgroundTimer` can be used like this:\n\n```tsx\nimport UserInactivity from 'react-native-user-inactivity';\nimport BackgroundTimer from 'react-native-user-inactivity/lib/BackgroundTimer';\n\nexport default () =\u003e {\n  return (\n    \u003cUserInactivity\n      timeForInactivity={2000}\n      timeoutHandler={BackgroundTimer}\n      onAction={isActive =\u003e { console.log(isActive); }}\n      style={{ flex: 1, paddingTop: '10%' }}\n    \u003e\n  );\n}\n```\n\n**Warning**: it seems that `react-native-background-timer` doesn't work properly with Android 10+ ([#41](https://github.com/jkomyno/react-native-user-inactivity/issues/41)). I'm currently unable to reproduce the problem, but help from the open-source community on this matter is certainly appreciated.\n\n## ✨ Typings\n\nSince the component itself is written in TypeScript, your editor's intellisense system should automagically detect\nthe typings file (even if you're using plain JS!), thus providing a better developer experience.\nIn fact, autocomplete capabilities and warning should come for free as you're typing the props to pass to the `UserInactivity` component.\n\n## 💪 Practical Example\n\n```tsx\nimport React, { useState } from 'react';\nimport { View, Text, TextInput, Button } from 'react-native';\nimport UserInactivity from 'react-native-user-inactivity';\n\nexport default () =\u003e {\n  const [active, setActive] = useState(true);\n  const [timer, setTimer] = useState(2000);\n\n  return (\n    \u003cView style={{ flex: 1 }}\u003e\n      \u003cUserInactivity\n        isActive={active}\n        timeForInactivity={timer}\n        onAction={isActive =\u003e { setActive(isActive); }}\n        style={{ flex: 1, paddingTop: '10%' }}\n      \u003e\n        \u003cButton id=\"btn-1\" title=\"1 Press this to simulate activity\" /\u003e\n        \u003cButton id=\"btn-2\" title=\"2 Press this to simulate activity\" /\u003e\n        \u003cText id=\"text-1\" style={{ textAlign: 'center' }}\u003eType below to simulate activity\u003c/Text\u003e\n        \u003cTextInput\n          id=\"text-input-1\"\n          style={{height: 40, borderColor: 'gray', borderWidth: 1}}\n          onChange={() =\u003e { setActive(true); }}\n          textContentType=\"creditCardNumber\"\n          value={timer.toString(10)}\n          onChangeText={text =\u003e setTimer(Number.parseInt(text || 0, 10))}\n        /\u003e\n      \u003c/UserInactivity\u003e\n      \u003cView style={{ flex: 3, backgroundColor: '#fcfcaa', }}\u003e\n        \u003cText style={{ textAlign: 'center' }}\u003e{active ? 'ACTIVE' : 'NOT ACTIVE'}\u003c/Text\u003e\n        \u003cButton title=\"Manually set to Active\" onPress={() =\u003e { setActive(true); }} /\u003e\n      \u003c/View\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\nAlso, please checkout the [example on Snack/Expo](https://snack.expo.io/B1sjE9uMH).\n\n---------------------------------------------------------\n\n## 🚀 Build package\n\nThis package is built using **TypeScript**, so the source needs to be converted in JavaScript before being usable by the users.\nThis can be achieved using TypeScript directly:\n\n```sh\nnpm run build\n```\n\n## 👤 Author\n\n**Alberto Schiabel**\n\n* Github: [@jkomyno](https://github.com/jkomyno)\n\n## 🤝 Contributing\n\nContributions, issues and feature requests are welcome!\u003cbr /\u003eFeel free to check [issues page](https://github.com/jkomyno/react-native-user-inactivity/issues).\nThe code is short, throughly commented and well tested, so you should feel quite comfortable working on it.\nIf you have any doubt or suggestion, please open an issue.\n\n## ⚠️ Issues\n\nChances are the problem you have bumped into have already been discussed and solved in the past.\nPlease take a look at the issues (both the closed ones and the comments to the open ones) before opening a new issue.\nUnfortunately, 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.\n\n## 🦄 Show your support\n\nGive a ⭐️ if this project helped or inspired you! In the future, I might consider offering premium support to Github Sponsors.\n\n## 📝 License\n\nBuilt with ❤️ by [Alberto Schiabel](https://github.com/jkomyno).\u003cbr /\u003e\nThis project is [MIT](https://github.com/jkomyno/usetimeout-react-hook/blob/master/LICENSE) licensed.\n\n## Related packages\n\n* [`usetimeout-react-hook`](https://github.com/jkomyno/usetimeout-react-hook)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjkomyno%2Freact-native-user-inactivity","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjkomyno%2Freact-native-user-inactivity","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjkomyno%2Freact-native-user-inactivity/lists"}