@granite-js/react-native 0.0.0-dev-20250725013859

package/src/use-back-event/useBackEvent.tsx

@@ -0,0 +1,260 @@
+import { createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useVisibility } from '../visibility';
+
+export interface BackEventControls {
+  addEventListener: (...handlers: Array<() => void>) => void;
+  removeEventListener: (...handlers: Array<() => void>) => void;
+}
+
+interface PrivateBackEventControls extends BackEventControls {
+  handlersRef: Set<() => void>;
+  hasBackEvent: boolean;
+  onBack: () => void;
+}
+
+const BackEventContext = createContext<PrivateBackEventControls | null>(null);
+
+/**
+ * @component
+ * @name BackEventProvider
+ * @description
+ * A component that provides a `Context` for handling back events within the app. Using this component, child components can subscribe to and manage back events. Placing `BackEventProvider` at the top of the tree allows all back events to be handled centrally.
+ *
+ * @param {ReactNode} children Child components that will control back events.
+ * @param {BackEventControls} backEvent Control object for handling back events. You can register back events using the `addEventListener` method and remove registered back events using the `removeEventListener` method.
+ * @returns {JSX.Element} A component that can handle back events.
+ *
+ * By adding `BackEventProvider` as shown below, child components can handle back events.
+ *
+ * @example
+ * ```jsx
+ * const backEventControls = {
+ *   addEventListener: (handler) => { ... },
+ *   removeEventListener: (handler) => { ... },
+ * };
+ *
+ * <BackEventProvider backEvent={backEventControls}>
+ *   <App />
+ * </BackEventProvider>
+ * ```
+ */
+export function BackEventProvider({
+  children,
+  backEvent,
+}: {
+  children: ReactNode;
+  backEvent: PrivateBackEventControls;
+}) {
+  return <BackEventContext.Provider value={backEvent}>{children}</BackEventContext.Provider>;
+}
+
+/**
+ * @name useBackEventState
+ * @description
+ * A hook that returns the current back event state and control methods managed by `BackEventProvider`. Using this hook, you can add or remove back event handlers and check the current state.
+ *
+ * @returns {{ handlers: Array<() => void>, backEvent: BackEventControls, routerProps: { canGoBack: boolean, onBack: () => void } }} Returns an array of back event handlers, the event control method `backEvent`, and `routerProps` that can be used when handling back functionality in the router.
+ *
+ * Using this Hook, you can add or remove back event handlers and integrate with the router.
+ *
+ * @example
+ * ```javascript
+ * const { backEvent, routerProps } = useBackEventState();
+ * // Handle back events in the router through routerProps
+ * backEvent.addEventListener(() => {
+ *   console.log('Back event triggered');
+ * });
+ *
+ * return (
+ *   <BackEventProvider backEvent={backEvent}>
+ *     <GraniteRouter {...routerProps} context={context} prefix={'scheme://testbench'} />
+ *   </BackEventProvider>
+ * );
+ *
+ * ```
+ */
+export function useBackEventState() {
+  const handlersRef = useRef<Set<() => void>>(new Set()).current;
+  const [hasBackEvent, setHasBackEvent] = useState(false);
+
+  const addEventListener = useCallback(
+    (...handlers: Array<() => void>) => {
+      for (const handler of handlers) {
+        handlersRef.add(handler);
+      }
+
+      if (handlersRef.size > 0) {
+        setHasBackEvent(true);
+      }
+    },
+    [handlersRef]
+  );
+
+  const removeEventListener = useCallback(
+    (...handlers: Array<() => void>) => {
+      for (const handler of handlers) {
+        handlersRef.delete(handler);
+      }
+
+      if (handlersRef.size === 0) {
+        setHasBackEvent(false);
+      }
+    },
+    [handlersRef]
+  );
+
+  const backEvent = useMemo((): PrivateBackEventControls => {
+    return {
+      addEventListener,
+      removeEventListener,
+      handlersRef,
+      hasBackEvent,
+      onBack: () => {
+        handlersRef.forEach((handler) => handler());
+      },
+    };
+  }, [addEventListener, handlersRef, hasBackEvent, removeEventListener]);
+
+  return backEvent;
+}
+
+/**
+ * @public
+ * @category Screen Control
+ * @name useBackEvent
+ * @description
+ * A Hook that returns a controller object for registering and removing back events. Using this Hook, you can handle back events only when a specific component is active.
+ * Use `addEventListener` to register back events and `removeEventListener` to remove them.
+ * Registered back events are only active when the user is viewing the screen. The condition for viewing the screen is determined using [useVisibility](/en/reference/react-native/Screen%20Control/useVisibility).
+ *
+ * Using this Hook, you can define logic to handle back events in specific components.
+ *
+ * @returns {BackEventControls} An object that can control back events. This object includes the `addEventListener` method for registering events and the `removeEventListener` method for removing them.
+ *
+ * @throws {Error} Throws an error if this hook is not used within a `BackEventProvider`.
+ *
+ * @example
+ *
+ * ### Example of Registering and Removing Back Events
+ *
+ * - **When the "Add BackEvent" button is pressed, a back event is registered.** After that, pressing the back button shows an alert with "back" and prevents actual navigation.
+ * - **When the "Remove BackEvent" button is pressed, the registered event is removed.** After that, pressing the back button navigates back normally as per default behavior.
+ *
+ * ```tsx
+ * import { useEffect, useState } from 'react';
+ * import { Alert, Button, View } from 'react-native';
+ * import { useBackEvent } from '@granite-js/react-native';
+ *
+ * export function UseBackEventExample() {
+ *   const backEvent = useBackEvent();
+ *
+ *   const [handler, setHandler] = useState<{ callback: () => void } | undefined>(undefined);
+ *
+ *   useEffect(() => {
+ *     const callback = handler?.callback;
+ *
+ *     if (callback != null) {
+ *       backEvent.addEventListener(callback);
+ *
+ *       return () => {
+ *         backEvent.removeEventListener(callback);
+ *       };
+ *     }
+ *
+ *     return;
+ *   }, [backEvent, handler]);
+ *
+ *   return (
+ *     <View>
+ *       <Button
+ *         title="Add BackEvent"
+ *         onPress={() => {
+ *           setHandler({ callback: () => Alert.alert('back') });
+ *         }}
+ *       />
+ *       <Button
+ *         title="Remove BackEvent"
+ *         onPress={() => {
+ *           setHandler(undefined);
+ *         }}
+ *       />
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export function useBackEvent() {
+  const context = useContext(BackEventContext);
+  const handlersRef = useRef<Set<() => void>>(new Set()).current;
+
+  const isVisible = useVisibility();
+
+  if (context == null) {
+    throw new Error('useBackEvent must be used within a BackEventProvider');
+  }
+
+  const contextAddEventListener = context.addEventListener;
+  const contextRemoveEventListener = context.removeEventListener;
+
+  const addEventListener = useCallback(
+    (...handlers: Array<() => void>) => {
+      for (const handler of handlers) {
+        handlersRef.add(handler);
+        contextAddEventListener(handler);
+      }
+    },
+    [contextAddEventListener, handlersRef]
+  );
+
+  const removeEventListener = useCallback(
+    (...handlers: Array<() => void>) => {
+      for (const handler of handlers) {
+        handlersRef.delete(handler);
+        contextRemoveEventListener(handler);
+      }
+    },
+    [contextRemoveEventListener, handlersRef]
+  );
+
+  /**
+   * Events must be removed when navigating to another page.
+   * If events are not removed, interference will occur.
+   */
+  useEffect(() => {
+    if (!isVisible) {
+      return;
+    }
+
+    /** Re-register handlers stored locally. */
+    for (const handler of handlersRef) {
+      contextAddEventListener(handler);
+    }
+
+    return () => {
+      for (const handler of handlersRef) {
+        contextRemoveEventListener(handler);
+      }
+    };
+  }, [contextAddEventListener, contextRemoveEventListener, handlersRef, isVisible]);
+
+  const backEvent = useMemo((): BackEventControls => {
+    return {
+      addEventListener,
+      removeEventListener,
+    };
+  }, [addEventListener, removeEventListener]);
+
+  return backEvent;
+}
+
+export function useBackEventContext() {
+  const context = useContext(BackEventContext);
+  if (context == null) {
+    throw new Error('useBackEvent must be used within a BackEventProvider');
+  }
+
+  return {
+    onGoBack: context.onBack,
+    hasBackEvent: context.hasBackEvent,
+  };
+}

package/src/utils/noop.ts

@@ -0,0 +1 @@
+export const noop = () => {};

package/src/utils/usePreservedCallback.ts

@@ -0,0 +1,16 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+export function usePreservedCallback<Callback extends (...args: any[]) => any>(callback: Callback) {
+  const callbackRef = useRef<Callback>(callback);
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  return useCallback(
+    (...args: any[]) => {
+      return callbackRef.current(...args);
+    },
+    [callbackRef]
+  ) as Callback;
+}

package/src/video/Video.tsx

@@ -0,0 +1,104 @@
+import type { default as VideoRef } from '@granite-js/native/react-native-video';
+import { ComponentProps, forwardRef, useMemo, useState } from 'react';
+import { Animated, Platform } from 'react-native';
+import * as instance from './instance';
+import { useVisibility } from '../visibility';
+
+const AnimatedRNVideo = Animated.createAnimatedComponent(instance.Component);
+
+type VideoProps = ComponentProps<typeof AnimatedRNVideo>;
+
+/**
+ * @public
+ * @name Video
+ * @category UI
+ * @description
+ * The Video component implements audio focus control logic to prevent the sandbox app from stopping music playing in other apps. It automatically plays or pauses based on the app's state. For example, when the app transitions to the background, the video automatically pauses.
+ *
+ * ::: warning
+ * The Video component uses [react-native-video version (6.0.0-alpha.6)](https://github.com/TheWidlarzGroup/react-native-video/tree/v6.0.0-alpha.6). Therefore, some types or features may not be compatible with the latest version.
+ * :::
+ *
+ * @property {boolean} [isAvailable] Value to check if the `Video` component can be used. You can check this value to determine if the user can render the video or if video functionality is unavailable due to environmental constraints (e.g., network connection issues, unsupported devices). If this value is `false`, you should handle it by not rendering the video or providing alternative content.
+ *
+ * @param {VideoProperties} [props] Properties provided by [`react-native-video`](https://github.com/TheWidlarzGroup/react-native-video/tree/v6.0.0-alpha.6).
+ * @param {string} [props.source.uri] Source of the video to play. Can be set to a file path or URL.
+ * @param {boolean} [props.muted=false] Controls the mute state of the video. If `true`, the video's audio is muted; if `false`, the audio plays. Default is `false`.
+ * @param {boolean} [props.paused=false] Property to control video playback. If `true`, the video is paused; if `false`, the video plays. Default is `false`, and it autoplays.
+ * @param {OnAudioFocusChanged} [props.onAudioFocusChanged] Callback function called when audio focus changes. Must be implemented when `muted` is `false`. For more details, see [OnAudioFocusChanged](/reference/react-native/Types/OnAudioFocusChanged.html).
+ * @param {Ref<VideoRef>} ref Reference object to access the video instance. Through this ref, you can access various methods of the video instance.
+ *
+ * @returns {JSX.Element} Returns a JSX element that renders the video. Uses `Animated` to provide smooth animation effects during video playback.
+ *
+ * @see [react-native-video] https://github.com/react-native-video/react-native-video
+ * For detailed properties of the video component, please refer to the official documentation.
+ * @see [react-native-video-6.0.0] https://github.com/TheWidlarzGroup/react-native-video/releases/tag/v6.0.0
+ * This is the source code of the version currently installed in the sandbox app.
+ *
+ * @example
+ *
+ * ### Video Autoplay Example
+ *
+ * ```tsx
+ * import { useRef } from 'react';
+ * import { View } from 'react-native';
+ * import { Video } from '@granite-js/react-native';
+ *
+ * export function VideoExample() {
+ *   const videoRef = useRef(null);
+ *
+ *   return (
+ *     <View>
+ *       <Video
+ *         ref={videoRef}
+ *         source={{ uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' }}
+ *         muted={true}
+ *         paused={false}
+ *         resizeMode="cover"
+ *         style={{ width: 300, height: 200, borderWidth: 1 }}
+ *       />
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+const Video = forwardRef<VideoRef, instance.VideoNativeProps>((props, ref) => {
+  const [isFocused, setIsFocused] = useState(props.muted || props.paused);
+  const visible = useVisibility();
+
+  // If focus state is not managed directly by the service through onAudioFocusChanged, control the paused value based on internal state.
+  const paused = useMemo(
+    () => !visible || props.paused || (!props.onAudioFocusChanged && !isFocused),
+    [props.onAudioFocusChanged, props.paused, visible, isFocused]
+  );
+
+  const disableFocus = props.muted || props.paused;
+  const mixWithOthers = props.muted ? 'mix' : undefined;
+
+  return (
+    <AnimatedRNVideo
+      ref={ref as any}
+      progressUpdateInterval={16}
+      disableFocus={Platform.OS === 'ios' ? false : disableFocus}
+      playWhenInactive
+      onAudioFocusChanged={(event: any) => {
+        setIsFocused(event.hasAudioFocus);
+        props.onAudioFocusChanged?.(event);
+      }}
+      {...props}
+      // Internal state is used to control the component's states.
+      paused={paused}
+      mixWithOthers={mixWithOthers}
+    />
+  );
+});
+
+Object.defineProperty(Video, 'isAvailable', {
+  value: instance.isAvailable,
+  enumerable: true,
+  writable: false,
+  configurable: false,
+});
+
+export { Video };
+export type { VideoRef, VideoProps };

package/src/video/index.ts

@@ -0,0 +1 @@
+export * from './Video';

package/src/video/instance.tsx

@@ -0,0 +1,28 @@
+import type { VideoProperties } from '@granite-js/native/react-native-video';
+import { Component as ReactComponent, forwardRef, type ComponentType, type ForwardedRef } from 'react';
+import { View } from 'react-native';
+
+export type VideoNativeProps = Omit<VideoProperties, 'onAudioFocusChanged'> & {
+  onAudioFocusChanged?: (event: { hasAudioFocus: boolean }) => void;
+};
+
+class FallbackComponent extends ReactComponent<VideoNativeProps & { innerRef: ForwardedRef<View> }> {
+  render() {
+    return <View ref={this.props.innerRef} />;
+  }
+}
+
+const ForwardedComponent = forwardRef<View, VideoNativeProps>((props: VideoNativeProps, ref) => (
+  <FallbackComponent {...props} innerRef={ref} />
+));
+
+function getVideoComponent(): ComponentType<VideoNativeProps> {
+  try {
+    return require('@granite-js/native/react-native-video')?.default;
+  } catch {
+    return ForwardedComponent;
+  }
+}
+
+export const Component = getVideoComponent();
+export const isAvailable = Component !== ForwardedComponent;

package/src/visibility/VisibilityProvider.tsx

@@ -0,0 +1,36 @@
+import { ReactElement, ReactNode } from 'react';
+import { AppStateProvider } from './useIsAppForeground';
+import { VisibilityChangedProvider } from './useVisibilityChanged';
+
+interface Props {
+  isVisible: boolean;
+  children: ReactNode;
+}
+
+/**
+ * @name VisibilityProvider
+ * @description
+ * A Provider that manages whether a ReactNative view is currently in the foreground state.
+ * @param {boolean} isVisible - Whether the app is in the foreground state.
+ * @param {ReactNode | undefined} children - Child components that observe `AppState`.
+ * @returns {ReactElement} - A React Provider component wrapped with `VisibilityChangedProvider`.
+ * @example
+ * ```typescript
+ *
+ * function App() {
+ *  return (
+ *   <VisibilityProvider isVisible={true}>
+ *     <MyApp />
+ *   </VisibilityProvider>
+ *  );
+ * }
+ *
+ * ```
+ */
+export function VisibilityProvider({ isVisible, children }: Props): ReactElement {
+  return (
+    <VisibilityChangedProvider isVisible={isVisible}>
+      <AppStateProvider>{children}</AppStateProvider>
+    </VisibilityChangedProvider>
+  );
+}

package/src/visibility/index.ts

@@ -0,0 +1,6 @@
+export * from './react-navigation';
+export * from './useIsAppForeground';
+export * from './useVisibility';
+export * from './useVisibilityChanged';
+export * from './useVisibilityChange';
+export * from './VisibilityProvider';

package/src/visibility/react-navigation/index.ts

@@ -0,0 +1,2 @@
+export * from './useIsFocusedSafely';
+export * from './useNavigationSafely';

package/src/visibility/react-navigation/useIsFocusedSafely.tsx

@@ -0,0 +1,58 @@
+import { useDebugValue, useEffect, useState } from 'react';
+import { useNavigationSafely } from './useNavigationSafely';
+
+/**
+ * @name useIsFocusedSafely
+ * @category Hooks
+ * @kind function
+ * @link https://github.com/react-navigation/react-navigation/blob/%40react-navigation/native%406.1.18/packages/core/src/useIsFocused.tsx
+ * @description
+ * Returns whether the current screen is in focus.
+ *
+ * A Hook that safely uses `useIsFocused` provided by `@react-navigation/native`.
+ * This Hook is based on `useIsFocused` from `@react-navigation/native`, but modified to not throw errors when `navigation` or `root` objects are `null` or `undefined`.
+ * It ensures that users don't see errors even when the code is used in environments where `@react-navigation/native` is not used.
+ *
+ * @returns {boolean} - Returns the focus state of the current screen.
+ * @example
+ * ```typescript
+ *  const isFocused = useIsFocusedSafely();
+ *  console.log(isFocused); // true or false
+ * ```
+ */
+export function useIsFocusedSafely(): boolean {
+  const navigation = useNavigationSafely();
+  const isNavigationFocused = () => navigation?.isFocused() ?? true;
+
+  const [isFocused, setIsFocused] = useState(isNavigationFocused());
+
+  const valueToReturn = isNavigationFocused();
+
+  if (isFocused !== valueToReturn) {
+    // If the value has changed since the last render, we need to update it.
+    // This could happen if we missed an update from the event listeners during re-render.
+    // React will process this update immediately, so the old subscription value won't be committed.
+    // It is still nice to avoid returning a mismatched value though, so let's override the return value.
+    // This is the same logic as in https://github.com/facebook/react/tree/master/packages/use-subscription
+    setIsFocused(valueToReturn);
+  }
+
+  useEffect(() => {
+    if (navigation == null) {
+      return;
+    }
+
+    const unsubscribeFocus = navigation.addListener('focus', () => setIsFocused(true));
+
+    const unsubscribeBlur = navigation.addListener('blur', () => setIsFocused(false));
+
+    return () => {
+      unsubscribeFocus();
+      unsubscribeBlur();
+    };
+  }, [navigation]);
+
+  useDebugValue(valueToReturn);
+
+  return valueToReturn;
+}

package/src/visibility/react-navigation/useNavigationSafely.tsx

@@ -0,0 +1,30 @@
+import {
+  NavigationContainerRefContext,
+  NavigationContext,
+  NavigationProp,
+} from '@granite-js/native/@react-navigation/native';
+import { useContext } from 'react';
+
+/**
+ * @name useNavigationSafely
+ * @category Hooks
+ * @kind function
+ * @link https://github.com/react-navigation/react-navigation/blob/d1cd940d9a3fb46bec0eb6bf4f8023789fc93b28/packages/core/src/useNavigation.tsx#L13
+ * @description
+ * A Hook that safely uses [`useNavigation`](https://reactnavigation.org/docs/use-navigation/) from `@react-navigation/native` for managing navigation between screens.
+ * This Hook is based on `useNavigation` provided by `@react-navigation/native`, but operates more safely by not throwing errors when `navigation` or `root` objects are `null` or `undefined`.
+ * It also ensures the code runs safely in environments where `@react-navigation/native` is not used, preventing users from experiencing errors.
+ *
+ * @returns {NavigationProp<ReactNavigation.RootParamList> | undefined} - The screen is in a visible state.
+ * @example
+ * ```typescript
+ *  const navigation = useNavigationSafely();
+ *  const isNavigationFocused = () => navigation?.isFocused() ?? true;
+ * ```
+ */
+export function useNavigationSafely(): NavigationProp<ReactNavigation.RootParamList> | undefined {
+  const root = useContext(NavigationContainerRefContext);
+  const navigation = useContext(NavigationContext);
+
+  return (navigation ?? root ?? undefined) as NavigationProp<ReactNavigation.RootParamList> | undefined;
+}

package/src/visibility/useIsAppForeground.tsx

@@ -0,0 +1,73 @@
+import { createContext, ReactElement, ReactNode, useContext, useEffect, useState } from 'react';
+import { AppState, AppStateStatus } from 'react-native';
+
+interface Props {
+  children: ReactNode;
+}
+
+const AppStateContext = createContext<AppStateStatus | undefined>(undefined);
+
+/**
+ * @name AppStateProvider
+ * @description
+ * A Provider that manages the `AppState` of React Native screens. This Provider manages the app's state (active, background, etc.) and passes it to child components that subscribe to it.
+ * @link https://reactnative.dev/docs/appstate
+ * @param {Props} children - Child components to be wrapped by `AppStateProvider`. These components can detect and respond to changes in `AppState`.
+ * @returns {ReactElement} - A React Provider component wrapped with `AppStateProvider`.
+ * @example
+ * ```tsx
+ * export function App() {
+ *   return (
+ *     <AppStateProvider>
+ *      <MyApp />
+ *     </AppStateProvider>
+ *   );
+ * }
+ * ```
+ */
+export function AppStateProvider({ children }: Props): ReactElement {
+  const [appState, setAppState] = useState<AppStateStatus>(AppState.currentState);
+
+  const handleAppStateChange = (status: AppStateStatus) => {
+    setAppState(status);
+  };
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', handleAppStateChange);
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  return <AppStateContext.Provider value={appState}>{children}</AppStateContext.Provider>;
+}
+
+/**
+ * @category Hooks
+ * @name useIsAppForeground
+ * @description
+ * Returns whether the React Native app is in the foreground state.
+ *
+ * @see https://reactnative.dev/docs/0.72/appstate#app-states
+ * @returns {boolean} - Returns whether the app is in the foreground state.
+ * @throws {Error} Throws an error when the managed AppState is `null`.
+ * @example
+ * ```typescript
+ *  const isForeground = useIsAppForeground();
+ * ```
+ */
+export const useIsAppForeground = (): boolean => {
+  const appState = useContext(AppStateContext);
+
+  if (appState == null) {
+    throw new Error('useIsAppForeground must be used within a AppStateProvider');
+  }
+
+  /**
+   * In iOS, the 'inactive' state is also considered as foreground.
+   * 'inactive' is a state that only exists in iOS, for example, when the control center or notification panel is open.
+   * @see https://reactnative.dev/docs/0.72/appstate#app-states
+   */
+  return appState === 'active' || appState === 'inactive';
+};

package/src/visibility/useVisibility.tsx

@@ -0,0 +1,54 @@
+import { Platform } from 'react-native';
+import { useIsFocusedSafely } from './react-navigation/useIsFocusedSafely';
+import { useIsAppForeground } from './useIsAppForeground';
+import { useVisibilityChanged } from './useVisibilityChanged';
+
+/**
+ * @public
+ * @category Screen Control
+ * @name useVisibility
+ * @description
+ * 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](/reference/react-native/Share/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.
+ *
+ * @returns {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>;
+ * }
+ * ```
+ */
+export function useVisibility(): boolean {
+  const visible = useVisibilityChanged();
+  const isForeground = useIsAppForeground();
+  const isReactNavigationFocused = useIsFocusedSafely();
+
+  /**
+   * We don't use AppState in Android. (AppState uses `onHostPause` and `onHostResume`.)
+   * From Android version 5.172.0, `visibilityChanged` uses `onHostStop` and `onHostStart`.
+   *  - For example, in Android, the `visible` state is maintained even when the share modal appears (share app bridge call).
+   */
+  const androidCondition = visible && isReactNavigationFocused;
+  const iOSCondition = visible && isForeground && isReactNavigationFocused;
+
+  return Platform.OS === 'android' ? androidCondition : iOSCondition;
+}