import { Platform } from 'react-native'; import { useIsFocusedSafely } from './react-navigation/useIsFocusedSafely'; import { useIsAppForeground } from './useIsAppForeground'; import { useVisibilityChanged } from './useVisibilityChanged'; /** * @public * @category 화면 제어 * @name useVisibility * @description * 화면이 사용자에게 보이는 상태인지 여부를 반환해요. * 앱의 화면이 현재 사용자에게 보인다면 `true`를 반환하고, 보이지 않는다면 `false`를 반환해요. 단, 시스템 공유하기 모달([share](/react-native/reference/react-native-bedrock/BedrockModules/share))을 열고 닫을 때는 화면이 보이는 상태가 바뀌지 않아요. * * 사용 예시는 다음과 같아요. * - 다른 앱으로 전환하거나 홈 버튼을 누르면 `false` 를 반환해요. * - 다시 토스 앱으로 돌아오거나 화면이 보이면 `true` 를 반환해요. * - 토스 앱 내 다른 서비스로 이동하면 `false` 를 반환해요. * * @returns {boolean} - 현재 화면이 사용자에게 보이는지 여부에요. * @example * * ### 화면이 보이는 상태를 확인하는 예제 * * ```tsx * import { useEffect } from 'react'; * import { Text } from 'react-native'; * import { useVisibility } from 'react-native-bedrock'; * * export function UseVisibilityExample() { * const visibility = useVisibility(); * * useEffect(() => { * console.log({ visibility }); * }, [visibility]); * * return 홈 화면으로 나갔다 들어오면 로그가 남겨져요.; * } * ``` */ export function useVisibility(): boolean { const visible = useVisibilityChanged(); const isForeground = useIsAppForeground(); const isReactNavigationFocused = useIsFocusedSafely(); /** * 안드로이드에서는 AppState를 사용하지 않아요. (AppState는 `onHostPause`와 `onHostResume`을 사용해요.) * 안드로이드 5.172.0 버전부터 `visibilityChanged`는 `onHostStop`과 `onHostStart`를 사용해요. * - 예를 들어, 안드로이드에서 공유 모달(share 앱브릿지 호출)이 뜨는 경우에도 `visible` 상태가 유지돼요. */ const androidCondition = visible && isReactNavigationFocused; const iOSCondition = visible && isForeground && isReactNavigationFocused; return Platform.OS === 'android' ? androidCondition : iOSCondition; }