fix(js): Fix position and offset calculations & adding a new page for usePagerView hook (#930)

Author: MrRefactor

example/src/PagerHookExample.tsx

@@ -11,20 +11,12 @@ export function PagerHookExample() {
   return (
     <SafeAreaView style={styles.container}>
       <AnimatedPagerView
-        // @ts-ignore
         testID="pager-view"
         ref={ref}
         style={styles.PagerView}
         initialPage={0}
-        layoutDirection="ltr"
-        overdrag={rest.overdragEnabled}
-        scrollEnabled={rest.scrollEnabled}
-        onPageScroll={rest.onPageScroll}
-        onPageSelected={rest.onPageSelected}
-        onPageScrollStateChanged={rest.onPageScrollStateChanged}
+        {...rest}
         pageMargin={10}
-        // Lib does not support dynamically orientation change
-        orientation="horizontal"
       >
         {useMemo(
           () =>
@@ -49,7 +41,6 @@ export function PagerHookExample() {
           [rest.pages]
         )}
       </AnimatedPagerView>
-      {/*@ts-ignore*/}
       <NavigationPanel {...rest} />
     </SafeAreaView>
   );

src/usePagerView.ts

@@ -48,11 +48,7 @@ export function usePagerView(
 
   const addPage = useCallback(() => {
     setPages((prevPages) => {
-      const lastPageNumber = prevPages[prevPages.length - 1];
-      if (lastPageNumber) {
-        return [...prevPages, lastPageNumber + 1];
-      }
-      return prevPages;
+      return [...prevPages, prevPages.length];
     });
   }, []);
 
@@ -92,6 +88,12 @@ export function usePagerView(
           },
         ],
         {
+          listener: ({ nativeEvent: { offset, position } }) => {
+            setProgress({
+              position,
+              offset,
+            });
+          },
           useNativeDriver: true,
         }
       ),