Add useAppState() hook for tracking app foreground/background state

[Nedunchezhiyan-M]

Summary

Add a new useAppState() React hook that lets components subscribe to app state changes, following the same pattern as the existing useColorScheme() and useWindowDimensions() hooks.

Problem

Currently, tracking app state requires manually managing AppState event listeners and local state:

// Before - verbose boilerplate
function MyComponent() {
  const [appState, setAppState] = useState(AppState.currentState);

  useEffect(() => {
    const sub = AppState.addEventListener('change', setAppState);
    return () => sub.remove();
  }, []);
}

Solution

A single-line hook using React's useSyncExternalStore:

// After - clean and simple
import { useAppState } from 'react-native';

function MyComponent() {
  const appState = useAppState();
  // Returns: 'active' | 'background' | 'inactive' | 'unknown'
}

Common use cases for mobile apps

• Refresh data when the app returns to foreground
• Pause/resume media when the app is backgrounded
• Save drafts when the user leaves the app
• Disable network polling while in background to save battery
• Track analytics for session foreground/background time

What's included

• useAppState.js - Hook implementation using useSyncExternalStore
• useAppState.d.ts - TypeScript declarations
• Export from react-native package (index.js + index.js.flow)
• Jest mock for testing (useAppState returns 'active' by default)
• Unit tests following the useColorScheme test pattern

Changelog:

[GENERAL] [ADDED] - Add useAppState() hook for subscribing to app foreground/background state changes

Test Plan

1. Import useAppState from react-native and use in a component
2. Verify it returns 'active' when the app is in the foreground
3. Background the app and verify the component re-renders with 'background'
4. Return to the app and verify it changes back to 'active'
5. On iOS, trigger the app switcher and verify 'inactive' state
6. Unit tests validate mock behavior and hook contract

[meta-cla]

Hi @Nedunchezhiyan-M!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

[meta-cla]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!