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

package/build/module/ViewPager/ChildrenMemoizedPage.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","Page","props","isVisible","otherProps","memo","prevProps","nextProps","children","isNeighbor","rerenderKey"],"sources":["ChildrenMemoizedPage.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport type { PageProps } from './ViewPagerProps';\n\nconst Page = function Page(props: PageProps) {\n    const { isVisible, ...otherProps } = props;\n\n    return (\n        <View\n            collapsable={false}\n            {...otherProps}\n        />\n    );\n};\n\nexport default React.memo(Page, (prevProps, nextProps) => {\n    if (prevProps.children === null && nextProps.children === null) {\n        return true;\n    }\n\n    // isVisible is an important condition for determining memos on the web.\n    // Reference ViewPagerWeb's return.\n    if (prevProps.isVisible !== nextProps.isVisible) {\n        return false;\n    }\n\n    if (nextProps.isVisible || nextProps.isNeighbor) {\n        return false;\n    }\n\n    if (prevProps.rerenderKey !== nextProps.rerenderKey) {\n        return false;\n    }\n\n    return prevProps.children !== null && nextProps.children !== null;\n});\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;;AAGA,MAAMC,IAAI,GAAG,SAASA,IAAT,CAAcC,KAAd,EAAgC;EACzC,MAAM;IAAEC,SAAF;IAAa,GAAGC;EAAhB,IAA+BF,KAArC;EAEA,oBACI,oBAAC,IAAD;IACI,WAAW,EAAE;EADjB,GAEQE,UAFR,EADJ;AAMH,CATD;;AAWA,4BAAeL,KAAK,CAACM,IAAN,CAAWJ,IAAX,EAAiB,CAACK,SAAD,EAAYC,SAAZ,KAA0B;EACtD,IAAID,SAAS,CAACE,QAAV,KAAuB,IAAvB,IAA+BD,SAAS,CAACC,QAAV,KAAuB,IAA1D,EAAgE;IAC5D,OAAO,IAAP;EACH,CAHqD,CAKtD;EACA;;;EACA,IAAIF,SAAS,CAACH,SAAV,KAAwBI,SAAS,CAACJ,SAAtC,EAAiD;IAC7C,OAAO,KAAP;EACH;;EAED,IAAII,SAAS,CAACJ,SAAV,IAAuBI,SAAS,CAACE,UAArC,EAAiD;IAC7C,OAAO,KAAP;EACH;;EAED,IAAIH,SAAS,CAACI,WAAV,KAA0BH,SAAS,CAACG,WAAxC,EAAqD;IACjD,OAAO,KAAP;EACH;;EAED,OAAOJ,SAAS,CAACE,QAAV,KAAuB,IAAvB,IAA+BD,SAAS,CAACC,QAAV,KAAuB,IAA7D;AACH,CApBc,CAAf"}
+{"version":3,"names":["React","memo","useState","Platform","View","runOnJS","useAnimatedReaction","StyleSheet","OFFSCREEN_RERENDER_LIMIT","styles","create","none","display","Page","props","index","children","loading","sharedIndex","assumeInitialPageState","activeIndex","value","active","OS","visited","pageState","setPageState","content","updatePageState","neighbor","prevState","willVisible","willActive","willNeighbor","nextState","activeStateChanged","willNewNeighbor","style","absoluteFill","undefined","prevProps","nextProps","rerenderKey"],"sources":["ChildrenMemoizedPage.tsx"],"sourcesContent":["import React, { memo, useState } from 'react';\nimport { Platform, View } from 'react-native';\nimport { runOnJS, useAnimatedReaction } from 'react-native-reanimated';\nimport { StyleSheet } from '@fountain-ui/core';\nimport type { PageProps } from './ViewPagerProps';\n\nconst OFFSCREEN_RERENDER_LIMIT = 1;\n\nconst styles = StyleSheet.create({\n    none: { display: 'none' },\n});\n\ninterface PageState {\n    active: boolean;\n    visited: boolean;\n}\n\nfunction Page(props: PageProps) {\n    const {\n        index,\n        children,\n        loading,\n        sharedIndex,\n    } = props;\n\n    const assumeInitialPageState = (): PageState => {\n        const activeIndex = sharedIndex.value;\n\n        const active = index === activeIndex;\n\n        if (Platform.OS === 'web') {\n            return { active, visited: active };\n        }\n\n        if (loading === 'eager') {\n            return { active, visited: true };\n        }\n\n        const visited = index >= activeIndex - OFFSCREEN_RERENDER_LIMIT\n            && index <= activeIndex + OFFSCREEN_RERENDER_LIMIT;\n\n        return { active, visited };\n    };\n\n    const [pageState, setPageState] = useState<PageState>(assumeInitialPageState);\n\n    const content = pageState.visited ? children : null;\n\n    const updatePageState = (active: boolean, neighbor: boolean) => {\n        setPageState(prevState => {\n            if (prevState.active !== active) {\n                return { active, visited: active || prevState.visited };\n            }\n\n            if (neighbor && !prevState.visited) {\n                return { ...prevState, visited: true };\n            }\n\n            return prevState;\n        });\n    };\n\n    useAnimatedReaction(\n        () => {\n            const activeIndex = sharedIndex.value;\n\n            const willVisible = index >= activeIndex - OFFSCREEN_RERENDER_LIMIT\n                && index <= activeIndex + OFFSCREEN_RERENDER_LIMIT;\n\n            const willActive = index === activeIndex;\n            const willNeighbor = Platform.OS === 'web' ? false : (willVisible && !willActive);\n\n            return { willActive, willNeighbor };\n        },\n        (nextState, prevState) => {\n            const activeStateChanged = nextState.willActive !== prevState?.willActive;\n            const willNewNeighbor = nextState.willNeighbor && !prevState?.willNeighbor;\n\n            if (activeStateChanged || willNewNeighbor) {\n                runOnJS(updatePageState)(nextState.willActive, nextState.willNeighbor);\n            }\n        },\n        [index],\n    );\n\n    const style = Platform.OS === 'web'\n        ? (pageState.active ? StyleSheet.absoluteFill : styles.none)\n        : undefined;\n\n    return (\n        <View\n            children={content}\n            collapsable={false}\n            style={style}\n        />\n    );\n}\n\nexport default memo(Page, (prevProps, nextProps) => {\n    if (prevProps.rerenderKey !== nextProps.rerenderKey) {\n        return false;\n    }\n\n    return prevProps.index !== nextProps.index;\n});\n"],"mappings":"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"}

package/build/module/ViewPager/ViewPagerNative.js

@@ -1,58 +1,64 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { Children, forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
 import RNViewPager from 'react-native-pager-view';
-import { defaultEnableNeighborPageRerender, defaultEnableVisibleHint, defaultLoading, defaultPageComponent, usePageRenderer } from './utils';
-export default function ViewPager(props) {
+import { useSharedValue } from 'react-native-reanimated';
+import { defaultInitialPage, defaultLoading, defaultPageComponent } from './utils';
+const ViewPager = /*#__PURE__*/forwardRef(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 = useRef(index);
+  const sharedIndex = useSharedValue(initialPage);
   const pagerRef = useRef(null);
-  const renderer = usePageRenderer({
-    enableVisibleHint,
-    index,
-    loading,
-    pageComponent,
-    pageForceRerenderKey,
-    enableNeighborPageRerender
-  });
+
+  const setPage = newIndex => {
+    requestAnimationFrame(() => {
+      var _pagerRef$current;
+
+      (_pagerRef$current = pagerRef.current) === null || _pagerRef$current === void 0 ? void 0 : _pagerRef$current.setPage(newIndex);
+    });
+  };
+
+  useImperativeHandle(ref, () => ({
+    setPage
+  }), []);
   const handlePageSelected = useCallback(e => {
-    indexRef.current = e.nativeEvent.position;
+    const currentIndex = sharedIndex.value;
+    const nextIndex = e.nativeEvent.position;
+
+    if (currentIndex === nextIndex) {
+      return;
+    }
+
+    sharedIndex.value = nextIndex;
 
     if (onChange) {
-      onChange(indexRef.current);
+      onChange(nextIndex);
     }
   }, [onChange]);
-  useEffect(() => {
-    const handleNumber = index !== indexRef.current ? requestAnimationFrame(() => {
-      var _pagerRef$current;
-
-      return (_pagerRef$current = pagerRef.current) === null || _pagerRef$current === void 0 ? void 0 : _pagerRef$current.setPage(index);
-    }) : undefined;
-    return () => {
-      if (handleNumber) {
-        cancelAnimationFrame(handleNumber);
-      }
-    };
-  }, [index]);
+  const PageComponent = pageComponent;
   return /*#__PURE__*/React.createElement(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) => /*#__PURE__*/React.createElement(PageComponent, {
+    key: index,
+    children: child,
+    index: index,
+    loading: loading,
+    rerenderKey: pageForceRerenderKey,
+    sharedIndex: sharedIndex
+  })));
+});
+export default ViewPager;
 //# sourceMappingURL=ViewPagerNative.js.map

package/build/module/ViewPager/ViewPagerNative.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useRef","RNViewPager","defaultEnableNeighborPageRerender","defaultEnableVisibleHint","defaultLoading","defaultPageComponent","usePageRenderer","ViewPager","props","children","enableVisibleHint","index","keyboardDismissMode","loading","onChange","pageComponent","enableNeighborPageRerender","pageForceRerenderKey","scrollEnabled","style","indexRef","pagerRef","renderer","handlePageSelected","e","current","nativeEvent","position","handleNumber","requestAnimationFrame","setPage","undefined","cancelAnimationFrame"],"sources":["ViewPagerNative.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react';\nimport type { ViewPagerOnPageSelectedEvent } from 'react-native-pager-view';\nimport RNViewPager from 'react-native-pager-view';\nimport type ViewPagerProps from './ViewPagerProps';\nimport {\n    defaultEnableNeighborPageRerender,\n    defaultEnableVisibleHint,\n    defaultLoading,\n    defaultPageComponent,\n    usePageRenderer,\n} from './utils';\n\nexport default function ViewPager(props: ViewPagerProps) {\n    const {\n        children,\n        enableVisibleHint = defaultEnableVisibleHint,\n        index,\n        keyboardDismissMode = 'on-drag',\n        loading = defaultLoading,\n        onChange,\n        pageComponent = defaultPageComponent,\n        enableNeighborPageRerender = defaultEnableNeighborPageRerender,\n        pageForceRerenderKey,\n        scrollEnabled = true,\n        style,\n    } = props;\n\n    const indexRef = useRef<number>(index);\n    const pagerRef = useRef<RNViewPager | null>(null);\n\n    const renderer = usePageRenderer({\n        enableVisibleHint,\n        index,\n        loading,\n        pageComponent,\n        pageForceRerenderKey,\n        enableNeighborPageRerender,\n    });\n\n    const handlePageSelected = useCallback((e: ViewPagerOnPageSelectedEvent) => {\n        indexRef.current = e.nativeEvent.position;\n\n        if (onChange) {\n            onChange(indexRef.current);\n        }\n    }, [onChange]);\n\n    useEffect(() => {\n        const handleNumber = index !== indexRef.current\n            ? requestAnimationFrame(() => pagerRef.current?.setPage(index))\n            : undefined;\n\n        return () => {\n            if (handleNumber) {\n                cancelAnimationFrame(handleNumber);\n            }\n        };\n    }, [index]);\n\n    return (\n        <RNViewPager\n            initialPage={index}\n            keyboardDismissMode={keyboardDismissMode}\n            onPageSelected={handlePageSelected}\n            pageMargin={8}\n            ref={pagerRef}\n            scrollEnabled={scrollEnabled}\n            style={style}\n        >\n            {renderer(children)}\n        </RNViewPager>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,SAA7B,EAAwCC,MAAxC,QAAsD,OAAtD;AAEA,OAAOC,WAAP,MAAwB,yBAAxB;AAEA,SACIC,iCADJ,EAEIC,wBAFJ,EAGIC,cAHJ,EAIIC,oBAJJ,EAKIC,eALJ,QAMO,SANP;AAQA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,QADE;IAEFC,iBAAiB,GAAGP,wBAFlB;IAGFQ,KAHE;IAIFC,mBAAmB,GAAG,SAJpB;IAKFC,OAAO,GAAGT,cALR;IAMFU,QANE;IAOFC,aAAa,GAAGV,oBAPd;IAQFW,0BAA0B,GAAGd,iCAR3B;IASFe,oBATE;IAUFC,aAAa,GAAG,IAVd;IAWFC;EAXE,IAYFX,KAZJ;EAcA,MAAMY,QAAQ,GAAGpB,MAAM,CAASW,KAAT,CAAvB;EACA,MAAMU,QAAQ,GAAGrB,MAAM,CAAqB,IAArB,CAAvB;EAEA,MAAMsB,QAAQ,GAAGhB,eAAe,CAAC;IAC7BI,iBAD6B;IAE7BC,KAF6B;IAG7BE,OAH6B;IAI7BE,aAJ6B;IAK7BE,oBAL6B;IAM7BD;EAN6B,CAAD,CAAhC;EASA,MAAMO,kBAAkB,GAAGzB,WAAW,CAAE0B,CAAD,IAAqC;IACxEJ,QAAQ,CAACK,OAAT,GAAmBD,CAAC,CAACE,WAAF,CAAcC,QAAjC;;IAEA,IAAIb,QAAJ,EAAc;MACVA,QAAQ,CAACM,QAAQ,CAACK,OAAV,CAAR;IACH;EACJ,CANqC,EAMnC,CAACX,QAAD,CANmC,CAAtC;EAQAf,SAAS,CAAC,MAAM;IACZ,MAAM6B,YAAY,GAAGjB,KAAK,KAAKS,QAAQ,CAACK,OAAnB,GACfI,qBAAqB,CAAC;MAAA;;MAAA,4BAAMR,QAAQ,CAACI,OAAf,sDAAM,kBAAkBK,OAAlB,CAA0BnB,KAA1B,CAAN;IAAA,CAAD,CADN,GAEfoB,SAFN;IAIA,OAAO,MAAM;MACT,IAAIH,YAAJ,EAAkB;QACdI,oBAAoB,CAACJ,YAAD,CAApB;MACH;IACJ,CAJD;EAKH,CAVQ,EAUN,CAACjB,KAAD,CAVM,CAAT;EAYA,oBACI,oBAAC,WAAD;IACI,WAAW,EAAEA,KADjB;IAEI,mBAAmB,EAAEC,mBAFzB;IAGI,cAAc,EAAEW,kBAHpB;IAII,UAAU,EAAE,CAJhB;IAKI,GAAG,EAAEF,QALT;IAMI,aAAa,EAAEH,aANnB;IAOI,KAAK,EAAEC;EAPX,GASKG,QAAQ,CAACb,QAAD,CATb,CADJ;AAaH;AAAA"}
+{"version":3,"names":["React","Children","forwardRef","useCallback","useImperativeHandle","useRef","RNViewPager","useSharedValue","defaultInitialPage","defaultLoading","defaultPageComponent","ViewPager","props","ref","children","initialPage","keyboardDismissMode","loading","onChange","pageComponent","pageForceRerenderKey","scrollEnabled","style","sharedIndex","pagerRef","setPage","newIndex","requestAnimationFrame","current","handlePageSelected","e","currentIndex","value","nextIndex","nativeEvent","position","PageComponent","map","child","index"],"sources":["ViewPagerNative.tsx"],"sourcesContent":["import React, { Children, forwardRef, useCallback, useImperativeHandle, useRef } from 'react';\nimport type { ViewPagerOnPageSelectedEvent } from 'react-native-pager-view';\nimport RNViewPager from 'react-native-pager-view';\nimport { useSharedValue } from 'react-native-reanimated';\nimport type ViewPagerProps from './ViewPagerProps';\nimport type { ViewPagerInstance } from './ViewPagerProps';\nimport { defaultInitialPage, defaultLoading, defaultPageComponent } from './utils';\n\nconst ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPager(props, ref) {\n    const {\n        children,\n        initialPage = defaultInitialPage,\n        keyboardDismissMode = 'on-drag',\n        loading = defaultLoading,\n        onChange,\n        pageComponent = defaultPageComponent,\n        pageForceRerenderKey,\n        scrollEnabled = true,\n        style,\n    } = props;\n\n    const sharedIndex = useSharedValue<number>(initialPage);\n    const pagerRef = useRef<RNViewPager | null>(null);\n\n    const setPage = (newIndex: number) => {\n        requestAnimationFrame(() => {\n            pagerRef.current?.setPage(newIndex);\n        });\n    };\n\n    useImperativeHandle(\n        ref,\n        () => ({ setPage }),\n        [],\n    );\n\n    const handlePageSelected = useCallback((e: ViewPagerOnPageSelectedEvent) => {\n        const currentIndex = sharedIndex.value;\n        const nextIndex = e.nativeEvent.position;\n\n        if (currentIndex === nextIndex) {\n            return;\n        }\n\n        sharedIndex.value = nextIndex;\n\n        if (onChange) {\n            onChange(nextIndex);\n        }\n    }, [onChange]);\n\n    const PageComponent = pageComponent;\n\n    return (\n        <RNViewPager\n            ref={pagerRef}\n            initialPage={initialPage}\n            keyboardDismissMode={keyboardDismissMode}\n            onPageSelected={handlePageSelected}\n            pageMargin={8}\n            scrollEnabled={scrollEnabled}\n            style={style}\n        >\n            {Children.map(children, (child, index) => (\n                <PageComponent\n                    key={index}\n                    children={child}\n                    index={index}\n                    loading={loading}\n                    rerenderKey={pageForceRerenderKey}\n                    sharedIndex={sharedIndex}\n                />\n            ))}\n        </RNViewPager>\n    );\n});\n\nexport default ViewPager;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,QAAhB,EAA0BC,UAA1B,EAAsCC,WAAtC,EAAmDC,mBAAnD,EAAwEC,MAAxE,QAAsF,OAAtF;AAEA,OAAOC,WAAP,MAAwB,yBAAxB;AACA,SAASC,cAAT,QAA+B,yBAA/B;AAGA,SAASC,kBAAT,EAA6BC,cAA7B,EAA6CC,oBAA7C,QAAyE,SAAzE;AAEA,MAAMC,SAAS,gBAAGT,UAAU,CAAoC,SAASS,SAAT,CAAmBC,KAAnB,EAA0BC,GAA1B,EAA+B;EAC3F,MAAM;IACFC,QADE;IAEFC,WAAW,GAAGP,kBAFZ;IAGFQ,mBAAmB,GAAG,SAHpB;IAIFC,OAAO,GAAGR,cAJR;IAKFS,QALE;IAMFC,aAAa,GAAGT,oBANd;IAOFU,oBAPE;IAQFC,aAAa,GAAG,IARd;IASFC;EATE,IAUFV,KAVJ;EAYA,MAAMW,WAAW,GAAGhB,cAAc,CAASQ,WAAT,CAAlC;EACA,MAAMS,QAAQ,GAAGnB,MAAM,CAAqB,IAArB,CAAvB;;EAEA,MAAMoB,OAAO,GAAIC,QAAD,IAAsB;IAClCC,qBAAqB,CAAC,MAAM;MAAA;;MACxB,qBAAAH,QAAQ,CAACI,OAAT,wEAAkBH,OAAlB,CAA0BC,QAA1B;IACH,CAFoB,CAArB;EAGH,CAJD;;EAMAtB,mBAAmB,CACfS,GADe,EAEf,OAAO;IAAEY;EAAF,CAAP,CAFe,EAGf,EAHe,CAAnB;EAMA,MAAMI,kBAAkB,GAAG1B,WAAW,CAAE2B,CAAD,IAAqC;IACxE,MAAMC,YAAY,GAAGR,WAAW,CAACS,KAAjC;IACA,MAAMC,SAAS,GAAGH,CAAC,CAACI,WAAF,CAAcC,QAAhC;;IAEA,IAAIJ,YAAY,KAAKE,SAArB,EAAgC;MAC5B;IACH;;IAEDV,WAAW,CAACS,KAAZ,GAAoBC,SAApB;;IAEA,IAAIf,QAAJ,EAAc;MACVA,QAAQ,CAACe,SAAD,CAAR;IACH;EACJ,CAbqC,EAanC,CAACf,QAAD,CAbmC,CAAtC;EAeA,MAAMkB,aAAa,GAAGjB,aAAtB;EAEA,oBACI,oBAAC,WAAD;IACI,GAAG,EAAEK,QADT;IAEI,WAAW,EAAET,WAFjB;IAGI,mBAAmB,EAAEC,mBAHzB;IAII,cAAc,EAAEa,kBAJpB;IAKI,UAAU,EAAE,CALhB;IAMI,aAAa,EAAER,aANnB;IAOI,KAAK,EAAEC;EAPX,GASKrB,QAAQ,CAACoC,GAAT,CAAavB,QAAb,EAAuB,CAACwB,KAAD,EAAQC,KAAR,kBACpB,oBAAC,aAAD;IACI,GAAG,EAAEA,KADT;IAEI,QAAQ,EAAED,KAFd;IAGI,KAAK,EAAEC,KAHX;IAII,OAAO,EAAEtB,OAJb;IAKI,WAAW,EAAEG,oBALjB;IAMI,WAAW,EAAEG;EANjB,EADH,CATL,CADJ;AAsBH,CAnE2B,CAA5B;AAqEA,eAAeZ,SAAf"}

package/build/module/ViewPager/ViewPagerProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["ViewPagerProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { ComponentProps } from '@fountain-ui/core';\n\nexport type KeyboardDismissMode = 'none' | 'on-drag';\n\nexport type PageProps = React.PropsWithChildren<ViewProps> & {\n    isNeighbor: boolean;\n    isVisible: boolean;\n    rerenderKey?: any;\n};\n\nexport type PageComponent = React.ComponentType<PageProps>;\n\nexport type Loading = 'lazy' | 'eager';\n\nexport default interface ViewPagerProps extends ComponentProps<{\n    /**\n     * Collection of ViewPager components.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * If `true`, enable page visible hint.\n     * @default false\n     */\n    enableVisibleHint?: boolean;\n\n    /**\n     * If `true`, Based on the current index, the pages on the left and right are also rerender.\n     * @default false\n     */\n    enableNeighborPageRerender?: boolean;\n\n    /**\n     * A number representing the index of the active page.\n     */\n    index: number,\n\n    /**\n     * Whether to load the page immediately (`eager`) or on an as-needed basis (`lazy`).\n     * @default 'lazy'\n     */\n    loading?: Loading;\n\n    /**\n     * Callback fired when an index is changed.\n     */\n    onChange?: (newIndex: number) => void,\n\n    /**\n     * The component used to render the wrapper of the page.\n     * @default 'ChildrenMemoizedPage'\n     */\n    pageComponent?: PageComponent,\n\n    /**\n     * When this value is changed, page will be rerender.\n     */\n    pageForceRerenderKey?: any;\n\n    /**\n     * Mobile only. Should pager view scroll, when scroll enabled.\n     * @default true\n     */\n    scrollEnabled?: boolean;\n\n    /**\n     * Mobile only. Determines whether the keyboard gets dismissed in response to a drag.\n     * @default 'on-drag'\n     */\n    keyboardDismissMode?: KeyboardDismissMode;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["ViewPagerProps.ts"],"sourcesContent":["import type { ComponentType, PropsWithChildren, ReactNode, Ref } from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport type { ComponentProps } from '@fountain-ui/core';\n\nexport type KeyboardDismissMode = 'none' | 'on-drag';\n\nexport type PageProps = PropsWithChildren<ViewProps> & {\n    index: number;\n    loading: ViewPagerProps['loading'];\n    sharedIndex: SharedValue<number>;\n    rerenderKey?: ViewPagerProps['pageForceRerenderKey'];\n};\n\nexport type PageComponent = ComponentType<PageProps>;\n\nexport type Loading = 'lazy' | 'eager';\n\nexport interface ViewPagerInstance {\n    /**\n     * Function to scroll to a specific page in the ViewPager. Invalid index is ignored.\n     * @param index\n     */\n    setPage: (index: number) => void;\n}\n\nexport default interface ViewPagerProps extends ComponentProps<{\n    ref?: Ref<ViewPagerInstance>;\n\n    /**\n     * Collection of ViewPager components.\n     */\n    children?: ReactNode;\n\n    /**\n     * Index of initial page that should be selected.\n     * @default 0\n     */\n    initialPage?: number;\n\n    /**\n     * Whether to load the page immediately (`eager`) or on an as-needed basis (`lazy`).\n     * @default 'lazy'\n     */\n    loading?: Loading;\n\n    /**\n     * Callback fired when an index is changed.\n     */\n    onChange?: (newIndex: number) => void,\n\n    /**\n     * The component used to render the wrapper of the page.\n     * @default 'ChildrenMemoizedPage'\n     */\n    pageComponent?: PageComponent,\n\n    /**\n     * When this value is changed, page will be rerender.\n     */\n    pageForceRerenderKey?: any;\n\n    /**\n     * Mobile only. Should pager view scroll, when scroll enabled.\n     * @default true\n     */\n    scrollEnabled?: boolean;\n\n    /**\n     * Mobile only. Determines whether the keyboard gets dismissed in response to a drag.\n     * @default 'on-drag'\n     */\n    keyboardDismissMode?: KeyboardDismissMode;\n}> {}\n"],"mappings":""}

package/build/module/ViewPager/ViewPagerWeb.js

@@ -1,41 +1,44 @@
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
-import { defaultEnableNeighborPageRerender, defaultEnableVisibleHint, defaultLoading, defaultPageComponent, usePageRenderer } from './utils';
+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 { defaultInitialPage, defaultLoading, defaultPageComponent } from './utils';
 const styles = StyleSheet.create({
   root: {
     // @ts-ignore
     overflow: 'auto',
     position: 'relative'
-  },
-  none: {
-    display: 'none'
   }
 });
-export default function ViewPager(props) {
+const ViewPager = /*#__PURE__*/forwardRef(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(initialPage);
+
+  const setPage = newIndex => {
+    sharedIndex.value = newIndex;
+  };
+
+  useImperativeHandle(ref, () => ({
+    setPage
+  }), []);
+  const PageComponent = pageComponent;
   return /*#__PURE__*/React.createElement(View, {
     style: [styles.root, style]
-  }, React.Children.map(renderer(children), (child, i) => /*#__PURE__*/React.cloneElement(child, {
-    isVisible: i === index,
-    style: i !== index ? styles.none : StyleSheet.absoluteFill
+  }, Children.map(children, (child, index) => /*#__PURE__*/React.createElement(PageComponent, {
+    key: index,
+    children: child,
+    index: index,
+    loading: loading,
+    rerenderKey: pageForceRerenderKey,
+    sharedIndex: sharedIndex
   })));
-}
-;
+});
+export default ViewPager;
 //# sourceMappingURL=ViewPagerWeb.js.map

package/build/module/ViewPager/ViewPagerWeb.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","View","defaultEnableNeighborPageRerender","defaultEnableVisibleHint","defaultLoading","defaultPageComponent","usePageRenderer","styles","create","root","overflow","position","none","display","ViewPager","props","children","enableVisibleHint","enableNeighborPageRerender","index","loading","pageComponent","pageForceRerenderKey","style","renderer","Children","map","child","i","cloneElement","isVisible","absoluteFill"],"sources":["ViewPagerWeb.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport type ViewPagerProps from './ViewPagerProps';\nimport {\n    defaultEnableNeighborPageRerender,\n    defaultEnableVisibleHint,\n    defaultLoading,\n    defaultPageComponent,\n    usePageRenderer,\n} from './utils';\n\nconst styles = StyleSheet.create({\n    root: {\n        // @ts-ignore\n        overflow: 'auto',\n        position: 'relative',\n    },\n    none: { display: 'none' },\n});\n\nexport default function ViewPager(props: ViewPagerProps) {\n    const {\n        children,\n        enableVisibleHint = defaultEnableVisibleHint,\n        enableNeighborPageRerender = defaultEnableNeighborPageRerender,\n        index,\n        loading = defaultLoading,\n        pageComponent = defaultPageComponent,\n        pageForceRerenderKey,\n        style,\n    } = props;\n\n    const renderer = usePageRenderer({\n        enableVisibleHint,\n        enableNeighborPageRerender,\n        index,\n        loading,\n        pageComponent,\n        pageForceRerenderKey,\n    });\n\n    return (\n        <View style={[styles.root, style]}>\n            {React.Children.map(renderer(children), (child, i) =>\n                React.cloneElement(child as React.ReactElement, {\n                    isVisible: i === index,\n                    style: i !== index ? styles.none : StyleSheet.absoluteFill,\n                }),\n            )}\n        </View>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,EAAqBC,IAArB,QAAiC,cAAjC;AAEA,SACIC,iCADJ,EAEIC,wBAFJ,EAGIC,cAHJ,EAIIC,oBAJJ,EAKIC,eALJ,QAMO,SANP;AAQA,MAAMC,MAAM,GAAGP,UAAU,CAACQ,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACF;IACAC,QAAQ,EAAE,MAFR;IAGFC,QAAQ,EAAE;EAHR,CADuB;EAM7BC,IAAI,EAAE;IAAEC,OAAO,EAAE;EAAX;AANuB,CAAlB,CAAf;AASA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,QADE;IAEFC,iBAAiB,GAAGd,wBAFlB;IAGFe,0BAA0B,GAAGhB,iCAH3B;IAIFiB,KAJE;IAKFC,OAAO,GAAGhB,cALR;IAMFiB,aAAa,GAAGhB,oBANd;IAOFiB,oBAPE;IAQFC;EARE,IASFR,KATJ;EAWA,MAAMS,QAAQ,GAAGlB,eAAe,CAAC;IAC7BW,iBAD6B;IAE7BC,0BAF6B;IAG7BC,KAH6B;IAI7BC,OAJ6B;IAK7BC,aAL6B;IAM7BC;EAN6B,CAAD,CAAhC;EASA,oBACI,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACf,MAAM,CAACE,IAAR,EAAcc,KAAd;EAAb,GACKxB,KAAK,CAAC0B,QAAN,CAAeC,GAAf,CAAmBF,QAAQ,CAACR,QAAD,CAA3B,EAAuC,CAACW,KAAD,EAAQC,CAAR,kBACpC7B,KAAK,CAAC8B,YAAN,CAAmBF,KAAnB,EAAgD;IAC5CG,SAAS,EAAEF,CAAC,KAAKT,KAD2B;IAE5CI,KAAK,EAAEK,CAAC,KAAKT,KAAN,GAAcZ,MAAM,CAACK,IAArB,GAA4BZ,UAAU,CAAC+B;EAFF,CAAhD,CADH,CADL,CADJ;AAUH;AAAA"}
+{"version":3,"names":["React","Children","forwardRef","useImperativeHandle","View","useSharedValue","StyleSheet","defaultInitialPage","defaultLoading","defaultPageComponent","styles","create","root","overflow","position","ViewPager","props","ref","children","initialPage","loading","pageComponent","pageForceRerenderKey","style","sharedIndex","setPage","newIndex","value","PageComponent","map","child","index"],"sources":["ViewPagerWeb.tsx"],"sourcesContent":["import React, { Children, forwardRef, useImperativeHandle } from 'react';\nimport { View } from 'react-native';\nimport { useSharedValue } from 'react-native-reanimated';\nimport { StyleSheet } from '@fountain-ui/core';\nimport type ViewPagerProps from './ViewPagerProps';\nimport type { ViewPagerInstance } from './ViewPagerProps';\nimport { defaultInitialPage, defaultLoading, defaultPageComponent } from './utils';\n\nconst styles = StyleSheet.create({\n    root: {\n        // @ts-ignore\n        overflow: 'auto',\n        position: 'relative',\n    },\n});\n\nconst ViewPager = forwardRef<ViewPagerInstance, ViewPagerProps>(function ViewPager(props, ref) {\n    const {\n        children,\n        initialPage = defaultInitialPage,\n        loading = defaultLoading,\n        pageComponent = defaultPageComponent,\n        pageForceRerenderKey,\n        style,\n    } = props;\n\n    const sharedIndex = useSharedValue<number>(initialPage);\n\n    const setPage = (newIndex: number) => {\n        sharedIndex.value = newIndex;\n    };\n\n    useImperativeHandle(\n        ref,\n        () => ({ setPage }),\n        [],\n    );\n\n    const PageComponent = pageComponent;\n\n    return (\n        <View style={[styles.root, style]}>\n            {Children.map(children, (child, index) => (\n                <PageComponent\n                    key={index}\n                    children={child}\n                    index={index}\n                    loading={loading}\n                    rerenderKey={pageForceRerenderKey}\n                    sharedIndex={sharedIndex}\n                />\n            ))}\n        </View>\n    );\n});\n\nexport default ViewPager;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,QAAhB,EAA0BC,UAA1B,EAAsCC,mBAAtC,QAAiE,OAAjE;AACA,SAASC,IAAT,QAAqB,cAArB;AACA,SAASC,cAAT,QAA+B,yBAA/B;AACA,SAASC,UAAT,QAA2B,mBAA3B;AAGA,SAASC,kBAAT,EAA6BC,cAA7B,EAA6CC,oBAA7C,QAAyE,SAAzE;AAEA,MAAMC,MAAM,GAAGJ,UAAU,CAACK,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACF;IACAC,QAAQ,EAAE,MAFR;IAGFC,QAAQ,EAAE;EAHR;AADuB,CAAlB,CAAf;AAQA,MAAMC,SAAS,gBAAGb,UAAU,CAAoC,SAASa,SAAT,CAAmBC,KAAnB,EAA0BC,GAA1B,EAA+B;EAC3F,MAAM;IACFC,QADE;IAEFC,WAAW,GAAGZ,kBAFZ;IAGFa,OAAO,GAAGZ,cAHR;IAIFa,aAAa,GAAGZ,oBAJd;IAKFa,oBALE;IAMFC;EANE,IAOFP,KAPJ;EASA,MAAMQ,WAAW,GAAGnB,cAAc,CAASc,WAAT,CAAlC;;EAEA,MAAMM,OAAO,GAAIC,QAAD,IAAsB;IAClCF,WAAW,CAACG,KAAZ,GAAoBD,QAApB;EACH,CAFD;;EAIAvB,mBAAmB,CACfc,GADe,EAEf,OAAO;IAAEQ;EAAF,CAAP,CAFe,EAGf,EAHe,CAAnB;EAMA,MAAMG,aAAa,GAAGP,aAAtB;EAEA,oBACI,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACX,MAAM,CAACE,IAAR,EAAcW,KAAd;EAAb,GACKtB,QAAQ,CAAC4B,GAAT,CAAaX,QAAb,EAAuB,CAACY,KAAD,EAAQC,KAAR,kBACpB,oBAAC,aAAD;IACI,GAAG,EAAEA,KADT;IAEI,QAAQ,EAAED,KAFd;IAGI,KAAK,EAAEC,KAHX;IAII,OAAO,EAAEX,OAJb;IAKI,WAAW,EAAEE,oBALjB;IAMI,WAAW,EAAEE;EANjB,EADH,CADL,CADJ;AAcH,CAtC2B,CAA5B;AAwCA,eAAeT,SAAf"}

package/build/module/ViewPager/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './ViewPagerWeb';\nexport type { default as ViewPagerProps } from './ViewPagerProps';"],"mappings":"AAAA,SAASA,OAAT,QAAwB,gBAAxB"}
+{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './ViewPagerWeb';\nexport type { default as ViewPagerProps, ViewPagerInstance } from './ViewPagerProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,gBAAxB"}

package/build/module/ViewPager/utils.js

@@ -1,36 +1,5 @@
-import React from 'react';
 import ChildrenMemoizedPage from './ChildrenMemoizedPage';
-export const defaultEnableVisibleHint = false;
-export const defaultEnableNeighborPageRerender = false;
+export const defaultInitialPage = 0;
 export const defaultLoading = 'lazy';
 export const defaultPageComponent = ChildrenMemoizedPage;
-export const usePageRenderer = _ref => {
-  let {
-    enableVisibleHint,
-    index: currentIndex,
-    loading,
-    pageComponent: PageComponent,
-    pageForceRerenderKey,
-    enableNeighborPageRerender
-  } = _ref;
-  const pagesStateRef = React.useRef([]);
-  pagesStateRef.current[currentIndex] = { ...pagesStateRef.current[currentIndex],
-    visited: true
-  };
-  return children => React.Children.map(children, (child, index) => {
-    var _pagesStateRef$curren;
-
-    const visited = ((_pagesStateRef$curren = pagesStateRef.current[index]) === null || _pagesStateRef$curren === void 0 ? void 0 : _pagesStateRef$curren.visited) ?? false;
-    const content = loading === 'eager' || visited ? child : null;
-    const isVisible = enableVisibleHint ? index === currentIndex : false;
-    const isNeighborIndex = index === currentIndex - 1 || index === currentIndex + 1;
-    return /*#__PURE__*/React.createElement(PageComponent, {
-      key: index,
-      children: content,
-      isNeighbor: enableNeighborPageRerender && isNeighborIndex,
-      isVisible: isVisible,
-      rerenderKey: pageForceRerenderKey
-    });
-  });
-};
 //# sourceMappingURL=utils.js.map

package/build/module/ViewPager/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ChildrenMemoizedPage","defaultEnableVisibleHint","defaultEnableNeighborPageRerender","defaultLoading","defaultPageComponent","usePageRenderer","enableVisibleHint","index","currentIndex","loading","pageComponent","PageComponent","pageForceRerenderKey","enableNeighborPageRerender","pagesStateRef","useRef","current","visited","children","Children","map","child","content","isVisible","isNeighborIndex"],"sources":["utils.tsx"],"sourcesContent":["import React from 'react';\nimport ViewPagerProps, { Loading, PageComponent } from './ViewPagerProps';\nimport ChildrenMemoizedPage from './ChildrenMemoizedPage';\n\nexport interface PageState {\n    visited?: boolean;\n}\n\nexport interface PageRenderOption {\n    enableVisibleHint: boolean;\n    enableNeighborPageRerender: boolean;\n    index: number;\n    loading: Loading;\n    pageComponent: PageComponent;\n    pageForceRerenderKey?: any;\n}\n\nexport interface PageRenderer {\n    (children: ViewPagerProps['children']): React.ReactNode;\n}\n\nexport const defaultEnableVisibleHint: boolean = false;\n\nexport const defaultEnableNeighborPageRerender: boolean = false;\n\nexport const defaultLoading: Loading = 'lazy';\n\nexport const defaultPageComponent: PageComponent = ChildrenMemoizedPage;\n\nexport const usePageRenderer = ({\n    enableVisibleHint,\n    index: currentIndex,\n    loading,\n    pageComponent: PageComponent,\n    pageForceRerenderKey,\n    enableNeighborPageRerender,\n}: PageRenderOption): PageRenderer => {\n    const pagesStateRef = React.useRef<Array<PageState>>([]);\n\n    pagesStateRef.current[currentIndex] = {\n        ...pagesStateRef.current[currentIndex],\n        visited: true,\n    };\n\n    return (children => React.Children.map(children, (child, index) => {\n        const visited = pagesStateRef.current[index]?.visited ?? false;\n        const content = (loading === 'eager' || visited) ? child : null;\n\n        const isVisible = enableVisibleHint ? (index === currentIndex) : false;\n        const isNeighborIndex = index === currentIndex - 1 || index === currentIndex + 1;\n\n        return (\n            <PageComponent\n                key={index}\n                children={content}\n                isNeighbor={enableNeighborPageRerender && isNeighborIndex}\n                isVisible={isVisible}\n                rerenderKey={pageForceRerenderKey}\n            />\n        );\n    }));\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,oBAAP,MAAiC,wBAAjC;AAmBA,OAAO,MAAMC,wBAAiC,GAAG,KAA1C;AAEP,OAAO,MAAMC,iCAA0C,GAAG,KAAnD;AAEP,OAAO,MAAMC,cAAuB,GAAG,MAAhC;AAEP,OAAO,MAAMC,oBAAmC,GAAGJ,oBAA5C;AAEP,OAAO,MAAMK,eAAe,GAAG,QAOO;EAAA,IAPN;IAC5BC,iBAD4B;IAE5BC,KAAK,EAAEC,YAFqB;IAG5BC,OAH4B;IAI5BC,aAAa,EAAEC,aAJa;IAK5BC,oBAL4B;IAM5BC;EAN4B,CAOM;EAClC,MAAMC,aAAa,GAAGf,KAAK,CAACgB,MAAN,CAA+B,EAA/B,CAAtB;EAEAD,aAAa,CAACE,OAAd,CAAsBR,YAAtB,IAAsC,EAClC,GAAGM,aAAa,CAACE,OAAd,CAAsBR,YAAtB,CAD+B;IAElCS,OAAO,EAAE;EAFyB,CAAtC;EAKA,OAAQC,QAAQ,IAAInB,KAAK,CAACoB,QAAN,CAAeC,GAAf,CAAmBF,QAAnB,EAA6B,CAACG,KAAD,EAAQd,KAAR,KAAkB;IAAA;;IAC/D,MAAMU,OAAO,GAAG,0BAAAH,aAAa,CAACE,OAAd,CAAsBT,KAAtB,iFAA8BU,OAA9B,KAAyC,KAAzD;IACA,MAAMK,OAAO,GAAIb,OAAO,KAAK,OAAZ,IAAuBQ,OAAxB,GAAmCI,KAAnC,GAA2C,IAA3D;IAEA,MAAME,SAAS,GAAGjB,iBAAiB,GAAIC,KAAK,KAAKC,YAAd,GAA8B,KAAjE;IACA,MAAMgB,eAAe,GAAGjB,KAAK,KAAKC,YAAY,GAAG,CAAzB,IAA8BD,KAAK,KAAKC,YAAY,GAAG,CAA/E;IAEA,oBACI,oBAAC,aAAD;MACI,GAAG,EAAED,KADT;MAEI,QAAQ,EAAEe,OAFd;MAGI,UAAU,EAAET,0BAA0B,IAAIW,eAH9C;MAII,SAAS,EAAED,SAJf;MAKI,WAAW,EAAEX;IALjB,EADJ;EASH,CAhBmB,CAApB;AAiBH,CAhCM"}
+{"version":3,"names":["ChildrenMemoizedPage","defaultInitialPage","defaultLoading","defaultPageComponent"],"sources":["utils.tsx"],"sourcesContent":["import React from 'react';\nimport { Loading, PageComponent } from './ViewPagerProps';\nimport ChildrenMemoizedPage from './ChildrenMemoizedPage';\n\nexport const defaultInitialPage: number = 0;\n\nexport const defaultLoading: Loading = 'lazy';\n\nexport const defaultPageComponent: PageComponent = ChildrenMemoizedPage;\n"],"mappings":"AAEA,OAAOA,oBAAP,MAAiC,wBAAjC;AAEA,OAAO,MAAMC,kBAA0B,GAAG,CAAnC;AAEP,OAAO,MAAMC,cAAuB,GAAG,MAAhC;AAEP,OAAO,MAAMC,oBAAmC,GAAGH,oBAA5C"}

package/build/typescript/ViewPager/ChildrenMemoizedPage.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import type { PageProps } from './ViewPagerProps';
-declare const _default: React.MemoExoticComponent<(props: PageProps) => JSX.Element>;
+declare function Page(props: PageProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Page>;
 export default _default;

package/build/typescript/ViewPager/ViewPagerNative.d.ts

@@ -1,2 +1,5 @@
+import React from 'react';
 import type ViewPagerProps from './ViewPagerProps';
-export default function ViewPager(props: ViewPagerProps): JSX.Element;
+import type { ViewPagerInstance } from './ViewPagerProps';
+declare const ViewPager: React.ForwardRefExoticComponent<Pick<ViewPagerProps, "style" | "children" | "onChange" | "keyboardDismissMode" | "scrollEnabled" | "loading" | "initialPage" | "pageComponent" | "pageForceRerenderKey"> & React.RefAttributes<ViewPagerInstance>>;
+export default ViewPager;

package/build/typescript/ViewPager/ViewPagerProps.d.ts

@@ -1,33 +1,34 @@
-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 declare type KeyboardDismissMode = 'none' | 'on-drag';
-export declare type PageProps = React.PropsWithChildren<ViewProps> & {
-    isNeighbor: boolean;
-    isVisible: boolean;
-    rerenderKey?: any;
+export declare type PageProps = PropsWithChildren<ViewProps> & {
+    index: number;
+    loading: ViewPagerProps['loading'];
+    sharedIndex: SharedValue<number>;
+    rerenderKey?: ViewPagerProps['pageForceRerenderKey'];
 };
-export declare type PageComponent = React.ComponentType<PageProps>;
+export declare type PageComponent = ComponentType<PageProps>;
 export declare type Loading = 'lazy' | 'eager';
-export default interface ViewPagerProps extends ComponentProps<{
-    /**
-     * Collection of ViewPager components.
-     */
-    children?: React.ReactNode;
+export interface ViewPagerInstance {
     /**
-     * If `true`, enable page visible hint.
-     * @default false
+     * Function to scroll to a specific page in the ViewPager. Invalid index is ignored.
+     * @param index
      */
-    enableVisibleHint?: boolean;
+    setPage: (index: number) => void;
+}
+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`).
      * @default 'lazy'

package/build/typescript/ViewPager/ViewPagerWeb.d.ts

@@ -1,2 +1,5 @@
+import React from 'react';
 import type ViewPagerProps from './ViewPagerProps';
-export default function ViewPager(props: ViewPagerProps): JSX.Element;
+import type { ViewPagerInstance } from './ViewPagerProps';
+declare const ViewPager: React.ForwardRefExoticComponent<Pick<ViewPagerProps, "style" | "children" | "onChange" | "keyboardDismissMode" | "scrollEnabled" | "loading" | "initialPage" | "pageComponent" | "pageForceRerenderKey"> & React.RefAttributes<ViewPagerInstance>>;
+export default ViewPager;

package/build/typescript/ViewPager/index.d.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/build/typescript/ViewPager/utils.d.ts

@@ -1,21 +1,4 @@
-import React from 'react';
-import ViewPagerProps, { Loading, PageComponent } from './ViewPagerProps';
-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 declare const defaultEnableVisibleHint: boolean;
-export declare const defaultEnableNeighborPageRerender: boolean;
+import { Loading, PageComponent } from './ViewPagerProps';
+export declare const defaultInitialPage: number;
 export declare const defaultLoading: Loading;
 export declare const defaultPageComponent: PageComponent;
-export declare const usePageRenderer: ({ enableVisibleHint, index: currentIndex, loading, pageComponent: PageComponent, pageForceRerenderKey, enableNeighborPageRerender, }: PageRenderOption) => PageRenderer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "2.0.0-beta.10",
+  "version": "2.0.0-beta.11",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -85,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0ac49f4ca5f910fc8b5edad2593300d796b2d914"
+  "gitHead": "80988af3fdfd671fcb655d4b36a017ce13baf29e"
 }

package/src/ViewPager/ChildrenMemoizedPage.tsx

@@ -1,36 +1,105 @@
-import React from 'react';
-import { View } from 'react-native';
+import React, { memo, useState } from 'react';
+import { Platform, View } from 'react-native';
+import { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
+import { StyleSheet } from '@fountain-ui/core';
 import type { PageProps } from './ViewPagerProps';
 
-const Page = function Page(props: PageProps) {
-    const { isVisible, ...otherProps } = props;
+const OFFSCREEN_RERENDER_LIMIT = 1;
+
+const styles = StyleSheet.create({
+    none: { display: 'none' },
+});
+
+interface PageState {
+    active: boolean;
+    visited: boolean;
+}
+
+function Page(props: PageProps) {
+    const {
+        index,
+        children,
+        loading,
+        sharedIndex,
+    } = props;
+
+    const assumeInitialPageState = (): PageState => {
+        const activeIndex = sharedIndex.value;
+
+        const active = index === activeIndex;
+
+        if (Platform.OS === 'web') {
+            return { active, visited: active };
+        }
+
+        if (loading === 'eager') {
+            return { active, visited: true };
+        }
+
+        const visited = index >= activeIndex - OFFSCREEN_RERENDER_LIMIT
+            && index <= activeIndex + OFFSCREEN_RERENDER_LIMIT;
+
+        return { active, visited };
+    };
+
+    const [pageState, setPageState] = useState<PageState>(assumeInitialPageState);
+
+    const content = pageState.visited ? children : null;
+
+    const updatePageState = (active: boolean, neighbor: boolean) => {
+        setPageState(prevState => {
+            if (prevState.active !== active) {
+                return { active, visited: active || prevState.visited };
+            }
+
+            if (neighbor && !prevState.visited) {
+                return { ...prevState, visited: true };
+            }
+
+            return prevState;
+        });
+    };
+
+    useAnimatedReaction(
+        () => {
+            const activeIndex = sharedIndex.value;
+
+            const willVisible = index >= activeIndex - OFFSCREEN_RERENDER_LIMIT
+                && index <= activeIndex + OFFSCREEN_RERENDER_LIMIT;
+
+            const willActive = index === activeIndex;
+            const willNeighbor = Platform.OS === 'web' ? false : (willVisible && !willActive);
+
+            return { willActive, willNeighbor };
+        },
+        (nextState, prevState) => {
+            const activeStateChanged = nextState.willActive !== prevState?.willActive;
+            const willNewNeighbor = nextState.willNeighbor && !prevState?.willNeighbor;
+
+            if (activeStateChanged || willNewNeighbor) {
+                runOnJS(updatePageState)(nextState.willActive, nextState.willNeighbor);
+            }
+        },
+        [index],
+    );
+
+    const style = Platform.OS === 'web'
+        ? (pageState.active ? StyleSheet.absoluteFill : styles.none)
+        : undefined;
 
     return (
         <View
+            children={content}
             collapsable={false}
-            {...otherProps}
+            style={style}
         />
     );
-};
-
-export default React.memo(Page, (prevProps, nextProps) => {
-    if (prevProps.children === null && nextProps.children === null) {
-        return true;
-    }
-
-    // isVisible is an important condition for determining memos on the web.
-    // Reference ViewPagerWeb's return.
-    if (prevProps.isVisible !== nextProps.isVisible) {
-        return false;
-    }
-
-    if (nextProps.isVisible || nextProps.isNeighbor) {
-        return false;
-    }
+}
 
+export default memo(Page, (prevProps, nextProps) => {
     if (prevProps.rerenderKey !== nextProps.rerenderKey) {
         return false;
     }
 
-    return prevProps.children !== null && nextProps.children !== null;
+    return prevProps.index !== nextProps.index;
 });