https://github.com/patlux/react-native-app-state

A declarative way to use react-native's AppState
https://github.com/patlux/react-native-app-state

app context native react react-native state

Last synced: about 1 month ago
JSON representation

A declarative way to use react-native's AppState

• Host: GitHub
• URL: https://github.com/patlux/react-native-app-state
• Owner: patlux
• Created: 2018-04-26T08:39:01.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-12-01T22:43:52.000Z (over 6 years ago)
• Last Synced: 2025-04-28T12:12:06.718Z (about 1 month ago)
• Topics: app, context, native, react, react-native, state
• Language: JavaScript
• Homepage:
• Size: 168 KB
• Stars: 8
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-native-app-state

[![npm version](https://badge.fury.io/js/react-native-app-state.svg)](https://badge.fury.io/js/react-native-app-state)

`react-native-app-state` is a declarative way to use react-native's [AppState](https://facebook.github.io/react-native/docs/appstate.html).

Internally it uses the new [React 16.3 Context API](https://reactjs.org/docs/context.html).

![react-native-app-state](https://user-images.githubusercontent.com/4481570/39601909-d767fe2e-4f23-11e8-80bd-5b9ddf2e891b.png)

I think you got it. It's definitely easier than:

![react-native-app-state](https://user-images.githubusercontent.com/4481570/39603516-09774b0e-4f29-11e8-9ecd-9483d9e2090e.png)

## Getting started

### Requirements

Because this library uses the new React 16.3 Context API, you need at least React 16.3.

### Installation

##### [Yarn](https://yarnpkg.com/) (recommended)

`$ yarn add react-native-app-state`

##### [npm](https://www.npmjs.com/)

`$ npm install react-native-app-state --save`

### Usage

See the example project under `example/`

```jsx

import AppState from 'react-native-app-state';

class App extends React.PureComponent {

  onAppStateChange = (appState, prevAppState) => {

    console.log(this.constructor.name, 'onAppStateChange()', prevAppState, '=>', appState);

    // E.g. output: "App onAppStateChange() background => active"

  };

  render() {

    return (

      

        

          {({ appState }) => (

            

              App state: {appState}

            

          )}

        

        {/* ------ OR ------ */}

        

          

            App is active

          

          

            App is inactive

          

          

            App is in background

          

        

      

    );

  }

}

```

## ToDO

* [ ] Write tests

* [ ] Add/Replace example with [expo](https://expo.io/)

* [ ] Add usage examples

  * [x] component based ``, ``, ``

  * [ ] `` alias for `` and ``

  * [x] with render prop `{({ appState }) => ()}`