🌈 react-native-app-state-higher-order-component

A React Native higher-order component listening to AppState changes.

Installation

npm install react-native-app-state-higher-order-component --save

Usage

Import withAppStateListener from this library.

import { withAppStateListener } from 'react-native-app-state-higher-order-component';

Call withAppStateListener with the component you'd like to extend with it's functionality.

const EnhancedComponent = withAppStateListener(YourComponent);

Your component now receives an appState prop, which updates to the AppState.currentValue (i.e. 'active', 'inactive', 'background') value every time AppState updates.

import { Text } from 'react-native';
import { withAppStateListener } from 'react-native-app-state-higher-order-component';

const YourComponent = (props) => {
  const { appState } = props;
  return <Text>{appState}</Text>;
}

const YourComponentWithAppState = withAppStateListener(YourComponent);

Extended Props

A component enhanced with withAppStateListener is extended with three optional, additional props:

| prop | type/valid values | default | description | | ---------------- | ----------------- | ----------- | ---------------------------------------------------------------------------------------------------------- | | onAppStateChange | func | undefined | a function called with the appState value when AppState changes | | onBackground | func | undefined | a function called when AppState is 'background' or 'inactive' | | onForeground | func | undefined | a function called when AppState is 'active' |

Pass these optional props to your component enhanced with withAppStateListener:

import { Text } from 'react-native';
import { withAppStateListener } from 'react-native-app-state-higher-order-component';

const YourComponent = (props) => {
  const { appState } = props;
  return <Text>{appState}</Text>;
}

const YourComponentWithAppState = withAppStateListener(YourComponent);

const YourApp = () => {
  const onAppStateChange = (appState) => {
    console.log(`AppState updated to: ${appState}`);
  }

  const onBackground = () => console.log('App is in the background.');
  const onForeground = () => console.log('App is active.');

  return (
    <YourComponentWithAppState
      onAppStateChange={onAppStateChange}
      onBackground={onBackground}
      onForeground={onForeground}
    />
  );
}

Versioning

I use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Joey Schroeder - Initial work - joeyschroeder.com

See also the list of contributors who participated in this project.

Contributing

Please submit a pull request with any features/fixes for the project. I apologize in advance for the slow action on pull requests and issues. Please follow the ESLint rules for the project.

License

This project is licensed under the MIT License - see the MIT Open Source Initiative for details.

Acknowledgments

Hat tip to anyone who's code was used! 🤠