expo-app-visibility

A React Native/Expo module that provides true app visibility detection using native lifecycle events.

Installation

npm install expo-app-visibility

Setup

This module uses Expo Modules API. Make sure you have expo installed in your project.

For bare React Native projects

After installing, run:

npx expo install

For managed Expo projects

No additional setup required.

Usage

import { useEffect } from 'react';
import AppVisibility from 'expo-app-visibility';

export default function App() {
  useEffect(() => {
    const subscription = AppVisibility.addListener('AppVisible', (visible: boolean) => {
      if (visible) {
        console.log('App came to foreground');
      } else {
        console.log('App went to background');
      }
    });

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

  return (
    // Your app content
  );
}

API

Events

AppVisible

Fired when the app visibility changes.

Parameters:

• visible (boolean): true when app comes to foreground, false when it goes to background

Methods

addListener(eventName, listener)

Subscribe to app visibility changes.

Parameters:

• eventName: 'AppVisible'
• listener: (visible: boolean) => void

Returns: Subscription object with remove() method

Platform Support

• ✅ Android
• ✅ iOS (coming soon)
• ❌ Web

License

MIT

Contributing

See the contributing guide to learn how to contribute to the repository.