https://github.com/chooin/react-native-lifecycle

React Native Lifecycle
https://github.com/chooin/react-native-lifecycle

react-native react-native-hooks react-native-lifecycle

Last synced: 3 months ago
JSON representation

React Native Lifecycle

• Host: GitHub
• URL: https://github.com/chooin/react-native-lifecycle
• Owner: chooin
• License: mit
• Created: 2020-08-14T01:43:08.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-12-07T03:33:18.000Z (over 2 years ago)
• Last Synced: 2025-08-15T11:11:54.293Z (10 months ago)
• Topics: react-native, react-native-hooks, react-native-lifecycle
• Language: TypeScript
• Homepage:
• Size: 449 KB
• Stars: 25
• Watchers: 1
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# React Native Lifecycle

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/chooin/react-native-lifecycle/blob/master/LICENSE)

[![Latest Version on NPM](https://img.shields.io/npm/v/react-native-lifecycle.svg)](https://npmjs.com/package/react-native-lifecycle)

[![npm](https://img.shields.io/npm/dt/react-native-lifecycle.svg)](https://www.npmjs.com/package/react-native-lifecycle)

[![build status](https://github.com/chooin/react-native-lifecycle/actions/workflows/test.yml/badge.svg?branch=master)](https://github.com/chooin/react-native-lifecycle/actions/workflows/test.yml)

[简体中文](./README.zh-CN.md)

### Install

```sh

yarn add react-native-lifecycle

```

### Peer Dependencies

```sh

yarn add @react-navigation/native # >= 5.7.0 or >= 6.0.0

```

### Support

| package name           | version | react-native version |

| ---------------------- | ------- | -------------------- |

| react-native-lifecycle | 2.0.0+  | 0.65.0+              |

| react-native-lifecycle | 1.2.4+  | 0.59.0+              |

### Usage

[Example](https://github.com/Chooin/react-native-lifecycle-example)

##### Global Hooks

```js

import { useAppActive, useAppInactive } from 'react-native-lifecycle';

export default function App() {

  // Called when the application switches from the background to the foreground

  useAppActive(() => {});

  // Called when the application switches from the foreground to background

  useAppInactive(() => {});

}

```

##### Page/Screen Hooks

```js

import {

  useMount,

  useShow,

  useHide,

  useUnmount,

  useResize,

} from 'react-native-lifecycle';

export default function Page() {

  // Called when the page or component is mounted

  useMount(() => {});

  // Called when the page is displayed, or when the application switches from the background to the foreground

  useShow(() => {});

  // Called when the page is hidden, or when the application switches from the foreground to the background

  useHide(() => {});

  // Called when the page or component is unmounted

  useUnmount(() => {});

  // Called after the page window resize

  useResize(() => {});

}

```