AppState emits `active` after locking iPhone with "Always On Screen"

[rodperottoni]

Description

On iPhones that support "Always On Display" (see supported models) and have this setting on (it is on by default!), locking your phone whilst a React Native application is open causes AppState.addEventListener to emit the event: active.

This has several unwanted consequences: for popular applications who rely on the active event to fetch new data, this bug causes 1000s of unwanted API calls that automatically fail, as the runtime is immediately paused after the app is paused (which as a result causes HTTP calls to be dropped).

Steps to reproduce

1. Ensure you're running this on an iPhone (or Simulator) that support the "Always On Display" feature.
2. In a blank react native application, add the following code to a screen:

useEffect(() => {
    const eventListener = AppState.addEventListener('change', (state) => {
      console.log('🚨 AppState changed to: ', state)
    })

    return () => {
      eventListener.remove()
    }
  }, [])

3. Lock the phone.
4. You should see a inactive event, immediately followed by an active event.

React Native Version

0.81.4

Affected Platforms

Runtime - iOS

Output of npx @react-native-community/cli info

System:
  OS: macOS 26.1
  CPU: (14) arm64 Apple M4 Pro
  Memory: 1.92 GB / 48.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.16.0
    path: ~/.nvm/versions/node/v22.16.0/bin/node
  Yarn:
    version: 1.22.22
    path: ~/Documents/amber/amber-mobile/node_modules/.bin/yarn
  npm:
    version: 10.9.2
    path: ~/.nvm/versions/node/v22.16.0/bin/npm
  Watchman:
    version: 2025.03.03.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/rudy/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.1
      - iOS 26.1
      - macOS 26.1
      - tvOS 26.1
      - visionOS 26.1
      - watchOS 26.1
  Android SDK: Not Found
IDEs:
  Android Studio: 2025.2 AI-252.25557.131.2521.14432022
  Xcode:
    version: 26.1.1/17B100
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 3.1.2
    path: /Users/rudy/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.0
    wanted: ^20.0.0
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.81.4
    wanted: 0.81.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

Not relevant.

MANDATORY Reproducer

https://snack.expo.dev/@amber-pli/fascinated-violet-popcorn

Screenshots and Videos

[react-native-bot]

Warning

Could not parse version: We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.76.2.

[react-native-bot]

Warning

Could not parse version: We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.76.2.

[migueldaipre]

Hey @rodperottoni, thanks for reporting the issue. In the video, I couldn't see the inactive state. Is that intentional?

I'd like to understand it better, but it seems to me that “Always On Screen” is a state of the screen and not of the application.

@cipolleschi could help us.

[rodperottoni]

I'm just as confused. For some reason in my production app I briefly see the 'inactive', but on the example app shared above that is not even showing, which tells me this issue has ramifications.

[migueldaipre]

Can you attach a reproducer with our Reproducer Template ?

[rodperottoni]

@migueldaipre the reproducer is already in the issue body. It's a Expo Snack with all the code seen in the video I recorded above.