|
1 |
| -# react-native-appstate-listener |
2 |
| -Adapt React Native AppState changes to the React component lifecycle |
| 1 | +# AppStateListener |
| 2 | + |
| 3 | +[](https://www.npmjs.com/package/react-native-appstate-listener) |
| 4 | +[](https://opensource.org/licenses/MIT) |
| 5 | + |
| 6 | +Adapt React Native AppState changes to the React component lifecycle. |
| 7 | + |
| 8 | +Instead of setting up your own event listeners for `AppState` changes, include an `AppStateListener` component in your application, passing callbacks as props for the `AppState` changes you are interested in. `AppStateListener` sets up the listeners for you and then calls your callbacks whenever `AppState` changes. |
| 9 | + |
| 10 | +If you're using [Redux](http://redux.js.org/) in your application and you'd rather have `AppState` changes mapped into Redux actions, see [redux-enhancer-react-native-appstate](https://www.npmjs.com/package/redux-enhancer-react-native-appstate). |
| 11 | + |
| 12 | +## Installation |
| 13 | + |
| 14 | +``` |
| 15 | +yarn add react-native-appstate-listener |
| 16 | +``` |
| 17 | + |
| 18 | +(or `npm install react-native-appstate-listener` if you prefer). |
| 19 | + |
| 20 | +## Usage |
| 21 | + |
| 22 | +When some part of your application needs to respond to `AppState` changes, add an `AppStateListener` to the relevant component. |
| 23 | + |
| 24 | +`AppStateListener` takes three callbacks as props: |
| 25 | + |
| 26 | +- `onActive` is called when the application starts running in the foreground. This happens when it first starts up, or when returning from the background or inactive state. `onActive` is also called when the `AppStateListener` component is first mounted. |
| 27 | + |
| 28 | +- `onBackground` is called when the application moves into the background, either because the user switches to the home screen or another application. `onBackground` is also called when the `AppStateListener` component is unmounted. |
| 29 | + |
| 30 | +- `onInactive` is called when the application moves into an inactive state. This occurs when transitioning between foreground and background, and during periods of inactivity such as entering the Multitasking view or in the event of an incoming call. |
| 31 | + |
| 32 | +`AppStateListener` provides default callbacks that do nothing, so you only need to provide the callbacks you're interested in. |
| 33 | + |
| 34 | +## Example |
| 35 | + |
| 36 | +```js |
| 37 | +import React from "react"; |
| 38 | +import { Text, View } from "react-native"; |
| 39 | +import AppStateListener from "react-native-appstate-listener"; |
| 40 | + |
| 41 | +function handleActive() { |
| 42 | + console.log("The application is now active!"); |
| 43 | +} |
| 44 | + |
| 45 | +function handleBackground() { |
| 46 | + console.log("The application is now in the background!"); |
| 47 | +} |
| 48 | + |
| 49 | +function handleInactive() { |
| 50 | + console.log("The application is now inactive!"); |
| 51 | +} |
| 52 | + |
| 53 | +export default function MyComponent() { |
| 54 | + return ( |
| 55 | + <View> |
| 56 | + <AppStateListener |
| 57 | + onActive={handleActive} |
| 58 | + onBackground={handleBackground} |
| 59 | + onInactive={handleInactive} |
| 60 | + /> |
| 61 | + <Text>Hello, World!</Text> |
| 62 | + </View> |
| 63 | + ); |
| 64 | +} |
| 65 | +``` |
| 66 | + |
| 67 | +## Contributing |
| 68 | + |
| 69 | +Pull requests are welcome! |
| 70 | + |
| 71 | +To get started: |
| 72 | + |
| 73 | +- Clone the project. |
| 74 | + |
| 75 | +- Run `yarn install` to install dependencies. |
| 76 | + |
| 77 | +- Make your desired changes. We don't currently have any tests, but if you are adding significant functionality, please get in touch and we'll talk about how to introduce testing. |
| 78 | + |
| 79 | +- Ensure that you format the code with [prettier](https://www.npmjs.com/package/prettier) by running `yarn run format`. |
| 80 | + |
| 81 | +- Ensure that the code follows the current style guidelines by running `yarn run lint`. |
| 82 | + |
| 83 | +- Submit your pull request. |
| 84 | + |
| 85 | +## License |
| 86 | + |
| 87 | +Authored by the Engineering Team of [Zeal](https://codingzeal.com?utm_source=github). |
| 88 | + |
| 89 | +Copyright (c) 2017 Zeal, LLC. Licensed under the [MIT license](https://opensource.org/licenses/MIT). |
0 commit comments