@fountain-ui/lab 1.21.1 → 2.0.0-beta.11

package/src/ViewPager/ViewPagerNative.tsx

@@ -1,66 +1,78 @@
-import React from 'react';
-import RNViewPager, { ViewPagerOnPageSelectedEvent } from '@react-native-community/viewpager';
+import React, { Children, forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import type { ViewPagerOnPageSelectedEvent } from 'react-native-pager-view';
+import RNViewPager from 'react-native-pager-view';
+import { useSharedValue } from 'react-native-reanimated';
 import type ViewPagerProps from './ViewPagerProps';
-import {
-    defaultEnableNeighborPageRerender,
-    defaultEnableVisibleHint,
-    defaultLoading,
-    defaultPageComponent,
-    usePageRenderer,
-} from './utils';
+import type { ViewPagerInstance } from './ViewPagerProps';
+import { defaultInitialPage, defaultLoading, defaultPageComponent } from './utils';
 
-export default function ViewPager(props: ViewPagerProps) {
+const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPager(props, ref) {
     const {
         children,
-        enableVisibleHint = defaultEnableVisibleHint,
-        index,
+        initialPage = defaultInitialPage,
         keyboardDismissMode = 'on-drag',
         loading = defaultLoading,
         onChange,
         pageComponent = defaultPageComponent,
-        enableNeighborPageRerender = defaultEnableNeighborPageRerender,
         pageForceRerenderKey,
         scrollEnabled = true,
         style,
     } = props;
 
-    const indexRef = React.useRef<number>(index);
-    const pagerRef = React.useRef<RNViewPager | null>(null);
+    const sharedIndex = useSharedValue<number>(initialPage);
+    const pagerRef = useRef<RNViewPager | null>(null);
 
-    const renderer = usePageRenderer({
-        enableVisibleHint,
-        index,
-        loading,
-        pageComponent,
-        pageForceRerenderKey,
-        enableNeighborPageRerender,
-    });
+    const setPage = (newIndex: number) => {
+        requestAnimationFrame(() => {
+            pagerRef.current?.setPage(newIndex);
+        });
+    };
+
+    useImperativeHandle(
+        ref,
+        () => ({ setPage }),
+        [],
+    );
+
+    const handlePageSelected = useCallback((e: ViewPagerOnPageSelectedEvent) => {
+        const currentIndex = sharedIndex.value;
+        const nextIndex = e.nativeEvent.position;
+
+        if (currentIndex === nextIndex) {
+            return;
+        }
 
-    const handlePageSelected = React.useCallback((e: ViewPagerOnPageSelectedEvent) => {
-        indexRef.current = e.nativeEvent.position;
+        sharedIndex.value = nextIndex;
 
         if (onChange) {
-            onChange(indexRef.current);
+            onChange(nextIndex);
         }
     }, [onChange]);
 
-    React.useEffect(() => {
-        if (index !== indexRef.current) {
-            pagerRef.current?.setPage(index);
-        }
-    }, [index]);
+    const PageComponent = pageComponent;
 
     return (
         <RNViewPager
-            initialPage={index}
+            ref={pagerRef}
+            initialPage={initialPage}
             keyboardDismissMode={keyboardDismissMode}
             onPageSelected={handlePageSelected}
             pageMargin={8}
-            ref={pagerRef}
             scrollEnabled={scrollEnabled}
             style={style}
         >
-            {renderer(children)}
+            {Children.map(children, (child, index) => (
+                <PageComponent
+                    key={index}
+                    children={child}
+                    index={index}
+                    loading={loading}
+                    rerenderKey={pageForceRerenderKey}
+                    sharedIndex={sharedIndex}
+                />
+            ))}
         </RNViewPager>
     );
-};
+});
+
+export default ViewPager;

package/src/ViewPager/ViewPagerProps.ts

@@ -1,41 +1,42 @@
-import React from 'react';
+import type { ComponentType, PropsWithChildren, ReactNode, Ref } from 'react';
 import type { ViewProps } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
 import type { ComponentProps } from '@fountain-ui/core';
 
 export type KeyboardDismissMode = 'none' | 'on-drag';
 
-export type PageProps = React.PropsWithChildren<ViewProps> & {
-    isNeighbor: boolean;
-    isVisible: boolean;
-    rerenderKey?: any;
+export type PageProps = PropsWithChildren<ViewProps> & {
+    index: number;
+    loading: ViewPagerProps['loading'];
+    sharedIndex: SharedValue<number>;
+    rerenderKey?: ViewPagerProps['pageForceRerenderKey'];
 };
 
-export type PageComponent = React.ComponentType<PageProps>;
+export type PageComponent = ComponentType<PageProps>;
 
 export type Loading = 'lazy' | 'eager';
 
-export default interface ViewPagerProps extends ComponentProps<{
+export interface ViewPagerInstance {
     /**
-     * Collection of ViewPager components.
+     * Function to scroll to a specific page in the ViewPager. Invalid index is ignored.
+     * @param index
      */
-    children?: React.ReactNode;
+    setPage: (index: number) => void;
+}
 
-    /**
-     * If `true`, enable page visible hint.
-     * @default false
-     */
-    enableVisibleHint?: boolean;
+export default interface ViewPagerProps extends ComponentProps<{
+    ref?: Ref<ViewPagerInstance>;
 
     /**
-     * If `true`, Based on the current index, the pages on the left and right are also rerender.
-     * @default false
+     * Collection of ViewPager components.
      */
-    enableNeighborPageRerender?: boolean;
+    children?: ReactNode;
 
     /**
-     * A number representing the index of the active page.
+     * Index of initial page that should be selected.
+     * @default 0
      */
-    index: number,
+    initialPage?: number;
 
     /**
      * Whether to load the page immediately (`eager`) or on an as-needed basis (`lazy`).

package/src/ViewPager/ViewPagerWeb.tsx

@@ -1,13 +1,10 @@
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import React, { Children, forwardRef, useImperativeHandle } from 'react';
+import { View } from 'react-native';
+import { useSharedValue } from 'react-native-reanimated';
+import { StyleSheet } from '@fountain-ui/core';
 import type ViewPagerProps from './ViewPagerProps';
-import {
-    defaultEnableNeighborPageRerender,
-    defaultEnableVisibleHint,
-    defaultLoading,
-    defaultPageComponent,
-    usePageRenderer,
-} from './utils';
+import type { ViewPagerInstance } from './ViewPagerProps';
+import { defaultInitialPage, defaultLoading, defaultPageComponent } from './utils';
 
 const styles = StyleSheet.create({
     root: {
@@ -15,38 +12,46 @@ const styles = StyleSheet.create({
         overflow: 'auto',
         position: 'relative',
     },
-    none: { display: 'none' },
 });
 
-export default function ViewPager(props: ViewPagerProps) {
+const ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPager(props, ref) {
     const {
         children,
-        enableVisibleHint = defaultEnableVisibleHint,
-        enableNeighborPageRerender = defaultEnableNeighborPageRerender,
-        index,
+        initialPage = defaultInitialPage,
         loading = defaultLoading,
         pageComponent = defaultPageComponent,
         pageForceRerenderKey,
         style,
     } = props;
 
-    const renderer = usePageRenderer({
-        enableVisibleHint,
-        enableNeighborPageRerender,
-        index,
-        loading,
-        pageComponent,
-        pageForceRerenderKey,
-    });
+    const sharedIndex = useSharedValue<number>(initialPage);
+
+    const setPage = (newIndex: number) => {
+        sharedIndex.value = newIndex;
+    };
+
+    useImperativeHandle(
+        ref,
+        () => ({ setPage }),
+        [],
+    );
+
+    const PageComponent = pageComponent;
 
     return (
         <View style={[styles.root, style]}>
-            {React.Children.map(renderer(children), (child, i) =>
-                React.cloneElement(child as React.ReactElement, {
-                    isVisible: i === index,
-                    style: i !== index ? styles.none : StyleSheet.absoluteFill,
-                }),
-            )}
+            {Children.map(children, (child, index) => (
+                <PageComponent
+                    key={index}
+                    children={child}
+                    index={index}
+                    loading={loading}
+                    rerenderKey={pageForceRerenderKey}
+                    sharedIndex={sharedIndex}
+                />
+            ))}
         </View>
     );
-};
+});
+
+export default ViewPager;

package/src/ViewPager/index.ts

@@ -1,2 +1,2 @@
 export { default } from './ViewPagerWeb';
-export type { default as ViewPagerProps } from './ViewPagerProps';
+export type { default as ViewPagerProps, ViewPagerInstance } from './ViewPagerProps';

package/src/ViewPager/utils.tsx

@@ -1,62 +1,9 @@
 import React from 'react';
-import ViewPagerProps, { Loading, PageComponent } from './ViewPagerProps';
+import { Loading, PageComponent } from './ViewPagerProps';
 import ChildrenMemoizedPage from './ChildrenMemoizedPage';
 
-export interface PageState {
-    visited?: boolean;
-}
-
-export interface PageRenderOption {
-    enableVisibleHint: boolean;
-    enableNeighborPageRerender: boolean;
-    index: number;
-    loading: Loading;
-    pageComponent: PageComponent;
-    pageForceRerenderKey?: any;
-}
-
-export interface PageRenderer {
-    (children: ViewPagerProps['children']): React.ReactNode;
-}
-
-export const defaultEnableVisibleHint: boolean = false;
-
-export const defaultEnableNeighborPageRerender: boolean = false;
+export const defaultInitialPage: number = 0;
 
 export const defaultLoading: Loading = 'lazy';
 
 export const defaultPageComponent: PageComponent = ChildrenMemoizedPage;
-
-export const usePageRenderer = ({
-    enableVisibleHint,
-    index: currentIndex,
-    loading,
-    pageComponent: PageComponent,
-    pageForceRerenderKey,
-    enableNeighborPageRerender,
-}: PageRenderOption): PageRenderer => {
-    const pagesStateRef = React.useRef<Array<PageState>>([]);
-
-    pagesStateRef.current[currentIndex] = {
-        ...pagesStateRef.current[currentIndex],
-        visited: true,
-    };
-
-    return (children => React.Children.map(children, (child, index) => {
-        const visited = pagesStateRef.current[index]?.visited ?? false;
-        const content = (loading === 'eager' || visited) ? child : null;
-
-        const isVisible = enableVisibleHint ? (index === currentIndex) : false;
-        const isNeighborIndex = index === currentIndex - 1 || index === currentIndex + 1;
-
-        return (
-            <PageComponent
-                key={index}
-                children={content}
-                isNeighbor={enableNeighborPageRerender && isNeighborIndex}
-                isVisible={isVisible}
-                rerenderKey={pageForceRerenderKey}
-            />
-        );
-    }));
-};

package/src/hooks/useHeight.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { ViewProps } from 'react-native';
-import Animated from 'react-native-reanimated';
+import { useWorkletCallback } from 'react-native-reanimated';
 
 type OnLayoutCallback = ViewProps['onLayout'];
 
 export default function useHeight(initialHeight = 0): [number, OnLayoutCallback] {
     const [height, setHeight] = React.useState<number>(initialHeight);
 
-    const onLayout = Animated.useWorkletCallback((e) => {
+    const onLayout = useWorkletCallback((e) => {
         setHeight(e.nativeEvent.layout.height);
     }, []);
 

package/src/hooks/useUnstableCollapsibleAppBar.ts

@@ -1,6 +1,13 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
-import Animated from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+import {
+    useAnimatedScrollHandler,
+    useAnimatedStyle,
+    useDerivedValue,
+    useSharedValue,
+    withTiming,
+} from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import useAppbarStyles from './useAppbarStyles';
 import useElevationStyle from './useElevationStyle';
@@ -22,13 +29,12 @@ export interface ContentInsets {
 }
 
 export interface Options {
-    translucent?: boolean;
     shouldTranslateYReset?: boolean;
 }
 
 export interface CollapsibleAppBar {
     appBarStyle: ViewStyleProp;
-    vectorY: Animated.SharedValue<number>;
+    vectorY: SharedValue<number>;
     onAppBarLayout: OnLayoutCallback;
     onCollapsibleToolbarLayout: OnLayoutCallback;
     onScroll: OnScroll;
@@ -37,7 +43,6 @@ export interface CollapsibleAppBar {
 }
 
 const defaultOptions: Required<Options> = {
-    translucent: false,
     shouldTranslateYReset: false,
 };
 
@@ -45,7 +50,6 @@ const ANIMATION_DURATION_MILLIS = 100;
 
 const SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';
 
-
 function useLargerValueOfLastTwoValues(value: number) {
     const refLatestTwoValues = useRef([0, 0]);
 
@@ -55,12 +59,8 @@ function useLargerValueOfLastTwoValues(value: number) {
     return Math.max(...refLatestTwoValues.current);
 }
 
-
 export default function useUnstableCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {
-    const {
-        translucent,
-        shouldTranslateYReset,
-    }: Required<Options> = {
+    const { shouldTranslateYReset }: Required<Options> = {
         ...defaultOptions,
         ...userOptions,
     };
@@ -73,38 +73,55 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
     const appBarMaxHeight = useLargerValueOfLastTwoValues(appBarHeight);
     const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();
 
-    const maxTranslateY = Animated.useDerivedValue(() => -collapsibleToolbarHeight);
+    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);
 
-    const translateY = Animated.useSharedValue<number>(0);
-    const lastTranslateY = Animated.useSharedValue<number>(0);
-    const lastOffsetY = Animated.useSharedValue<number>(0);
-    const prevOffsetY = Animated.useSharedValue<number>(0);
-    const overlapped = Animated.useSharedValue<boolean>(false);
-    const vectorY = Animated.useSharedValue<number>(0);
+    const translateY = useSharedValue<number>(0);
+    const lastTranslateY = useSharedValue<number>(0);
+    const lastOffsetY = useSharedValue<number>(0);
+    const prevOffsetY = useSharedValue<number>(0);
+    const overlapped = useSharedValue<boolean>(false);
+    const vectorY = useSharedValue<number>(0);
 
     const elevationStyle = useElevationStyle(4);
-    const animatedStyle = Animated.useAnimatedStyle(() => {
-        return Platform.OS === 'web' ? ({
-            transform: [{ translateY: translateY.value }],
-            boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,
-        }) : ({
-            transform: [{ translateY: translateY.value }],
-            elevation: overlapped.value ? elevationStyle?.elevation : 0,
-            shadowColor: elevationStyle?.shadowColor,
-            shadowOffset: elevationStyle?.shadowOffset,
-            shadowRadius: elevationStyle?.shadowRadius,
-            shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,
-        });
-    });
-
-    const indexRef = React.useRef<number>(0);
-    const offsetsRef = React.useRef<Array<number>>([]);
+    const animatedStyle = useAnimatedStyle(() => {
+        const transform = [{ translateY: translateY.value }];
+
+        if (Platform.OS === 'web') {
+            return {
+                transform,
+                boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,
+            };
+        }
+        if (Platform.OS === 'android') {
+            return {
+                transform,
+                elevation: overlapped.value ? elevationStyle?.elevation : 0,
+            };
+        }
+        if (Platform.OS === 'ios') {
+            return {
+                transform,
+                shadowColor: elevationStyle?.shadowColor,
+                shadowOffset: elevationStyle?.shadowOffset,
+                shadowRadius: elevationStyle?.shadowRadius,
+                shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,
+            };
+        }
+        return {};
+    }, [
+        /**
+         * FIXME: Consider add `elevationStyle` to dependencies.
+         */
+    ]);
+
+    const indexRef = useRef<number>(0);
+    const offsetsRef = useRef<Array<number>>([]);
 
     const onScrollViewChanged = (nextIndex: number) => {
         const prevIndex = indexRef.current;
         if (prevIndex === nextIndex) {
             if (shouldTranslateYReset) {
-                translateY.value = Animated.withTiming(0, {
+                translateY.value = withTiming(0, {
                     duration: ANIMATION_DURATION_MILLIS,
                 });
 
@@ -128,7 +145,7 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
 
         // If next ScrollView's offset is too short, expand app bar.
         if (translateY.value < 0 && savedOffsetY < appBarHeight) {
-            translateY.value = Animated.withTiming(0, {
+            translateY.value = withTiming(0, {
                 duration: ANIMATION_DURATION_MILLIS,
             });
 
@@ -136,7 +153,7 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
         }
     };
 
-    const scrollHandler = Animated.useAnimatedScrollHandler({
+    const scrollHandler = useAnimatedScrollHandler({
         onBeginDrag: () => {
             lastTranslateY.value = translateY.value;
         },
@@ -162,13 +179,13 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
             } else {
                 if (offsetY > -maxTy) {
                     if (ty === 0) {
-                        translateY.value = Animated.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {
+                        translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {
                             duration: ANIMATION_DURATION_MILLIS,
                         });
                     }
                 } else {
                     if (ty === maxTy) {
-                        translateY.value = Animated.withTiming(0, {
+                        translateY.value = withTiming(0, {
                             duration: ANIMATION_DURATION_MILLIS,
                         });
                     }
@@ -201,17 +218,17 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
 
             overlapped.value = offsetY + nextTranslateY > 0;
 
-            translateY.value = Animated.withTiming(nextTranslateY, {
+            translateY.value = withTiming(nextTranslateY, {
                 duration: ANIMATION_DURATION_MILLIS,
             });
         },
-    });
+    }, []);
 
     const hasCollapsible = collapsibleToolbarHeight > 0;
 
     const appBarStyle = [
         animatedStyle,
-        translucent ? { paddingTop: safeAreaInsets.top } : undefined,
+        { paddingTop: safeAreaInsets.top },
         hasCollapsible ? styles.floating : undefined,
     ];
 

package/src/hooks/useUnstableToggleDisplayStyle.ts

@@ -1,13 +1,14 @@
-import Animated from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+import { useAnimatedReaction, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 
 export default function useAnimatedDisplayStyle(
-    vectorY: Animated.SharedValue<number>,
+    vectorY: SharedValue<number>,
     threshold: number = 200,
     defaultDisplay: 'flex' | 'none' = 'flex',
 ) {
-    const display = Animated.useSharedValue(defaultDisplay);
+    const display = useSharedValue(defaultDisplay);
 
-    Animated.useAnimatedReaction(
+    useAnimatedReaction(
         () => vectorY.value,
         (vy) => {
             if (vy >= threshold) {
@@ -16,9 +17,10 @@ export default function useAnimatedDisplayStyle(
                 display.value = 'flex';
             }
         },
+        [threshold],
     );
 
-    return Animated.useAnimatedStyle(() => ({
+    return useAnimatedStyle(() => ({
         display: display.value,
-    }));
+    }), []);
 };

package/src/index.ts

@@ -13,6 +13,9 @@ export * from './FlipCard';
 export { default as ViewPager } from './ViewPager';
 export * from './ViewPager';
 
+export { default as ComicViewer } from './ComicViewer';
+export * from './ComicViewer';
+
 export { default as StatusBarProvider, useStatusBarContext } from './StatusBarProvider';
 export * from './StatusBarProvider';
 

package/build/commonjs/hooks/useWidth.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useWidth;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactNative = require("react-native");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function useWidth() {
-  const window = (0, _reactNative.useWindowDimensions)();
-
-  const [width, setWidth] = _react.default.useState(window.width);
-
-  const onLayout = _react.default.useCallback(e => {
-    const newWidth = e.nativeEvent.layout.width;
-
-    if (newWidth > 0 && Math.round(newWidth) !== Math.round(width)) {
-      setWidth(newWidth);
-    }
-  }, []);
-
-  return [width, onLayout];
-}
-//# sourceMappingURL=useWidth.js.map

package/build/commonjs/hooks/useWidth.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["useWidth.ts"],"names":["useWidth","window","width","setWidth","React","useState","onLayout","useCallback","e","newWidth","nativeEvent","layout","Math","round"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEe,SAASA,QAAT,GAAqD;AAChE,QAAMC,MAAM,GAAG,uCAAf;;AACA,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoBC,eAAMC,QAAN,CAAeJ,MAAM,CAACC,KAAtB,CAA1B;;AAEA,QAAMI,QAAQ,GAAGF,eAAMG,WAAN,CAAmBC,CAAD,IAA0B;AACzD,UAAMC,QAAQ,GAAGD,CAAC,CAACE,WAAF,CAAcC,MAAd,CAAqBT,KAAtC;;AAEA,QAAIO,QAAQ,GAAG,CAAX,IAAgBG,IAAI,CAACC,KAAL,CAAWJ,QAAX,MAAyBG,IAAI,CAACC,KAAL,CAAWX,KAAX,CAA7C,EAAgE;AAC5DC,MAAAA,QAAQ,CAACM,QAAD,CAAR;AACH;AACJ,GANgB,EAMd,EANc,CAAjB;;AAQA,SAAO,CAACP,KAAD,EAAQI,QAAR,CAAP;AACH","sourcesContent":["import React from 'react';\nimport { LayoutChangeEvent, useWindowDimensions, ViewProps } from 'react-native';\n\nexport default function useWidth(): [number, ViewProps['onLayout']] {\n    const window = useWindowDimensions();\n    const [width, setWidth] = React.useState(window.width);\n\n    const onLayout = React.useCallback((e: LayoutChangeEvent) => {\n        const newWidth = e.nativeEvent.layout.width;\n\n        if (newWidth > 0 && Math.round(newWidth) !== Math.round(width)) {\n            setWidth(newWidth);\n        }\n    }, []);\n\n    return [width, onLayout];\n}"]}

package/build/module/hooks/useWidth.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import { useWindowDimensions } from 'react-native';
-export default function useWidth() {
-  const window = useWindowDimensions();
-  const [width, setWidth] = React.useState(window.width);
-  const onLayout = React.useCallback(e => {
-    const newWidth = e.nativeEvent.layout.width;
-
-    if (newWidth > 0 && Math.round(newWidth) !== Math.round(width)) {
-      setWidth(newWidth);
-    }
-  }, []);
-  return [width, onLayout];
-}
-//# sourceMappingURL=useWidth.js.map

package/build/module/hooks/useWidth.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["useWidth.ts"],"names":["React","useWindowDimensions","useWidth","window","width","setWidth","useState","onLayout","useCallback","e","newWidth","nativeEvent","layout","Math","round"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAA4BC,mBAA5B,QAAkE,cAAlE;AAEA,eAAe,SAASC,QAAT,GAAqD;AAChE,QAAMC,MAAM,GAAGF,mBAAmB,EAAlC;AACA,QAAM,CAACG,KAAD,EAAQC,QAAR,IAAoBL,KAAK,CAACM,QAAN,CAAeH,MAAM,CAACC,KAAtB,CAA1B;AAEA,QAAMG,QAAQ,GAAGP,KAAK,CAACQ,WAAN,CAAmBC,CAAD,IAA0B;AACzD,UAAMC,QAAQ,GAAGD,CAAC,CAACE,WAAF,CAAcC,MAAd,CAAqBR,KAAtC;;AAEA,QAAIM,QAAQ,GAAG,CAAX,IAAgBG,IAAI,CAACC,KAAL,CAAWJ,QAAX,MAAyBG,IAAI,CAACC,KAAL,CAAWV,KAAX,CAA7C,EAAgE;AAC5DC,MAAAA,QAAQ,CAACK,QAAD,CAAR;AACH;AACJ,GANgB,EAMd,EANc,CAAjB;AAQA,SAAO,CAACN,KAAD,EAAQG,QAAR,CAAP;AACH","sourcesContent":["import React from 'react';\nimport { LayoutChangeEvent, useWindowDimensions, ViewProps } from 'react-native';\n\nexport default function useWidth(): [number, ViewProps['onLayout']] {\n    const window = useWindowDimensions();\n    const [width, setWidth] = React.useState(window.width);\n\n    const onLayout = React.useCallback((e: LayoutChangeEvent) => {\n        const newWidth = e.nativeEvent.layout.width;\n\n        if (newWidth > 0 && Math.round(newWidth) !== Math.round(width)) {\n            setWidth(newWidth);\n        }\n    }, []);\n\n    return [width, onLayout];\n}"]}

package/build/typescript/hooks/useWidth.d.ts

@@ -1,2 +0,0 @@
-import { ViewProps } from 'react-native';
-export default function useWidth(): [number, ViewProps['onLayout']];

package/src/hooks/useWidth.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-import { LayoutChangeEvent, useWindowDimensions, ViewProps } from 'react-native';
-
-export default function useWidth(): [number, ViewProps['onLayout']] {
-    const window = useWindowDimensions();
-    const [width, setWidth] = React.useState(window.width);
-
-    const onLayout = React.useCallback((e: LayoutChangeEvent) => {
-        const newWidth = e.nativeEvent.layout.width;
-
-        if (newWidth > 0 && Math.round(newWidth) !== Math.round(width)) {
-            setWidth(newWidth);
-        }
-    }, []);
-
-    return [width, onLayout];
-}