Skip to content

useVisibility ​

Returns whether the screen is visible to the user. Returns true if the app's screen is currently visible to the user, and false if it's not. However, the screen visibility state does not change when opening and closing the system share modal (share).

Usage examples:

  • Returns false when switching to another app or pressing the home button.
  • Returns true when returning to the granite app or when the screen becomes visible.
  • Returns false when navigating to another service within the granite app.

Signature ​

typescript
function useVisibility(): boolean;

Return Value ​

  • boolean

    Whether the current screen is visible to the user.

Example ​

Example of checking screen visibility ​

tsx
import { useEffect } from 'react';
import { Text } from 'react-native';
import { useVisibility } from '@granite-js/react-native';

export function UseVisibilityExample() {
  const visibility = useVisibility();

  useEffect(() => {
    console.log({ visibility });
  }, [visibility]);

  return <Text>Logs are created when leaving and returning to the home screen.</Text>;
}