Skip to content

Commit 2555128

Browse files
Randy CoulmanEmma Castor
authored andcommitted
Initial version
1 parent a1a114e commit 2555128

File tree

6 files changed

+4303
-2
lines changed

6 files changed

+4303
-2
lines changed

.eslintrc.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
module.exports = {
2+
extends: [
3+
"zeal",
4+
"zeal/react",
5+
"zeal/react-native",
6+
"prettier",
7+
"prettier/react"
8+
],
9+
root: true
10+
};

CHANGELOG.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Change Log
2+
3+
All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/).
4+
5+
## [Unreleased](https://github.com/CodingZeal/react-native-appstate-listener/compare/v1.0.0...HEAD)
6+
7+
## 1.0.0 - 2017-06-02
8+
9+
Happy birthday!

README.md

Lines changed: 89 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,89 @@
1-
# react-native-appstate-listener
2-
Adapt React Native AppState changes to the React component lifecycle
1+
# AppStateListener
2+
3+
[![npm version](https://badge.fury.io/js/react-native-appstate-listener.svg)](https://www.npmjs.com/package/react-native-appstate-listener)
4+
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](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).

index.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import PropTypes from "prop-types";
2+
import React from "react";
3+
import { AppState } from "react-native";
4+
5+
const noop = () => null;
6+
7+
class AppStateListener extends React.PureComponent {
8+
static propTypes = {
9+
onActive: PropTypes.func.isRequired,
10+
onBackground: PropTypes.func.isRequired,
11+
onInactive: PropTypes.func.isRequired
12+
};
13+
14+
static defaultProps = {
15+
onActive: noop,
16+
onBackground: noop,
17+
onInactive: noop
18+
};
19+
20+
componentDidMount() {
21+
const { onActive } = this.props;
22+
23+
onActive();
24+
AppState.addEventListener("change", this.handleAppStateChange);
25+
}
26+
27+
componentWillUnmount() {
28+
const { onBackground } = this.props;
29+
30+
onBackground();
31+
AppState.removeEventListener("change", this.handleAppStateChange);
32+
}
33+
34+
handleAppStateChange = newState => {
35+
const { onActive, onBackground, onInactive } = this.props;
36+
const callbacks = {
37+
active: onActive,
38+
background: onBackground,
39+
inactive: onInactive
40+
};
41+
const callback = callbacks[newState] || noop;
42+
43+
callback();
44+
};
45+
46+
render() {
47+
return null;
48+
}
49+
}
50+
51+
export default AppStateListener;

package.json

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
{
2+
"name": "react-native-appstate-listener",
3+
"version": "1.0.0",
4+
"description": "Adapt React Native AppState changes to the React component lifecycle",
5+
"main": "index.js",
6+
"files": ["index.js"],
7+
"scripts": {
8+
"format": "prettier --write '**/*.js'",
9+
"lint": "eslint '**/*.js' --max-warnings 0",
10+
"precommit": "lint-staged",
11+
"test": "echo \"Error: no test specified\" && exit 1"
12+
},
13+
"repository": {
14+
"type": "git",
15+
"url": "git+https://github.com/CodingZeal/react-native-appstate-listener.git"
16+
},
17+
"author": "Randy Coulman <[email protected]> (http://open.codingzeal.com)",
18+
"license": "MIT",
19+
"bugs": {
20+
"url": "https://github.com/CodingZeal/react-native-appstate-listener/issues"
21+
},
22+
"homepage": "https://github.com/CodingZeal/react-native-appstate-listener#readme",
23+
"keywords": [
24+
"react-native-component",
25+
"react-component",
26+
"react-native",
27+
"appstate",
28+
"ios",
29+
"android"
30+
],
31+
"lint-staged": {
32+
"*.js": "prettier --list-different"
33+
},
34+
"dependencies": {
35+
"prop-types": "^15.5.10"
36+
},
37+
"peerDependencies": {
38+
"react": "*",
39+
"react-native": "*"
40+
},
41+
"devDependencies": {
42+
"babel-eslint": "^7.2.3",
43+
"eslint": "^3.19.0",
44+
"eslint-config-prettier": "^2.1.1",
45+
"eslint-config-zeal": "^1.0.0",
46+
"eslint-plugin-import": "^2.3.0",
47+
"eslint-plugin-react": "^7.0.1",
48+
"eslint-plugin-react-native": "^2.3.2",
49+
"husky": "^0.13.4",
50+
"lint-staged": "^3.6.0",
51+
"prettier": "^1.4.0",
52+
"react": "16.0.0-alpha.6",
53+
"react-native": "^0.44.2"
54+
}
55+
}

0 commit comments

Comments
 (0)