Working with App State and Event Listeners in React Native

How to manage app state with event listeners and React hooks

This article introduces the concept of App State, and explores common scenarios where App State is used in React Native — that is accessed via the AppState object supplied by the framework.

We’ll cover how event listeners can access a component’s most up to date state via refs and the useRef hook, that can in turn prepare your app for the background or foreground. AppState changes will also be demonstrated in conjunction with React context and a Timer class, that will measure how long an app is in the background or foreground.

Although the subjects talked about can be applied to both iOS and Android, the demos in this article have been tested solely on iOS. These useful tools and concepts that will undoubtedly be useful as you develop React Native apps. Let’s get started with AppState.

How to Use App State

AppState is a simple API supplied by the react-native framework, so is most likely readily available in your React Native projects now. In it’s most basic usage, we can simply refer to the current App State using its currentState property, that will either be active, inactive or background: