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

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,37 @@
+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
+ */
+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/status-bar/StatusBar.android.d.ts

@@ -0,0 +1,3 @@
+import type { StatusBarProps } from './types';
+export declare function StatusBar({ style, animated, hidden, backgroundColor, translucent }: StatusBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function useStatusBar({ style, animated, hidden, backgroundColor, translucent }: StatusBarProps): void;

package/dist/status-bar/StatusBar.ios.d.ts

@@ -0,0 +1,3 @@
+import type { StatusBarProps } from './types';
+export declare function StatusBar(props: StatusBarProps): null;
+export declare function useStatusBar({ style, hidden }: StatusBarProps): void;

package/dist/status-bar/index.d.ts

@@ -0,0 +1,2 @@
+export { StatusBar, useStatusBar } from './StatusBar';
+export type { StatusBarProps, StatusBarStyle } from './types';

package/dist/status-bar/types.d.ts

@@ -0,0 +1,20 @@
+export type StatusBarStyle = 'light' | 'dark' | 'auto' | 'inverted';
+export type StatusBarProps = {
+    /**
+     * @default 'auto'
+     */
+    style?: StatusBarStyle;
+    hidden?: boolean;
+    /**
+     * @platform android
+     */
+    animated?: boolean;
+    /**
+     * @platform android
+     */
+    backgroundColor?: string;
+    /**
+     * @platform android
+     */
+    translucent?: boolean;
+};

package/dist/status-bar/utils.d.ts

@@ -0,0 +1,3 @@
+import type { StatusBarStyle } from './types';
+import type { ColorPreference } from '../initial-props';
+export declare function toStatusBarContentStyle(statusBarStyle?: StatusBarStyle, colorPreference?: ColorPreference): 'light-content' | 'dark-content';

package/dist/types/global.d.ts

@@ -0,0 +1,14 @@
+export interface GraniteGlobal {
+    app: {
+        name: string;
+        scheme: 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/video/Video.d.ts

@@ -0,0 +1,67 @@
+import type { default as VideoRef } from '@granite-js/native/react-native-video';
+import { ComponentProps } from 'react';
+import { Animated } from 'react-native';
+import * as instance from './instance';
+declare const AnimatedRNVideo: Animated.AnimatedComponent<import("react").ComponentType<instance.VideoNativeProps>>;
+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>
+ *   );
+ * }
+ * ```
+ */
+declare const Video: import("react").ForwardRefExoticComponent<Omit<import("react-native-video").VideoProperties, "onAudioFocusChanged"> & {
+    onAudioFocusChanged?: (event: {
+        hasAudioFocus: boolean;
+    }) => void;
+} & import("react").RefAttributes<VideoRef>>;
+export { Video };
+export type { VideoRef, VideoProps };

package/dist/video/index.d.ts

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

package/dist/video/instance.d.ts

@@ -0,0 +1,9 @@
+import type { VideoProperties } from '@granite-js/native/react-native-video';
+import { type ComponentType } from 'react';
+export type VideoNativeProps = Omit<VideoProperties, 'onAudioFocusChanged'> & {
+    onAudioFocusChanged?: (event: {
+        hasAudioFocus: boolean;
+    }) => void;
+};
+export declare const Component: ComponentType<VideoNativeProps>;
+export declare const isAvailable: boolean;

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;