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
4,636
Maintainers
Readme
React-Native App Lifecycle
⚛ 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 foregroundbackground
- 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.
Star History
License
The MIT License (MIT)
Copyright (c) 2024 Douglas Nassif Roma Junior
See the full license file.