Appearance

화면이 사용자에게 보이는지 확인하기 ​

useVisibility 훅을 사용하면 화면이 현재 사용자에게 보이는지 여부를 알 수 있어요. 사용자가 화면을 보고 있을 때만 특정 작업을 실행하거나, 로그를 남길 수 있어요.

아래 코드는 화면이 사용자에게 보였을 때 visibility 값을 console.log로 확인하는 예시예요.

  • 홈 화면으로 이동하면 false가 기록되고, 다시 돌아오면 true가 기록돼요.
  • 외부 링크(https://toss.im)로 이동하면 false가 기록되고, 다시 돌아오면 true가 기록돼요.
tsx
import { useVisibility } from '@react-native-bedrock/core';
import { useEffect } from 'react';
import { Button, Linking } from 'react-native';

export default function VisibilityPage() {
  const visibility = useVisibility();

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

  return (
    <Button
      onPress={() => {
        Linking.openURL('https://toss.im');
      }}
      title="https://toss.im 이동"
    />
  );
}

/**
 * 출력 예시:
 * { "visibility": false }
 * { "visibility": true }
 * { "visibility": false }
 * { "visibility": true }
 */

상태 변경 감지하기 ​

useVisibilityChange 훅을 사용하면 페이지나 컴포넌트가 사용자에게 보이는지 여부가 변경될 때 이를 감지할 수 있어요. 화면이 보이는 상태가 바뀌면 전달된 콜백 함수가 호출돼요. 예를 들어, 사용자가 다른 탭으로 이동하거나, 창을 최소화할 때 콜백이 호출돼요.

아래 코드는 화면의 보이는 상태가 변경될 때 visibilityState 값을 console.log로 기록하는 예시예요.

  • 홈 화면으로 이동하면 hidden, 다시 돌아오면 visible을 기록해요.
  • 외부 링크(https://toss.im)로 이동하면 hidden을 기록하고, 다시 돌아오면 visible을 기록해요.
tsx
import { useVisibilityChange } from '@react-native-bedrock/core';
import { Button, Linking } from 'react-native';

export default function ImagePage() {
  useVisibilityChange((visibilityState) => {
    console.log({ visibilityState });
  });

  return (
    <Button
      onPress={() => {
        Linking.openURL('https://toss.im');
      }}
      title="https://toss.im 이동"
    />
  );
}

/**
 * 출력 예시:
 * { "visibilityState": "hidden" }
 * { "visibilityState": "visible" }
 * { "visibilityState": "hidden" }
 * { "visibilityState": "visible" }
 */

레퍼런스 ​