@granite-js/react-native 0.0.1

package/dist/router/hooks/useRouterControls.d.ts

@@ -0,0 +1,11 @@
+import { type ComponentType, type PropsWithChildren } from 'react';
+import { RequireContext } from '../types/RequireContext';
+export interface RouterControlsConfig {
+    prefix: string;
+    context: RequireContext;
+    screenContainer?: ComponentType<PropsWithChildren<any>>;
+}
+export declare function useRouterControls({ prefix, context, screenContainer: ScreenContainer }: RouterControlsConfig): {
+    Screens: import("react/jsx-runtime").JSX.Element[];
+    linkingOptions: import("@react-navigation/native").LinkingOptions<{}>;
+};

package/dist/router/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Router';
+export { getRouteScreens, getScreenPathMapConfig, defaultParserParams } from './utils';
+export * from './types';

package/dist/router/types/RequireContext.d.ts

@@ -0,0 +1,7 @@
+export interface RequireContext {
+    keys(): string[];
+    (id: string): any;
+    <T>(id: string): T;
+    resolve(id: string): string;
+    id: string;
+}

package/dist/router/types/RouteScreen.d.ts

@@ -0,0 +1,16 @@
+import { Screen } from './Screen';
+/**
+ * @name RouteScreen
+ */
+export interface RouteScreen {
+    /**
+     * @name path
+     * @description Path information (e.g. "/", "/list", "/list/:id", etc.)
+     */
+    path: string;
+    /**
+     * @name component
+     * @description Screen component
+     */
+    component: Screen;
+}

package/dist/router/types/Screen.d.ts

@@ -0,0 +1,23 @@
+import type { NativeStackNavigationOptions } from '@granite-js/native/@react-navigation/native-stack';
+import type { ComponentType } from 'react';
+/**
+ * @name Screen
+ * @description A Screen that serves as a unit of navigation
+ * @example
+ *
+ * ```ts
+ * function Page() {
+ *  // ...
+ * }
+ *
+ * Page.screenOptions = {
+ *   // ...
+ * }
+ * ```
+ */
+export type Screen = ComponentType & GraniteScreenOptions;
+interface GraniteScreenOptions {
+    /** @description Add this when customization is needed for NativeStack Screen's screenOptions */
+    screenOptions?: NativeStackNavigationOptions;
+}
+export {};

package/dist/router/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './RequireContext';
+export * from './RouteScreen';
+export * from './Screen';

package/dist/router/types/screen-option.d.ts

@@ -0,0 +1,4 @@
+import { NativeStackNavigationOptions } from '@granite-js/native/@react-navigation/native-stack';
+export declare const DEFAULT_BACKGROUND_COLOR = "#ffffff";
+export declare const DEFAULT_HEADER_TINT_COLOR = "#333d4b";
+export declare const BASE_STACK_NAVIGATOR_STYLE: NativeStackNavigationOptions;

package/dist/router/utils/createParentRouteScreenMap.d.ts

@@ -0,0 +1,8 @@
+import type { RouteScreen } from '../types/RouteScreen';
+/**
+ * @name createParentRouteScreenMap
+ * @description
+ *   Finds a specific keyword in a given list of files and
+ *   maps each page/layout to use its "nearest parent layout"
+ */
+export declare function createParentRouteScreenMap(routeScreens: RouteScreen[], keyword: string): Map<string, RouteScreen>;

package/dist/router/utils/defaultParserParams.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Parses URL query string and converts it to an object.
+ * @param params - Query string to parse
+ * @returns Parsed query object
+ * @example
+ * // Input: { foo: '123', bar: 'true' }
+ * // Output: { foo: 123, bar: true }
+ */
+export declare function defaultParserParams(params?: Record<string, string>): Record<string, unknown>;

package/dist/router/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './screen';
+export * from './defaultParserParams';

package/dist/router/utils/matchers.d.ts

@@ -0,0 +1,2 @@
+/** `[page]` -> `page` */
+export declare function matchDynamicName(name: string): string | undefined;

package/dist/router/utils/mergeParentLayoutScreen.d.ts

@@ -0,0 +1,18 @@
+import { FC, ReactNode } from 'react';
+import { RouteScreen } from '../types/RouteScreen';
+export type LayoutScreen = FC<{
+    children: ReactNode;
+}>;
+/**
+ * Starting from the layout mapped to a specific path, traverses up to parent layouts,
+ * creates an array in the order of "innermost → outermost",
+ * then builds up the final wrapper component using reduce.
+ *
+ * Example) map:
+ *   './item/detail' => { component: ItemLayout, path: './item/_layout' }
+ *   './item/_layout' => { component: RootLayout, path: './_layout' }
+ *
+ * => layoutChain = [ItemLayout, RootLayout]
+ * => Final rendering result: <RootLayout><ItemLayout>children</ItemLayout></RootLayout>
+ */
+export declare function mergeParentLayoutScreen(screens: Map<string, RouteScreen>, path: string): LayoutScreen;

package/dist/router/utils/path.d.ts

@@ -0,0 +1,53 @@
+/**
+ * @name excludeFileExtension
+ * @description Removes file extension.
+ */
+export declare function excludeFileExtension(name: string): string;
+/**
+ * @name excludeRelativePath
+ * @description Removes relative path from path.
+ * @example
+ * ```ts
+ * excludeRelativePath("./index.tsx") // "index.tsx"
+ * excludeRelativePath("./list/detail.tsx") // "list/detail.tsx"
+ * excludeRelativePath("../../index.tsx") // "index.tsx"
+ * ```
+ */
+export declare function excludeRelativePath(filePath: string): string;
+/**
+ * @name excludeDynamicNamePattern
+ * @description Removes `[` `]` from dynamic route pattern.
+ * @example
+ * ```ts
+ * excludeDynamicNamePattern("[id]") // "id"
+ * excludeDynamicNamePattern("[id]/[name]") // "id/name"
+ * ```
+ */
+export declare function excludeDynamicNamePattern(filePath: string): string;
+/**
+ * @name getRoutePath
+ * @description Converts to route path.
+ * @example
+ * ```ts
+ * getRoutePath('./index.tsx') // "/"
+ * getRoutePath('./list/index.tsx') // "/list"
+ * getRoutePath('./list/detail.tsx') // "/list/detail"
+ * getRoutePath('./list/[id].js') // "/list/:id"
+ * ```
+ */
+export declare function getRoutePath(filePath: string): string;
+/**
+ * @name getFileNameFromPath
+ * @description Extracts filename from file path.
+ * @example
+ * ```ts
+ * getFileNameFromPath('/path/to/file.txt') // "file.txt"
+ * getFileNameFromPath('file.txt') // "file.txt"
+ * getFileNameFromPath('') // ""
+ * getFileNameFromPath('/path/to/directory/') // ""
+ * getFileNameFromPath('/path/to/file.txt', { withExtension: false }) // "file"
+ * ```
+ */
+export declare function getFileNameFromPath(filePath: string, options?: {
+    withExtension?: boolean;
+}): string;

package/dist/router/utils/screen.d.ts

@@ -0,0 +1,53 @@
+import { RequireContext, RouteScreen } from '../types';
+/**
+ * @kind function
+ * @name getRouteScreens
+ * @description
+ * Gets screens from the pages folder.
+ *
+ * @param {RequireContext} context - Object containing information about screens in Router
+ * @returns {RouteScreen[]} screens - Returns a list of screens that can be navigated to.
+ *
+ * @example
+ * ```tsx
+ * import { getRouteScreens } from '@granite-js/react-native';
+ *
+ * const context = require.context('../pages');
+ * const screens = getRouteScreens(context);
+ * ```
+ */
+export declare function getRouteScreens(context: RequireContext): RouteScreen[];
+/**
+ * @kind function
+ * @name getScreenPathMapConfig
+ * @description Maps paths of screens.
+ *
+ * @param {RouteScreen[]} routeScreens - List of screens that can be navigated to
+ *
+ * @example
+ * ```tsx
+ * import { registerPage, getRouteScreens, getScreenPathMapConfig, Router } from '@granite-js/react-native';
+ * import { context } from '../require.context';
+ *
+ * function App() {
+ *   return <Router context={context} prefix={'scheme://minibench'} />;
+ * }
+ *
+ * export default registerPage(
+ *   App,
+ *   'minibench',
+ *   getScreenPathMapConfig(getRouteScreens(context))
+ * );
+ * ```
+ */
+export declare function getScreenPathMapConfig(routeScreens: RouteScreen[]): ScreenPath;
+/**
+ * @name ScreenPath
+ * @description
+ * Type representing screen paths.
+ *
+ * @typedef {Record<string, { path?: string }>} ScreenPath
+ */
+export type ScreenPath = Record<string, {
+    path?: string;
+}>;

package/dist/scroll-view-inertial-background/ScrollViewInertialBackground.d.ts

@@ -0,0 +1,49 @@
+interface ScrollViewInertialBackgroundProps {
+    topColor?: string;
+    bottomColor?: string;
+    spacer?: number;
+}
+/**
+ * @public
+ * @category UI
+ * @name ScrollViewInertialBackground
+ * @description
+ * Adds background colors to the top and bottom spaces of iOS `ScrollView` content to provide a natural visual effect when scrolling.
+ * In iOS, when scrolling reaches the end, a slight bouncing effect occurs, known as the [Bounce effect](https://medium.com/@wcandillon/ios-bounce-list-effect-with-react-native-5102e3a83999). Setting background colors in the spaces above and below the content can provide a more consistent user experience.
+ *
+ * @param {object} [props] - `props` object passed to the component.
+ * @param {string} [props.topColor] - Background color to apply to the top area of the scroll. Default is `adaptive.background` which is automatically applied based on the system theme.
+ * @param {string} [props.bottomColor] - Background color to apply to the bottom area of the scroll. Default is `adaptive.background` which is automatically applied based on the system theme.
+ * @param {number} [props.spacer] - Specifies the size of the space between the top and bottom areas where the background color is applied. Default uses the screen height obtained from [`useWindowDimensions`](https://reactnative.dev/docs/next/usewindowdimensions).
+ *
+ * @example
+ *
+ * ### Adding background colors to the top and bottom of a scroll view
+ *
+ * Adds red background color to the top and blue to the bottom of the scroll view. The background color is applied to areas outside the scroll.
+ *
+ * ```tsx
+ * import { ScrollView, View, Text } from 'react-native';
+ * import { ScrollViewInertialBackground } from '@granite-js/react-native';
+ *
+ * const dummies = Array.from({ length: 20 }, (_, i) => i);
+ *
+ * export function InertialBackgroundExample() {
+ *   return (
+ *     <ScrollView>
+ *       <ScrollViewInertialBackground topColor="red" bottomColor="blue" />
+ *       {dummies.map((i) => (
+ *         <View
+ *           key={`dummy-${i}`}
+ *           style={{ width: '100%', height: 100, borderBottomColor: 'black', borderBottomWidth: 1 }}
+ *         >
+ *           <Text>Try scrolling.</Text>
+ *         </View>
+ *       ))}
+ *     </ScrollView>
+ *   );
+ * }
+ * ```
+ */
+export declare function ScrollViewInertialBackground({ topColor, bottomColor, spacer: _spacer, }: ScrollViewInertialBackgroundProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/scroll-view-inertial-background/index.d.ts

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

package/dist/types/global.d.ts

@@ -0,0 +1,18 @@
+export interface GraniteGlobal {
+    shared: {
+        buildNumber: string;
+    };
+    app: {
+        name: string;
+        scheme: string;
+        buildNumber: string;
+    };
+}
+declare global {
+    var window: {
+        __granite: GraniteGlobal;
+    };
+    var global: {
+        __granite: GraniteGlobal;
+    };
+}

package/dist/use-back-event/index.d.ts

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

package/dist/use-back-event/useBackEvent.d.ts

@@ -0,0 +1,135 @@
+import { ReactNode } from 'react';
+export interface BackEventControls {
+    addEventListener: (...handlers: Array<() => void>) => void;
+    removeEventListener: (...handlers: Array<() => void>) => void;
+}
+interface PrivateBackEventControls extends BackEventControls {
+    handlersRef: Set<() => void>;
+    hasBackEvent: boolean;
+    onBack: () => void;
+}
+/**
+ * @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 declare function BackEventProvider({ children, backEvent, }: {
+    children: ReactNode;
+    backEvent: PrivateBackEventControls;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * @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 declare function useBackEventState(): PrivateBackEventControls;
+/**
+ * @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 declare function useBackEvent(): BackEventControls;
+export declare function useBackEventContext(): {
+    onGoBack: () => void;
+    hasBackEvent: boolean;
+};
+export {};

package/dist/utils/noop.d.ts

@@ -0,0 +1 @@
+export declare const noop: () => void;

package/dist/utils/usePreservedCallback.d.ts

@@ -0,0 +1 @@
+export declare function usePreservedCallback<Callback extends (...args: any[]) => any>(callback: Callback): Callback;

package/dist/visibility/VisibilityProvider.d.ts

@@ -0,0 +1,27 @@
+import { ReactElement, ReactNode } from 'react';
+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 declare function VisibilityProvider({ isVisible, children }: Props): ReactElement;
+export {};

package/dist/visibility/index.d.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/dist/visibility/react-navigation/index.d.ts

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

package/dist/visibility/react-navigation/useIsFocusedSafely.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @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 declare function useIsFocusedSafely(): boolean;

package/dist/visibility/react-navigation/useNavigationSafely.d.ts

@@ -0,0 +1,19 @@
+import { NavigationProp } from '@granite-js/native/@react-navigation/native';
+/**
+ * @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 declare function useNavigationSafely(): NavigationProp<ReactNavigation.RootParamList> | undefined;

package/dist/visibility/useIsAppForeground.d.ts

@@ -0,0 +1,39 @@
+import { ReactElement, ReactNode } from 'react';
+interface Props {
+    children: ReactNode;
+}
+/**
+ * @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 declare function AppStateProvider({ children }: Props): ReactElement;
+/**
+ * @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 declare const useIsAppForeground: () => boolean;
+export {};

package/dist/visibility/useVisibility.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @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 declare function useVisibility(): boolean;

package/dist/visibility/useVisibilityChange.d.ts

@@ -0,0 +1,51 @@
+/**
+ * String representing whether the screen is visible.
+ * @typedef {string} VisibilityState
+ * @property {'visible'} visible - The screen is visible.
+ * @property {'hidden'} hidden - The screen is not visible.
+ */
+export type VisibilityState = 'visible' | 'hidden';
+/**
+ * @callback VisibilityCallback
+ * @param {VisibilityState} state - String representing the visibility state of the screen.
+ */
+export type VisibilityCallback = (state: VisibilityState) => void;
+/**
+ * @public
+ * @category Screen Control
+ * @name useVisibilityChange
+ * @kind function
+ * @description
+ * Calls a callback function with the visibility state when the screen's visibility changes.
+ * The callback function receives the return value from [useVisibility](/en/reference/react-native/Screen%20Control/useVisibility). If the return value is `true`, it passes 'visible', and if `false`, it passes 'hidden'.
+ *
+ * @param {VisibilityCallback} callback - Calls a callback function that receives visibility changes when the screen's visibility changes.
+ * @example
+ *
+ * ### Example of logging when screen visibility changes
+ *
+ * ```tsx
+ * 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>
+ *   );
+ * }
+ * ```
+ */
+export declare function useVisibilityChange(callback: VisibilityCallback): void;