useVisibilityChange

Deprecated. Use useVisibilityEffect for effects that run while visible and need cleanup. To handle both visible and hidden states explicitly, use useVisibility with React's useEffect. Existing calls keep their current behavior.

Calls a callback function with the visibility state when the screen's visibility changes. The callback function receives the return value from useVisibility. If the return value is true, it passes 'visible', and if false, it passes 'hidden'.

Signature

function useVisibilityChange(callback: VisibilityCallback): void;

Parameter

• callbackrequired · VisibilityCallback
  

  Calls a callback function that receives visibility changes when the screen's visibility changes.

Example

Example of logging when screen visibility changes

import { useState } from 'react';
import { Text, View } from 'react-native';
import { useVisibilityChange, VisibilityState } from '@granite-js/react-native';

export function UseVisibilityChangeExample() {
  const [visibilityHistory, setVisibilityHistory] = useState<VisibilityState[]>([]);

  useVisibilityChange((visibility) => {
    setVisibilityHistory((prev) => [...prev, visibility]);
  });

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

      {visibilityHistory.map((visibility, index) => (
        <Text key={index}>{JSON.stringify(visibility)}</Text>
      ))}
    </View>
  );
}