From a7f678cc65b0563c9ab03071d52f30a46eb6d90b Mon Sep 17 00:00:00 2001
From: gronxb <gron1gh1@gmail.com>
Date: Mon, 11 Dec 2023 16:26:16 +0900
Subject: [PATCH 1/8] feat: add PagerViewContext and usePagerView hook

---
 src/PagerView.tsx               | 48 ++++++++++++++++++++++++---------
 src/PagerViewNativeComponent.ts |  4 +++
 src/index.tsx                   |  1 +
 src/usePagerView.tsx            | 41 ++++++++++++++++++++++++++++
 4 files changed, 81 insertions(+), 13 deletions(-)
 create mode 100644 src/usePagerView.tsx

diff --git a/src/PagerView.tsx b/src/PagerView.tsx
index 9122b992..05162400 100644
--- a/src/PagerView.tsx
+++ b/src/PagerView.tsx
@@ -5,6 +5,7 @@ import type {
   OnPageScrollEventData,
   OnPageScrollStateChangedEventData,
   OnPageSelectedEventData,
+  PagerViewState,
 } from './PagerViewNativeComponent';
 import type * as ReactNative from 'react-native';
 
@@ -13,6 +14,7 @@ import { childrenWithOverriddenStyle } from './utils';
 import PagerViewView, {
   Commands as PagerViewCommands,
 } from './PagerViewNativeComponent';
+import { PagerViewContext } from './usePagerView';
 
 /**
  * Container that allows to flip left and right between child views. Each
@@ -56,10 +58,15 @@ import PagerViewView, {
  * ```
  */
 
-export class PagerView extends React.Component<PagerViewProps> {
+export class PagerView extends React.Component<PagerViewProps, PagerViewState> {
   private isScrolling = false;
   pagerView: React.ElementRef<typeof PagerViewView> | null = null;
 
+  constructor(props: PagerViewProps) {
+    super(props);
+    this.state = { page: props.initialPage ?? 0 };
+  }
+
   private _onPageScroll = (
     e: ReactNative.NativeSyntheticEvent<OnPageScrollEventData>
   ) => {
@@ -90,6 +97,7 @@ export class PagerView extends React.Component<PagerViewProps> {
     if (this.props.onPageSelected) {
       this.props.onPageSelected(e);
     }
+    this.setState({ page: e.nativeEvent.position });
   };
 
   /**
@@ -144,19 +152,33 @@ export class PagerView extends React.Component<PagerViewProps> {
 
   render() {
     return (
-      <PagerViewView
-        {...this.props}
-        ref={(ref) => {
-          this.pagerView = ref;
+      <PagerViewContext.Provider
+        value={{
+          hasNextPage:
+            this.state.page < React.Children.count(this.props.children) - 1,
+          hasPreviousPage: this.state.page > 0,
+          page: this.state.page,
+          setPage: this.setPage,
+          setPageWithoutAnimation: this.setPageWithoutAnimation,
+          setScrollEnabled: this.setScrollEnabled,
         }}
-        style={this.props.style}
-        layoutDirection={this.deducedLayoutDirection}
-        onPageScroll={this._onPageScroll}
-        onPageScrollStateChanged={this._onPageScrollStateChanged}
-        onPageSelected={this._onPageSelected}
-        onMoveShouldSetResponderCapture={this._onMoveShouldSetResponderCapture}
-        children={childrenWithOverriddenStyle(this.props.children)}
-      />
+      >
+        <PagerViewView
+          {...this.props}
+          ref={(ref) => {
+            this.pagerView = ref;
+          }}
+          style={this.props.style}
+          layoutDirection={this.deducedLayoutDirection}
+          onPageScroll={this._onPageScroll}
+          onPageScrollStateChanged={this._onPageScrollStateChanged}
+          onPageSelected={this._onPageSelected}
+          onMoveShouldSetResponderCapture={
+            this._onMoveShouldSetResponderCapture
+          }
+          children={childrenWithOverriddenStyle(this.props.children)}
+        />
+      </PagerViewContext.Provider>
     );
   }
 }
diff --git a/src/PagerViewNativeComponent.ts b/src/PagerViewNativeComponent.ts
index f102aa96..276879ab 100644
--- a/src/PagerViewNativeComponent.ts
+++ b/src/PagerViewNativeComponent.ts
@@ -39,6 +39,10 @@ export interface NativeProps extends ViewProps {
 
 type PagerViewViewType = HostComponent<NativeProps>;
 
+export interface PagerViewState {
+  page: number;
+}
+
 export interface NativeCommands {
   setPage: (
     viewRef: React.ElementRef<PagerViewViewType>,
diff --git a/src/index.tsx b/src/index.tsx
index 1e7cbe3d..56f5982e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,6 +1,7 @@
 import type * as ReactNative from 'react-native';
 import { PagerView } from './PagerView';
 export default PagerView;
+export { usePagerView, type PagerViewMethod } from './usePagerView';
 
 import type {
   OnPageScrollEventData as PagerViewOnPageScrollEventData,
diff --git a/src/usePagerView.tsx b/src/usePagerView.tsx
new file mode 100644
index 00000000..0c2d4470
--- /dev/null
+++ b/src/usePagerView.tsx
@@ -0,0 +1,41 @@
+import React, { useContext } from 'react';
+
+export type PagerViewMethod = {
+  page: number;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  setPage: (selectedPage: number) => void;
+  setPageWithoutAnimation: (selectedPage: number) => void;
+  setScrollEnabled: (scrollEnabled: boolean) => void;
+};
+
+export const PagerViewContext = React.createContext<PagerViewMethod>({
+  page: 0,
+  hasNextPage: false,
+  hasPreviousPage: false,
+  setPage: () => {
+    throw new Error('setPage must be used within a <PagerView /> component');
+  },
+  setPageWithoutAnimation: () => {
+    throw new Error(
+      'setPageWithoutAnimation must be used within a <PagerView /> component'
+    );
+  },
+  setScrollEnabled: () => {
+    throw new Error(
+      'setScrollEnabled must be used within a <PagerView /> component'
+    );
+  },
+});
+
+export const usePagerView = () => {
+  const value = useContext(PagerViewContext);
+
+  if (!value) {
+    throw new Error(
+      'usePagerView must be used within a <PagerView /> component'
+    );
+  }
+
+  return value;
+};

From 120d9b52ce23ceef393afb007ce0285f0b0043c3 Mon Sep 17 00:00:00 2001
From: gronxb <gron1gh1@gmail.com>
Date: Mon, 11 Dec 2023 16:27:28 +0900
Subject: [PATCH 2/8] feat: usePagerView example

---
 example/src/App.tsx                 |  2 +
 example/src/UsePagerViewExample.tsx | 91 +++++++++++++++++++++++++++++
 2 files changed, 93 insertions(+)
 create mode 100644 example/src/UsePagerViewExample.tsx

diff --git a/example/src/App.tsx b/example/src/App.tsx
index eca97d7c..c5418fb1 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -34,6 +34,7 @@ import ReanimatedOnPageScrollExample from './ReanimatedOnPageScrollExample';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { UsePagerViewExample } from './UsePagerViewExample';
 
 const examples = [
   { component: BasicPagerViewExample, name: 'Basic Example' },
@@ -64,6 +65,7 @@ const examples = [
     name: 'Reanimated onPageScroll example',
   },
   { component: CoverflowExample, name: 'CoverflowExample' },
+  { component: UsePagerViewExample, name: 'UsePagerViewExample' },
 ];
 
 function App() {
diff --git a/example/src/UsePagerViewExample.tsx b/example/src/UsePagerViewExample.tsx
new file mode 100644
index 00000000..58a378ee
--- /dev/null
+++ b/example/src/UsePagerViewExample.tsx
@@ -0,0 +1,91 @@
+import PagerView, { usePagerView } from 'react-native-pager-view';
+import React from 'react';
+import { useState } from 'react';
+import { View, StyleSheet, Button } from 'react-native';
+import { PAGES, createPage } from './utils';
+import { Text } from 'react-native';
+
+const Item = () => {
+  const {
+    page,
+    hasNextPage,
+    hasPreviousPage,
+    setPage,
+    setPageWithoutAnimation,
+    setScrollEnabled,
+  } = usePagerView();
+
+  return (
+    <View style={styles.content}>
+      <Text>Current Page: {page}</Text>
+      <Text>hasNextPage: {String(hasNextPage)}</Text>
+      <Text>hasPreviousPage: {String(hasPreviousPage)}</Text>
+      <Button
+        title="next page"
+        onPress={() => {
+          if (hasNextPage) {
+            setPage(page + 1);
+          }
+        }}
+      />
+      <Button
+        title="prev page"
+        onPress={() => {
+          if (hasPreviousPage) {
+            setPage(page - 1);
+          }
+        }}
+      />
+
+      <Button
+        title="next page without animation"
+        onPress={() => {
+          setPageWithoutAnimation(page + 1);
+        }}
+      />
+
+      <Button
+        title="setScrollEnabled to true"
+        onPress={() => {
+          setScrollEnabled(true);
+        }}
+      />
+
+      <Button
+        title="setScrollEnabled to false"
+        onPress={() => {
+          setScrollEnabled(false);
+        }}
+      />
+    </View>
+  );
+};
+
+export const UsePagerViewExample = (): JSX.Element => {
+  const [pages] = useState(
+    Array(PAGES)
+      .fill(1)
+      .map((_, index) => createPage(index))
+  );
+
+  return (
+    <PagerView testID="pager-view" style={styles.flex}>
+      {pages.map((page) => (
+        <Item key={page.key} />
+      ))}
+    </PagerView>
+  );
+};
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+  content: {
+    flex: 1,
+    marginVertical: 10,
+  },
+  separator: {
+    margin: 16,
+  },
+});

From d255bb4bb49f470cde40e16274f00ad616e0c3cf Mon Sep 17 00:00:00 2001
From: gronxb <gron1gh1@gmail.com>
Date: Mon, 11 Dec 2023 16:39:09 +0900
Subject: [PATCH 3/8] refactor: error when calling outside of pager view

---
 src/usePagerView.tsx | 21 +++------------------
 1 file changed, 3 insertions(+), 18 deletions(-)

diff --git a/src/usePagerView.tsx b/src/usePagerView.tsx
index 0c2d4470..a44b97f3 100644
--- a/src/usePagerView.tsx
+++ b/src/usePagerView.tsx
@@ -9,24 +9,9 @@ export type PagerViewMethod = {
   setScrollEnabled: (scrollEnabled: boolean) => void;
 };
 
-export const PagerViewContext = React.createContext<PagerViewMethod>({
-  page: 0,
-  hasNextPage: false,
-  hasPreviousPage: false,
-  setPage: () => {
-    throw new Error('setPage must be used within a <PagerView /> component');
-  },
-  setPageWithoutAnimation: () => {
-    throw new Error(
-      'setPageWithoutAnimation must be used within a <PagerView /> component'
-    );
-  },
-  setScrollEnabled: () => {
-    throw new Error(
-      'setScrollEnabled must be used within a <PagerView /> component'
-    );
-  },
-});
+export const PagerViewContext = React.createContext<PagerViewMethod | null>(
+  null
+);
 
 export const usePagerView = () => {
   const value = useContext(PagerViewContext);

From 95f2d1d60d8f2253ccff649fbf75983e358f0de3 Mon Sep 17 00:00:00 2001
From: gronxb <gron1gh1@gmail.com>
Date: Wed, 20 Dec 2023 00:34:33 +0900
Subject: [PATCH 4/8] refactor:  optimized rendering using useSyncExternalStore

---
 src/PagerView.tsx    | 17 ++++++-----
 src/index.tsx        |  3 +-
 src/usePager.tsx     | 71 ++++++++++++++++++++++++++++++++++++++++++++
 src/usePagerView.tsx | 26 ----------------
 4 files changed, 83 insertions(+), 34 deletions(-)
 create mode 100644 src/usePager.tsx
 delete mode 100644 src/usePagerView.tsx

diff --git a/src/PagerView.tsx b/src/PagerView.tsx
index 05162400..9520f5bc 100644
--- a/src/PagerView.tsx
+++ b/src/PagerView.tsx
@@ -14,7 +14,7 @@ import { childrenWithOverriddenStyle } from './utils';
 import PagerViewView, {
   Commands as PagerViewCommands,
 } from './PagerViewNativeComponent';
-import { PagerViewContext } from './usePagerView';
+import { PagerStore, PagerViewContext, createPagerStore } from './usePager';
 
 /**
  * Container that allows to flip left and right between child views. Each
@@ -61,10 +61,11 @@ import { PagerViewContext } from './usePagerView';
 export class PagerView extends React.Component<PagerViewProps, PagerViewState> {
   private isScrolling = false;
   pagerView: React.ElementRef<typeof PagerViewView> | null = null;
+  store: PagerStore | null = null;
 
   constructor(props: PagerViewProps) {
     super(props);
-    this.state = { page: props.initialPage ?? 0 };
+    this.store = createPagerStore(props.initialPage ?? 0);
   }
 
   private _onPageScroll = (
@@ -97,7 +98,12 @@ export class PagerView extends React.Component<PagerViewProps, PagerViewState> {
     if (this.props.onPageSelected) {
       this.props.onPageSelected(e);
     }
-    this.setState({ page: e.nativeEvent.position });
+    this.store?.setState({
+      page: e.nativeEvent.position,
+      hasNextPage:
+        e.nativeEvent.position < React.Children.count(this.props.children) - 1,
+      hasPreviousPage: e.nativeEvent.position > 0,
+    });
   };
 
   /**
@@ -154,10 +160,7 @@ export class PagerView extends React.Component<PagerViewProps, PagerViewState> {
     return (
       <PagerViewContext.Provider
         value={{
-          hasNextPage:
-            this.state.page < React.Children.count(this.props.children) - 1,
-          hasPreviousPage: this.state.page > 0,
-          page: this.state.page,
+          store: this.store,
           setPage: this.setPage,
           setPageWithoutAnimation: this.setPageWithoutAnimation,
           setScrollEnabled: this.setScrollEnabled,
diff --git a/src/index.tsx b/src/index.tsx
index 56f5982e..7130c2f3 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,8 @@
 import type * as ReactNative from 'react-native';
 import { PagerView } from './PagerView';
 export default PagerView;
-export { usePagerView, type PagerViewMethod } from './usePagerView';
+export { usePager } from './usePager';
+export type { PagerState } from './usePager';
 
 import type {
   OnPageScrollEventData as PagerViewOnPageScrollEventData,
diff --git a/src/usePager.tsx b/src/usePager.tsx
new file mode 100644
index 00000000..1ce823db
--- /dev/null
+++ b/src/usePager.tsx
@@ -0,0 +1,71 @@
+import React, { useContext, useSyncExternalStore } from 'react';
+
+export type PagerViewContextValue = {
+  store: PagerStore | null;
+  setPage: (selectedPage: number) => void;
+  setPageWithoutAnimation: (selectedPage: number) => void;
+  setScrollEnabled: (scrollEnabled: boolean) => void;
+};
+
+export type PagerState = {
+  page: number;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+};
+
+export type PagerStore = {
+  getState: () => PagerState;
+  setState: (state: PagerState) => void;
+  subscribe: (listener: () => void) => () => void;
+};
+
+export const PagerViewContext =
+  React.createContext<PagerViewContextValue | null>(null);
+
+export const createPagerStore = (initialPage: number) => {
+  let state: PagerState = {
+    page: initialPage,
+    hasNextPage: false,
+    hasPreviousPage: false,
+  };
+
+  const getState = () => {
+    return state;
+  };
+
+  const listeners = new Set<() => void>();
+
+  const emitChange = () => {
+    for (const listener of listeners) {
+      listener();
+    }
+  };
+
+  const setState = (newState: PagerState) => {
+    state = newState;
+    emitChange();
+  };
+
+  const subscribe = (listener: () => void) => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  };
+
+  return { getState, setState, subscribe };
+};
+
+export const usePager = () => {
+  if (Number(React.version.split('.')[0]) < 18) {
+    throw new Error('usePager requires React 18 or later.');
+  }
+  const value = useContext(PagerViewContext);
+
+  if (!value || !value.store) {
+    throw new Error('usePager must be used within a <PagerView /> component');
+  }
+
+  const { store, ...methods } = value;
+
+  const state = useSyncExternalStore(store.subscribe, store.getState);
+  return { ...methods, ...state };
+};
diff --git a/src/usePagerView.tsx b/src/usePagerView.tsx
deleted file mode 100644
index a44b97f3..00000000
--- a/src/usePagerView.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, { useContext } from 'react';
-
-export type PagerViewMethod = {
-  page: number;
-  hasNextPage: boolean;
-  hasPreviousPage: boolean;
-  setPage: (selectedPage: number) => void;
-  setPageWithoutAnimation: (selectedPage: number) => void;
-  setScrollEnabled: (scrollEnabled: boolean) => void;
-};
-
-export const PagerViewContext = React.createContext<PagerViewMethod | null>(
-  null
-);
-
-export const usePagerView = () => {
-  const value = useContext(PagerViewContext);
-
-  if (!value) {
-    throw new Error(
-      'usePagerView must be used within a <PagerView /> component'
-    );
-  }
-
-  return value;
-};

From e28a6dbb0eb7fd15a2d3fa1c27caa9b27241e521 Mon Sep 17 00:00:00 2001
From: gronxb <gron1gh1@gmail.com>
Date: Wed, 20 Dec 2023 00:34:51 +0900
Subject: [PATCH 5/8] refactor: example render test

---
 example/src/UsePagerViewExample.tsx | 33 +++++++++++++++++------------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/example/src/UsePagerViewExample.tsx b/example/src/UsePagerViewExample.tsx
index 58a378ee..090d4cae 100644
--- a/example/src/UsePagerViewExample.tsx
+++ b/example/src/UsePagerViewExample.tsx
@@ -1,11 +1,19 @@
-import PagerView, { usePagerView } from 'react-native-pager-view';
+import PagerView, { usePager } from 'react-native-pager-view';
 import React from 'react';
-import { useState } from 'react';
 import { View, StyleSheet, Button } from 'react-native';
-import { PAGES, createPage } from './utils';
 import { Text } from 'react-native';
 
-const Item = () => {
+const NonHookComponent = () => {
+  console.log('rerender <NonHookComponent />');
+
+  return (
+    <View style={styles.content}>
+      <Text>HasNotHook</Text>
+    </View>
+  );
+};
+
+const HookComponent = ({ index }: { index: number }) => {
   const {
     page,
     hasNextPage,
@@ -13,7 +21,9 @@ const Item = () => {
     setPage,
     setPageWithoutAnimation,
     setScrollEnabled,
-  } = usePagerView();
+  } = usePager();
+
+  console.log(`rerender <HookComponent index={${index}} />`);
 
   return (
     <View style={styles.content}>
@@ -62,17 +72,12 @@ const Item = () => {
 };
 
 export const UsePagerViewExample = (): JSX.Element => {
-  const [pages] = useState(
-    Array(PAGES)
-      .fill(1)
-      .map((_, index) => createPage(index))
-  );
-
   return (
     <PagerView testID="pager-view" style={styles.flex}>
-      {pages.map((page) => (
-        <Item key={page.key} />
-      ))}
+      <HookComponent index={1} />
+      <HookComponent index={2} />
+      <HookComponent index={3} />
+      <NonHookComponent />
     </PagerView>
   );
 };

From 82c7a393f906558b77243c5c990b5fa8804d8727 Mon Sep 17 00:00:00 2001
From: gronxb <gron1gh1@gmail.com>
Date: Wed, 20 Dec 2023 00:39:57 +0900
Subject: [PATCH 6/8] refactor: rename example file

---
 example/src/App.tsx                                          | 4 ++--
 example/src/{UsePagerViewExample.tsx => UsePagerExample.tsx} | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename example/src/{UsePagerViewExample.tsx => UsePagerExample.tsx} (97%)

diff --git a/example/src/App.tsx b/example/src/App.tsx
index c5418fb1..37291afd 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -34,7 +34,7 @@ import ReanimatedOnPageScrollExample from './ReanimatedOnPageScrollExample';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { UsePagerViewExample } from './UsePagerViewExample';
+import { UsePagerExample } from './UsePagerExample';
 
 const examples = [
   { component: BasicPagerViewExample, name: 'Basic Example' },
@@ -65,7 +65,7 @@ const examples = [
     name: 'Reanimated onPageScroll example',
   },
   { component: CoverflowExample, name: 'CoverflowExample' },
-  { component: UsePagerViewExample, name: 'UsePagerViewExample' },
+  { component: UsePagerExample, name: 'UsePagerExample' },
 ];
 
 function App() {
diff --git a/example/src/UsePagerViewExample.tsx b/example/src/UsePagerExample.tsx
similarity index 97%
rename from example/src/UsePagerViewExample.tsx
rename to example/src/UsePagerExample.tsx
index 090d4cae..bdef00d0 100644
--- a/example/src/UsePagerViewExample.tsx
+++ b/example/src/UsePagerExample.tsx
@@ -71,7 +71,7 @@ const HookComponent = ({ index }: { index: number }) => {
   );
 };
 
-export const UsePagerViewExample = (): JSX.Element => {
+export const UsePagerExample = (): JSX.Element => {
   return (
     <PagerView testID="pager-view" style={styles.flex}>
       <HookComponent index={1} />

From c1c4446252cf0343657c07c5522aa8ae4668dcc8 Mon Sep 17 00:00:00 2001
From: gronxb <gron1gh1@gmail.com>
Date: Wed, 20 Dec 2023 00:52:08 +0900
Subject: [PATCH 7/8] docs: usePager Hook Usage section

---
 README.md | 42 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/README.md b/README.md
index f608dd4f..4aac1ac7 100644
--- a/README.md
+++ b/README.md
@@ -229,6 +229,48 @@ const pageScrollHandler = usePageScrollHandler({
 <AnimatedPagerView onPageScroll={pageScrollHandler} />;
 ```
 
+## usePager Hook Usage
+The `usePager` hook is a convenient way to manage the state and control the behavior of the `<PagerView />` component. It provides functions and variables to interact with the pager, such as navigating between pages and enabling/disabling scrolling.
+
+**Warning:** The usePager hook is compatible with React version 18 and above. Ensure that your project is using an appropriate version of React before implementing this hook.
+
+Below is an example of how to use the usePager hook:
+
+```jsx
+// 1. Create a component that utilizes the hook within the <PagerView /> component..
+<PagerView >
+  <HookComponent />
+</PagerView>
+
+// 2. Inside HookComponent, use the `usePager` hook.
+const HookComponent = () => {
+  const {
+    page,
+    hasNextPage,
+    hasPreviousPage,
+    setPage,
+    setPageWithoutAnimation,
+    setScrollEnabled,
+  } = usePager();
+
+  return (
+    <View>
+      <Text>Current Page: {page}</Text>
+      <Button
+        title="next page"
+        onPress={() => {
+          if (hasNextPage) {
+            setPage(page + 1);
+          }
+        }}
+      />
+    </View>
+  )
+}
+
+```
+
+
 ## License
 
 MIT

From ed5a39b3367172182b6cba68c70c8d71b85c044a Mon Sep 17 00:00:00 2001
From: gronxb <gron1gh1@gmail.com>
Date: Fri, 12 Jan 2024 17:50:43 +0900
Subject: [PATCH 8/8] refactor: unused PagerViewStare and rename filename

---
 src/PagerView.tsx                 | 3 +--
 src/PagerViewNativeComponent.ts   | 4 ----
 src/{usePager.tsx => usePager.ts} | 0
 3 files changed, 1 insertion(+), 6 deletions(-)
 rename src/{usePager.tsx => usePager.ts} (100%)

diff --git a/src/PagerView.tsx b/src/PagerView.tsx
index 9520f5bc..01156e52 100644
--- a/src/PagerView.tsx
+++ b/src/PagerView.tsx
@@ -5,7 +5,6 @@ import type {
   OnPageScrollEventData,
   OnPageScrollStateChangedEventData,
   OnPageSelectedEventData,
-  PagerViewState,
 } from './PagerViewNativeComponent';
 import type * as ReactNative from 'react-native';
 
@@ -58,7 +57,7 @@ import { PagerStore, PagerViewContext, createPagerStore } from './usePager';
  * ```
  */
 
-export class PagerView extends React.Component<PagerViewProps, PagerViewState> {
+export class PagerView extends React.Component<PagerViewProps> {
   private isScrolling = false;
   pagerView: React.ElementRef<typeof PagerViewView> | null = null;
   store: PagerStore | null = null;
diff --git a/src/PagerViewNativeComponent.ts b/src/PagerViewNativeComponent.ts
index 276879ab..f102aa96 100644
--- a/src/PagerViewNativeComponent.ts
+++ b/src/PagerViewNativeComponent.ts
@@ -39,10 +39,6 @@ export interface NativeProps extends ViewProps {
 
 type PagerViewViewType = HostComponent<NativeProps>;
 
-export interface PagerViewState {
-  page: number;
-}
-
 export interface NativeCommands {
   setPage: (
     viewRef: React.ElementRef<PagerViewViewType>,
diff --git a/src/usePager.tsx b/src/usePager.ts
similarity index 100%
rename from src/usePager.tsx
rename to src/usePager.ts