From 365a23e939e32e3b322c6260b1149b09270efcef Mon Sep 17 00:00:00 2001
From: hublot <hublot@aliyun.com>
Date: Fri, 14 Jun 2024 01:29:11 +0800
Subject: [PATCH] feat: auto scroll to the center

---
 package.json           | 2 +-
 src/PageHeaderView.tsx | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 2874174..84ab4c3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-tab-page-view",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "React Native Tab Page View",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
diff --git a/src/PageHeaderView.tsx b/src/PageHeaderView.tsx
index 123e170..6aa0b80 100644
--- a/src/PageHeaderView.tsx
+++ b/src/PageHeaderView.tsx
@@ -79,6 +79,7 @@ export default class PageHeaderView extends Component<PageHeaderViewProps> {
   });
   private scrollView: RefObject<ScrollView> = React.createRef();
   private cursor: RefObject<PageHeaderCursor> = React.createRef();
+  private scrollViewWidth = 0;
 
   static defaultProps: PageHeaderViewProps = {
     data: [],
@@ -127,7 +128,7 @@ export default class PageHeaderView extends Component<PageHeaderViewProps> {
         const itemLayout = this?.cursor?.current?.state
           ?.itemContainerLayoutList?.[newPageIndex] ?? { x: 0, width: 0 };
         this?.scrollView?.current?.scrollTo({
-          x: itemLayout.x - itemLayout.width,
+          x: itemLayout.x + itemLayout.width / 2.0 - this.scrollViewWidth / 2.0,
         });
         this.scrollPageIndex = newPageIndex;
       }
@@ -275,6 +276,10 @@ export default class PageHeaderView extends Component<PageHeaderViewProps> {
             );
             this?.props?.onContentSizeChange?.(width, height);
           }}
+          onLayout={(event) => {
+            this.scrollViewWidth = event.nativeEvent.layout.width;
+            this?.props?.onLayout?.(event);
+          }}
           style={this.props.containerStyle}
           {...restProps}
           contentContainerStyle={[