react-native-inactive-time

👾Library is for you - if you want to detect when user closed app last time and how long it took to open it again.👾

Screen.Recording.2024-07-03.at.2.57.24.PM.mov

Installation

npm install react-native-inactive-time

yarn add react-native-inactive-time

This library uses AsyncStorage, so it will be good to install it too.

yarn add @react-native-async-storage/async-storage

npm install @react-native-async-storage/async-storage

Usage

Make sure useInactivityListener() is accessible from whole add, add it in App.js or maybe RootNavigator.

import useInactivityListener from 'react-native-inactive-time';
import CustomText from './CustomText';

export default function App() {
  const { elapsedTime, formattedTime } = useInactivityListener();

  return (
    <View style={styles.container}>
      <CustomText />
      <Text>Elapsed Time: {elapsedTime}</Text>
      <Text>Formatted Time: {formattedTime}</Text>
    </View>
  );
}

useInactivityListener is onetime listener, so that means after killing the app elapsedTime, formattedTime extracted from useInactivityListener() may be null.for that we have another method: getElapsedTime()

import { getElapsedTime, type ITime } from 'react-native-inactive-time';

const CustomText = () => {
  const [elapsedTime, setElapsedTime] = useState<ITime>(null);
  useEffect(() => {
    onMount();
  }, []);

  const onMount = async () => {
    const elapsedTime = await getElapsedTime();
    setElapsedTime(elapsedTime);
  };
  return (
    <View>
      <Text>Using UseEffect: {elapsedTime}</Text>
    </View>
  );
};

Methods

Prop	Description	Return Type
useInactivityListener()	REQUIRED Method which should be defined at top component, can also extend elapsed time and formatted time	void
getElapsedTime()	method to use inside hooks	number
elapsedTime	time difference from last close to last open in milliseconds	number
formattedTime	formatted time difference from last close to last open	string

Plans

Library is beta version right now, I want to add tests and get some user feedback to make is more user friendly, so all your comments matter for me.

Contact

LinkediIn: Elene Botchoradze

Email: [email protected]

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library