npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-applifecycle

v1.0.0

Published

⚛ Enhances the reliability of managing app lifecycles across iOS and Android platforms, ensuring consistent behavior regarding foreground and background states.

Downloads

5,399

Readme

React-Native App Lifecycle

License MIT npm version npm downloads

⚛ Enhances the reliability of managing app lifecycles across iOS and Android platforms, ensuring consistent behavior regarding foreground and background states.

It implements the Lifecycle for Android and falls back to the AppState for iOS.

Why Use This?

The original AppState API provided by React Native behaves differently between Android and iOS, particularly regarding the background state:

  • On iOS, the background state signifies that the entire app is in the background.
  • On Android, the background state indicates that the React Native Activity is in the background, which might not necessarily mean the entire app is in the background.

By using react-native-applifecycle, you can handle these differences seamlessly across both platforms, ensuring that the state background will be dispatched only when the entire app is in background.

Install

Install dependency package

yarn add react-native-applifecycle

Or

npm i -S react-native-applifecycle

Usage

The App Lifecycle API is compatible with the original AppState.

Subscribing to the change listener:

import {AppLifecycle} from 'react-native-applifecycle';

const App = () => {

  useEffect(() => {
    const listener = AppLifecycle.addEventListener('change', state => {
      // do something
    });

    return () => listener.remove();
  }, []);

  return <View />;
}

export default App;

Getting the current state with hook:

import {useAppLifecycle} from 'react-native-applifecycle';

const App = () => {
  const currentLifecycle = useAppLifecycle();

  // do something

  return <View />;
}

export default App;

For more details, see the Sample Project.

Lifecycle States

  • active - The app is running in the foreground
  • background - The app is running in the background. The user is either:
    • in another app
    • on the home screen
  • [iOS] inactive - This is a state that occurs when transitioning between foreground & background, and during periods of inactivity such as entering the multitasking view, opening the Notification Center or in the event of an incoming call.

For more information, see React Native documentation.

Events

change

This event is received when the app state has changed. The listener is called with one of the current app state values.

memoryWarning, focus, blur, etc

Falls back to AppState

Methods

addEventListener()

static addEventListener(
  type: AppStateEvent,
  listener: (state: AppStateStatus) => void,
): NativeEventSubscription;

Sets up a function that will be called whenever the specified event type on Lifecycle occurs. Valid values for eventType are listed above. Returns the EventSubscription.

Properties

currentState

static currentState: AppStateStatus;

Jest mock

jest.mock('react-native-applifecycle/dist/AppLifecycle', () => require('react-native-applifecycle/jest/AppLifecycleMock'));

Contribute

New features, bug fixes and improvements are welcome! For questions and suggestions use the issues.

Donate

Star History

Star History Chart

License

The MIT License (MIT)

Copyright (c) 2024 Douglas Nassif Roma Junior

See the full license file.