@granite-js/react-native 0.0.1

package/dist/impression-area/ImpressionArea.d.ts

@@ -0,0 +1,231 @@
+import { PropsWithChildren, ReactElement, ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+interface Props {
+    onImpressionStart?: () => void;
+    onImpressionEnd?: () => void;
+    enabled?: boolean;
+    UNSAFE__impressFallbackOnMount?: boolean;
+    style?: StyleProp<ViewStyle>;
+    areaThreshold?: number;
+    timeThreshold?: number;
+    children?: ReactNode;
+}
+/**
+ * @public
+ * @category Screen Control
+ * @name ImpressionArea
+ * @description
+ * A component that detects whether a specific component is visible on the screen and notifies the outside. Using this component, you can easily implement features like collecting logs or running animations when a specific component becomes visible on the screen.
+ * The visibility is detected using the return value of `useVisibility` and the `IOScrollView` and `InView` components that indicate whether the component is displayed within the viewport. When using `ScrollView` in React, even if a view is not visible on the screen, using `ImpressionArea` allows you to trigger events only when the view is actually visible on the screen.
+
+::: info Note
+
+`ImpressionArea` must be used inside `IOScrollView`. If you need to use it outside of `IOScrollView`, you can set the `UNSAFE__impressFallbackOnMount` property to `true` to detect based on when the component is mounted. If this property is set to `false` and used outside of `IOScrollView`, an `IOProviderMissingError` will occur.
+
+:::
+ *
+ * @param {() => void} [onImpressionStart] Callback function that is executed when the child component becomes visible on the screen.
+ * @param {() => void} [onImpressionEnd] Callback function that is executed when the child component is hidden from the screen.
+ * @param {boolean} [enabled=true] Value that directly controls the condition for visibility. Default value is `true`. If passed as `false`, the `onImpressionStart` callback function will not be executed even if the component is visible.
+ * @param {number} [areaThreshold=0] Value that sets the ratio of the visible area. If the component appears on the screen with a ratio greater than this value, `onImpressionStart` is called.
+ * The value should be set between 0 and 1. Setting it to 0 triggers the event when even 1px of the component is visible. Conversely, setting it to 1 only triggers the event when the component is 100% visible on the screen.
+ * @param {number} [timeThreshold=0] Sets the time in milliseconds before `onImpressionStart` is called after this component becomes visible on the screen. Default value is `0` milliseconds (0 seconds).
+ * @param {ViewStyle} [style] `style` value to be applied to the `InView` component. Default value is `undefined`, used when you want to specify a style.
+ * @param {boolean} [UNSAFE__impressFallbackOnMount=false] Whether to consider the component as visible immediately when mounted. Default value is `false`.
+ * Useful when you cannot determine if the component is in the viewport without using `IOScrollView`. For example, a component located outside of `IOScrollView` will be considered visible at mount time if set to `true`.
+ *
+ * @returns {ReactElement} - Returns a component that can detect visibility on the screen.
+ * @example
+ *
+ * ### Basic Usage Example
+ *
+ * ```tsx
+ * import { useState } from 'react';
+ * import { Button, Dimensions, Text, View } from 'react-native';
+ * import { ImpressionArea, IOScrollView } from '@granite-js/react-native';
+ *
+ * export default function ImpressionAreaExample() {
+ *  const [isImpressionStart, setIsImpressionStart] = useState(false);
+ *
+ *  return (
+ *    <>
+ *      <Text>{isImpressionStart ? 'Impression Start' : 'Impression End'}</Text>
+ *        <IOScrollView
+ *          style={{
+ *            flex: 1,
+ *            margin: 16,
+ *            backgroundColor: 'white',
+ *          }}
+ *        >
+ *        <View
+ *          style={{
+ *            height: Dimensions.get('screen').height,
+ *            borderWidth: 1,
+ *            borderColor: 'black',
+ *          }}
+ *        >
+ *          <Text>Scroll to here</Text>
+ *        </View>
+ *
+ *        <ImpressionArea
+ *          onImpressionStart={() => setIsImpressionStart(true)}
+ *          onImpressionEnd={() => setIsImpressionStart(false)}
+ *        >
+ *          <Button title="Button" />
+ *        </ImpressionArea>
+ *      </IOScrollView>
+ *    </>
+ *  );
+ * }
+ * ```
+ *
+ * ### Example of Detection at Mount Time
+ *
+ * When `ImpressionArea` is not located inside a component like `IOScrollView`, setting `UNSAFE__impressFallbackOnMount` to `true` will consider the component as visible when it is mounted.
+ *
+ * ```tsx
+ * import { useState } from 'react';
+ * import { Button, Dimensions, ScrollView, Text, View } from 'react-native';
+ * import { ImpressionArea } from '@granite-js/react-native';
+ *
+ * export default function ImpressionArea2Example() {
+ *  const [isImpressionStart, setIsImpressionStart] = useState(false);
+ *
+ *  return (
+ *    <>
+ *      <Text>{isImpressionStart ? 'Impression Start' : 'Impression End'}</Text>
+ *      <ScrollView
+ *        style={{
+ *          flex: 1,
+ *          margin: 16,
+ *          backgroundColor: 'white',
+ *        }}
+ *      >
+ *        <View
+ *          style={{
+ *            height: Dimensions.get('screen').height,
+ *            borderWidth: 1,
+ *            borderColor: 'black',
+ *          }}
+ *        >
+ *          <Text>Scroll to here</Text>
+ *        </View>
+ *
+ *        <ImpressionArea
+ *          UNSAFE__impressFallbackOnMount={true}
+ *          onImpressionStart={() => setIsImpressionStart(true)}
+ *          onImpressionEnd={() => setIsImpressionStart(false)}
+ *        >
+ *          <Button title="Button" />
+ *        </ImpressionArea>
+ *      </ScrollView>
+ *    </>
+ *  );
+ * }
+ * ```
+ */
+export declare function ImpressionArea(props: Props): ReactElement;
+export declare class IOProviderMissingError extends Error {
+    message: string;
+}
+/**
+ * @category Components
+ * @kind function
+ * @name ImpressionAreaOnMount
+ * @description
+ * A component that calls `onImpressionStart` and `onImpressionEnd` when the component is mounted on the screen.
+ * Used when `UNSAFE__impressFallbackOnMount` is `true` in `ImpressionArea`.
+ * This component can be used when `ImpressionArea` is needed outside of `IOScrollView`.
+ *
+ * @param {() => void} [onImpressionStart] - Callback function that is called when the component is mounted.
+ * @param {() => void} [onImpressionEnd] - Callback function that is called when the component is unmounted.
+ * @param {StyleProp<ViewStyle>} [style] - Sets the style of the top-level container of the `ImpressionAreaOnMount` component.
+ * @param {ReactNode} [children] - Sets the child components to be wrapped by `ImpressionAreaOnMount`.
+ * @returns {ReactElement} - Returns a component that detects mount status
+ * @example
+ * ### Example of Detection at Mount Time
+ * ```tsx
+ * import { ImpressionAreaOnMount } from '@granite-js/react-native';
+ *
+ * export default function AlwaysImpressionAreaPage() {
+ *   // isImpressionStart is set to true when AlwaysImpressionAreaPage is mounted
+ *   const [isImpressionStart, setIsImpressionStart] = useState(false);
+ *
+ *   return (
+ *     <ScrollView
+ *       style={{
+ *         flex: 1,
+ *         padding: 16,
+ *         backgroundColor: 'white',
+ *       }}
+ *     >
+ *       <TestTitle title="ImpressionArea" description="@granite-js/impression-area" />
+ *       <Button label={'Scroll to origin'} onPress={() => {}} />
+ *       <Code style={{ width, height }} json={{ isImpressionStart }} />
+ *       <ImpressionAreaOnMount
+ *         onImpressionStart={() => setIsImpressionStart(true)}
+ *         onImpressionEnd={() => setIsImpressionStart(false)}
+ *       >
+ *         <Button label={'Scroll to here'} onPress={() => {}} />
+ *       </ImpressionArea>
+ *     </ScrollView>
+ *   );
+ * }
+ * ```
+ */
+export declare function ImpressionAreaOnMount({ onImpressionStart: _onImpressionStart, onImpressionEnd: _onImpressionEnd, style, children, }: PropsWithChildren<Props>): ReactElement;
+/**
+ * @category Components
+ * @kind function
+ * @name ImpressionAreaWithIntersectionObserver
+ * @description
+ * A component that calls `onImpressionStart` and `onImpressionEnd` based on whether the component is visible on the user's screen.
+ * This is a component that can be used in `IOScrollView` and can notify the outside about its visibility status.
+ *
+ * @param {() => void} [onImpressionStart] - Callback function that is called when the component becomes visible on the screen.
+ * @param {() => void} [onImpressionEnd] - Callback function that is called when the component disappears from the screen.
+ * @param {boolean} [enabled=true] - Sets whether to enable `ImpressionArea`.
+ * @param {StyleProp<ViewStyle>} [style] - Sets the style of the top-level container of the `ImpressionAreaWithIntersectionObserver` component.
+ * @param {number} [areaThreshold=0] - Considers the component visible when its visible area exceeds the set ratio.
+ * @param {number} [timeThreshold=0] - Sets the time in milliseconds before `onImpressionStart` and `onImpressionEnd` are called after the component becomes visible on the screen. Default value is `0` milliseconds.
+ * @param {ReactNode} [children] - Sets the child components to be wrapped by `ImpressionAreaWithIntersectionObserver`.
+ * @returns {ReactElement} - Returns a component that can detect visibility on the screen.
+ * @example
+ * ### Example using IntersectionObserver
+ * ```tsx
+ * import { ImpressionAreaWithIntersectionObserver, IOScrollView } from '@granite-js/react-native';
+ *
+ * export default function ImpressionAreaPage() {
+ *   const [isImpressionStart, setIsImpressionStart] = useState(false);
+ *
+ *   return (
+ *     <IOScrollView
+ *       style={{
+ *         flex: 1,
+ *         margin: 16,
+ *         backgroundColor: 'white',
+ *       }}
+ *     >
+ *       <TestTitle title="ImpressionArea" description="@granite-js/impression-area" />
+ *       <Button label={'Scroll to origin'} onPress={() => {}} />
+ *       <Code style={{ width, height }} textStyle={{ flex: 1, verticalAlign: 'middle' }} json={{ isImpressionStart }} />
+ *       <ImpressionAreaWithIntersectionObserver
+ *         onImpressionStart={() => setIsImpressionStart(true)}
+ *         onImpressionEnd={() => setIsImpressionStart(false)}
+ *       >
+ *         <Button label={'Scroll to here'} onPress={() => {}} />
+ *       </ImpressionArea>
+ *     </IOScrollView>
+ *   );
+ * }
+ * ```
+ */
+export declare function ImpressionAreaWithIntersectionObserver({ onImpressionStart: _onImpressionStart, onImpressionEnd: _onImpressionEnd, timeThreshold, ...props }: PropsWithChildren<{
+    onImpressionStart?: () => void;
+    onImpressionEnd?: () => void;
+    enabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    areaThreshold?: number;
+    timeThreshold?: number;
+}>): ReactElement;
+export {};

package/dist/impression-area/index.d.ts

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

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import './types/global';
+export { Granite } from './app';
+export * from '@granite-js/style-utils';
+export * from '@granite-js/image';
+export * from './dev-entrypoint';
+export * from './native-modules/natives';
+export * from './visibility';
+export * from './use-back-event';
+export * from './keyboard';
+export * from './intersection-observer';
+export * from './impression-area';
+export * from './scroll-view-inertial-background';
+export * from './react';
+export * from './router/createRoute';
+export * from './event';
+export type { InitialProps, ColorPreference } from './initial-props';
+export type { GraniteProps } from './app';

package/dist/initial-props/InitialProps.d.ts

@@ -0,0 +1,127 @@
+/**
+ * @public
+ * @category UI
+ * @name ColorPreference
+ * @description
+ * Type representing the color mode of the current device. It is a string representing light mode and dark mode.
+ *
+ * @typedef {'light' | 'dark'} ColorPreference
+ */
+export type ColorPreference = 'light' | 'dark';
+/**
+ * @name NetworkStatus
+ * @description
+ * Type representing the network status.
+ *
+ * @typedef {'WIFI' | '2G' | '3G' | '4G' | '5G' | 'UNKNOWN' | 'OFFLINE'} NetworkStatus
+ */
+type NetworkStatus = 'WIFI' | '2G' | '3G' | '4G' | '5G' | 'UNKNOWN' | 'OFFLINE';
+/**
+ * @category Types
+ * @name BaseInitialProps
+ * @description
+ * Interface representing the base initial properties.
+ *
+ * @interface
+ * @property {'ios' | 'android'} platform - Platform type
+ * @property {string} appVersion - App version
+ * @property {ColorPreference} initialColorPreference - Initial color
+ * @property {NetworkStatus} networkStatus - Network status
+ * @property {number} loadingStartTs - Timestamp when ReactNativeView started rendering in native
+ * @property {string} [scheme] - Executed scheme
+ */
+type BaseInitialProps = {
+    platform: 'ios' | 'android';
+    appVersion: string;
+    initialColorPreference: ColorPreference;
+    networkStatus: NetworkStatus;
+    loadingStartTs: number;
+    scheme?: string;
+};
+/**
+ * @category Types
+ * @name AndroidInitialProps
+ * @description
+ * Values passed from Android to React Native.
+ *
+ * @interface
+ * @augments BaseInitialProps
+ * @property {'android'} platform - Platform name (Android)
+ * @property {string} initialFontScale - Font scale set on the device
+ * @property {string} distributionGroup - Distribution group
+ */
+export type AndroidInitialProps = BaseInitialProps & {
+    platform: 'android';
+    initialFontScale: string;
+    distributionGroup: string;
+};
+/**
+ * @category Types
+ * @name IOSInitialProps
+ * @description
+ * Interface representing iOS initial properties.
+ *
+ * @interface
+ * @augments BaseInitialProps
+ * @property {'ios'} platform - Platform (iOS)
+ * @property {IOSFontSizeType} initialFontSize - Initial font size
+ * @property {boolean} isVisible - Visibility status
+ */
+export type IOSInitialProps = BaseInitialProps & {
+    platform: 'ios';
+    initialFontSize: IOSFontSizeType;
+    isVisible: boolean;
+};
+/**
+ * @category Types
+ * @name IOSFontSizeType
+ * @description
+ * Type representing iOS font size type.
+ *
+ * @typedef {'xSmall' | 'Small' | 'Medium' | 'Large' | 'xLarge' | 'xxLarge' | 'xxxLarge' | 'A11y_Medium' | 'A11y_Large' | 'A11y_xLarge' | 'A11y_xxLarge' | 'A11y_xxxLarge'} IOSFontSizeType
+ */
+type IOSFontSizeType = 'xSmall' | 'Small' | 'Medium' | 'Large' | 'xLarge' | 'xxLarge' | 'xxxLarge' | 'A11y_Medium' | 'A11y_Large' | 'A11y_xLarge' | 'A11y_xxLarge' | 'A11y_xxxLarge';
+/**
+ * @public
+ * @category Core
+ * @name InitialProps
+ * @description
+ * Provides the initial data type that native platforms (Android/iOS) pass to the app when a user enters a specific screen in a React Native app.
+ * The initial data contains important information used for screen initialization, and the required data types differ by native platform.
+ *
+ * The data type provided by Android is `AndroidInitialProps`, and the data type provided by iOS is `IOSInitialProps`.
+ *
+ * @property {'ios' | 'android'} platform - The platform on which the app is currently running. Has a value of either `ios` or `android`.
+ * @property {ColorPreference} initialColorPreference - The initial color theme. Represents the color theme set by the user.
+ * @property {NetworkStatus} networkStatus - The current device's network connection status and connected network.
+ * @property {string} [scheme] - The URL scheme used to enter the current screen.
+ * @property {`xSmall` | `Small` | `Medium` | `Large` | `xLarge` | `xxLarge` | `xxxLarge` | `A11y_Medium` | `A11y_Large` | `A11y_xLarge` | `A11y_xxLarge` | `A11y_xxxLarge`} initialFontSize (iOS only) iOS system font size. Each value represents a specific font size. Default value is `Large`.
+ * @property {boolean} isVisible (iOS only) Whether the screen is currently visible in iOS. Initial value is passed as `true`.
+ * @property {string} initialFontScale (Android only) Android system font scale. The font size scale adjusted by the user in Android device's accessibility settings. This value is multiplied by the base font size to determine the final font size.
+ *
+ * @example
+ *
+ * ### Example using `InitialProps`
+ *
+ * ::: code-group
+ * ```tsx [_app.tsx]
+ * import { PropsWithChildren } from 'react';
+ * import { Granite, InitialProps } from '@granite-js/react-native';
+ * import { context } from '../require.context';
+ *
+ * const APP_NAME = 'my-app-name';
+ *
+ * function AppContainer({ children, ...initialProps }: PropsWithChildren<InitialProps>) {
+ *   console.log({ initialProps });
+ *   return <>{children}</>;
+ * }
+ *
+ * export default Granite.registerApp(AppContainer, {
+ *   appName: APP_NAME,
+ *   context,
+ * });
+ * :::
+ * ```
+ */
+export type InitialProps = AndroidInitialProps | IOSInitialProps;
+export {};

package/dist/initial-props/index.d.ts

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

package/dist/intersection-observer/IOContext.d.ts

@@ -0,0 +1,10 @@
+import IOManager from './IOManager';
+export interface IOContextValue {
+    manager: null | IOManager;
+}
+/**
+ * @name IOContext
+ * @description Context that shares the IOManager instance.
+ */
+declare const IOContext: import("react").Context<IOContextValue>;
+export default IOContext;

package/dist/intersection-observer/IOFlatList.d.ts

@@ -0,0 +1,55 @@
+import { RefAttributes } from 'react';
+import { FlatList, FlatListProps } from 'react-native';
+import { IOComponentProps } from './withIO';
+export type IOFlatListController = FlatList;
+export type IOFlatListProps<ItemT = any> = IOComponentProps & FlatListProps<ItemT>;
+/**
+ * @public
+ * @category Screen Control
+ * @name IOFlatList
+ * @description
+ * `IOFlatList` is a `FlatList` component with added Intersection Observer functionality to detect when specific elements become visible or disappear from the screen during scrolling. Using this component, you can easily check and handle whether each item in the list is visible on the screen.
+ *
+ * When used with `InView`, you can check the exposure status of each element. The [InView](/reference/react-native/Screen%20Control/InView) component included as a child element detects whether the element is visible on the screen through the observation functionality of `IOFlatList` and triggers events based on the exposure status.
+ *
+ * @example
+ *
+ * You can check whether each item in the list appears on the screen using `IOFlatList`.
+ * When each item in the list appears on the screen, the `InView` component changes to the `visible` state.
+ *
+ * ```tsx
+ * import { ReactNode, useState } from 'react';
+ * import { StyleSheet, Text, View } from 'react-native';
+ * import { InView, IOFlatList } from '@granite-js/react-native';
+ *
+ * const mockData = Array.from({ length: 30 }, (_, i) => ({ key: String(i) }));
+ *
+ * export default function FlatListPage() {
+ *  return <IOFlatList data={mockData} renderItem={({ item }) => <InViewItem>{item.key}</InViewItem>} />;
+ * }
+ *
+ * function InViewItem({ children }: { children: ReactNode }) {
+ *  const [visible, setVisible] = useState(false);
+ *
+ *  return (
+ *    <InView onChange={setVisible}>
+ *      <View style={styles.item}>
+ *        <Text>{children}</Text>
+ *        <Text>{visible ? 'visible' : ''}</Text>
+ *      </View>
+ *    </InView>
+ *  );
+ * }
+ *
+ * const styles = StyleSheet.create({
+ *  item: {
+ *    padding: 16,
+ *    borderBottomWidth: 1,
+ *    borderBottomColor: '#ddd',
+ *  },
+ * });
+ * ```
+ */
+declare const IOFlatList: typeof IOFlatListFunction;
+declare function IOFlatListFunction<ItemT = any>(props: IOFlatListProps<ItemT> & RefAttributes<IOFlatListController>): JSX.Element;
+export default IOFlatList;

package/dist/intersection-observer/IOManager.d.ts

@@ -0,0 +1,24 @@
+import IntersectionObserver, { IntersectionObserverOptions, IntersectionObserverEntry, Element } from './IntersectionObserver';
+export type ObserverInstanceCallback = (inView: boolean, intersectionRatio: number) => void;
+export interface ObserverInstance {
+    readonly callback: ObserverInstanceCallback;
+    readonly element: Element;
+    readonly observerId: number;
+    readonly observer: IntersectionObserver;
+}
+/**
+ * @kind class
+ * @name IOManager
+ * @description A class that tracks the visibility of DOM elements using `IntersectionObserver` instances and executes callbacks when elements enter or leave the viewport.
+ * This class makes it easy to manage multiple elements and execute custom logic based on the visibility status of each element.
+ */
+declare class IOManager {
+    io: IntersectionObserver;
+    observerId: number;
+    instanceMap: Map<Element, ObserverInstance>;
+    constructor(options: IntersectionObserverOptions);
+    handleChange: (entries: IntersectionObserverEntry[]) => void;
+    observe(element: Element, callback: ObserverInstanceCallback): ObserverInstance;
+    unobserve(element: any): void;
+}
+export default IOManager;

package/dist/intersection-observer/IOScrollView.d.ts

@@ -0,0 +1,59 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { ScrollView, ScrollViewProps } from 'react-native';
+import { IOComponentProps } from './withIO';
+export type IOScrollViewController = ScrollView;
+export type IOScrollViewProps = IOComponentProps & ScrollViewProps;
+/**
+ * @public
+ * @category Screen Control
+ * @name IOScrollView
+ * @description
+ * `IOScrollView` is a [ScrollView](https://reactnative.dev/docs/scrollview) component with added `Intersection Observer` functionality. It can detect when specific elements become visible or disappear from the screen during scrolling.
+ * By utilizing this functionality with the `InView` component as a child element, you can easily check whether elements are exposed on the screen.
+ *
+ * @example
+ *
+ * You can check whether each item in the list appears on the screen using `IOScrollView`.
+ * When each item in the list appears on the screen, the `InView` component changes to the `visible` state.
+ *
+ * ```tsx
+ * import { ReactNode, useState } from 'react';
+ * import { StyleSheet, Text, View } from 'react-native';
+ * import { InView, IOScrollView } from '@granite-js/react-native';
+ *
+ * const mockData = Array.from({ length: 30 }, (_, i) => ({ key: String(i) }));
+ *
+ * export default function IOScrollViewPage() {
+ *  return (
+ *    <IOScrollView>
+ *      {mockData.map((data) => (
+ *        <InViewItem key={data.key}>{data.key}</InViewItem>
+ *      ))}
+ *    </IOScrollView>
+ *  );
+ * }
+ *
+ * function InViewItem({ children }: { children: ReactNode }) {
+ *  const [visible, setVisible] = useState(false);
+ *
+ *  return (
+ *    <InView onChange={setVisible}>
+ *      <View style={styles.item}>
+ *        <Text>{children}</Text>
+ *        <Text>{visible ? 'visible' : ''}</Text>
+ *      </View>
+ *    </InView>
+ *  );
+ * }
+ *
+ * const styles = StyleSheet.create({
+ *  item: {
+ *    padding: 16,
+ *    borderBottomWidth: 1,
+ *    borderBottomColor: '#ddd',
+ *  },
+ * });
+ * ```
+ */
+declare const IOScrollView: ForwardRefExoticComponent<IOScrollViewProps & RefAttributes<IOScrollViewController>>;
+export default IOScrollView;

package/dist/intersection-observer/InView.d.ts

@@ -0,0 +1,107 @@
+import { ComponentType, PureComponent, ReactElement, ReactNode, RefObject } from 'react';
+import { LayoutChangeEvent, View, ViewProps } from 'react-native';
+import { IOContextValue } from './IOContext';
+import { ObserverInstance } from './IOManager';
+import { Element } from './IntersectionObserver';
+export interface RenderProps {
+    inView: boolean;
+    onChange: (inView: boolean) => void;
+}
+export interface Props {
+    [key: string]: any;
+}
+export type InViewProps<T = Props> = T & {
+    children: ReactNode | ((fields: RenderProps) => ReactElement<View>);
+    as?: ComponentType<any>;
+    triggerOnce?: boolean;
+    onLayout?: (event: LayoutChangeEvent) => void;
+    onChange?: (inView: boolean, areaThreshold: number) => void;
+};
+export type InViewWrapper = ComponentType<{
+    ref?: RefObject<any> | ((ref: any) => void);
+    onLayout?: (event: LayoutChangeEvent) => void;
+}>;
+/**
+ * @public
+ * @category Screen Control
+ * @name InView
+ * @description
+ * The `InView` component detects when an element starts to become visible on the screen or disappears from the screen.
+ * When an element starts to become visible on the screen, the `onChanged` handler is called with `true` as the first argument. Conversely, when the element disappears from the screen, `false` is passed.
+ * The second argument of the `onChanged` handler receives the exposure ratio of the element on the screen. The exposure ratio value ranges from `0` to `1.0`. For example, if `0.2` is passed, it means the component is 20% exposed on the screen.
+ *
+::: warning Note
+
+`InView` must be used inside [IOScrollView](/reference/react-native/Screen%20Control/InView.md) or [IOFlatList](/reference/react-native/Screen%20Control/IOFlatList.md) that includes `IOContext`.
+If used outside of `IOContext`, an `IOProviderMissingError` will occur.
+
+:::
+
+ * @param {Object} props - Props object passed to the component.
+ * @param {React.ReactNode} props.children - Child components to be rendered under the component.
+ * @param {React.ComponentType} [prop.as=View] - Specifies the component to actually render. Default is the [View](https://reactnative.dev/docs/view) component.
+ * @param {boolean} [triggerOnce=false] - Use this option if you want to call the `onChange` callback only once when the element first becomes visible.
+ * @param {(event: LayoutChangeEvent) => void} [onLayout] - Callback function called when there is a change in the layout.
+ * @param {(inView: boolean, areaThreshold: number) => void} [onChange] - Callback function called when an element appears or disappears from the screen. The first argument receives the visibility status, and the second argument receives the exposure ratio.
+ *
+ * @example
+ *
+ * ### Detecting the `10%` point of an element using the `InView` component
+ *
+ * ```tsx
+ * import { LayoutChangeEvent, View, Text, Dimensions } from 'react-native';
+ * import { InView, IOScrollView } from '@granite-js/react-native';
+ *
+ * export function InViewExample() {
+ *   const handleLayout = (event: LayoutChangeEvent) => {
+ *     console.log('Layout changed', event.nativeEvent.layout);
+ *   };
+ *
+ *   const handleChange = (inView: boolean, areaThreshold: number) => {
+ *     if (inView) {
+ *       console.log(`Element is visible at ${areaThreshold * 100}% ratio`);
+ *     } else {
+ *       console.log('Element is not visible');
+ *     }
+ *   };
+ *
+ *   return (
+ *     <IOScrollView>
+ *       <View style={{ height: HEIGHT, width: '100%', backgroundColor: 'blue' }}>
+ *         <Text style={{ color: 'white' }}>Please scroll down</Text>
+ *       </View>
+ *       <InView onLayout={handleLayout} onChange={handleChange}>
+ *         <View style={{ width: 100, height: 300, backgroundColor: 'yellow' }}>
+ *           <View style={{ position: 'absolute', top: 30, width: 100, height: 1, borderWidth: 1 }}>
+ *             <Text style={{ position: 'absolute', top: 0 }}>10% point</Text>
+ *           </View>
+ *         </View>
+ *       </InView>
+ *     </IOScrollView>
+ *   );
+ * }
+ * ```
+ */
+declare class InView<T = ViewProps> extends PureComponent<InViewProps<T>> {
+    static contextType: import("react").Context<IOContextValue>;
+    static defaultProps: Partial<InViewProps>;
+    context: undefined | IOContextValue;
+    mounted: boolean;
+    protected element: Element;
+    protected instance: undefined | ObserverInstance;
+    protected view: any;
+    constructor(props: InViewProps<T>);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    protected handleChange: (inView: boolean, areaThreshold: number) => void;
+    protected handleRef: (ref: any) => void;
+    protected handleLayout: (event: LayoutChangeEvent) => void;
+    measure: (...args: any) => void;
+    measureInWindow: (...args: any) => void;
+    measureLayout: (...args: any) => void;
+    setNativeProps: (...args: any) => void;
+    focus: (...args: any) => void;
+    blur: (...args: any) => void;
+    render(): import("react/jsx-runtime").JSX.Element | null;
+}
+export default InView;