useVisibilityChange

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>
  );
}