react-native-tab-view, Unable to scroll to the top

[caice7]

Current behavior

import React, { useRef } from 'react';
import { Text, ScrollView, TouchableOpacity } from 'react-native';
import { TabView, TabBar } from 'react-native-tab-view';

export default function AssetExample() {
  const scrollRef = useRef(null);
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'first', title: 'First' },
    { key: 'second', title: 'Second' },
    { key: 'third', title: 'Third' },
  ]);

  /** 滚动页面 */
  const onPageScroll = (e) => {
    const scrollTop = e.nativeEvent.contentOffset.y;
    console.log(scrollTop)
  };

  const renderScene = ({ route }) => {
    return <ScrollView ref={scrollRef}
      onScroll={onPageScroll}>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <Text>{route.title}</Text>
      <TouchableOpacity onPress={() => {
        console.log(scrollRef.current)
        scrollRef.current?.scrollTo({ x: 0, y: 0, animated: true })
      }}>
        <Text>{route.title}</Text>
      </TouchableOpacity>
    </ScrollView>;
  };

  const renderTabBar = (props) => {
    return <TabBar {...props} />;
  };

  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      renderTabBar={renderTabBar}
      onIndexChange={setIndex}
    />
  );
}

QQ.20240422102859.mp4

Expected behavior

When I click the button, it should scroll to the top.

Reproduction

https://snack.expo.dev/@caice/bugs?platform=android

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack
• react-native-tab-view

Environment

• [] I've removed the packages that I don't use

package	version
@react-navigation/native	6.1.12
@react-navigation/bottom-tabs	6.5.14
@react-navigation/native-stack	6.9.20
react-native-safe-area-context	4.9.0
react-native-screens	3.29.0
react-native-gesture-handler	2.15.0
react-native-reanimated	3.7.2
react-native-tab-view	3.5.2
react-native-pager-view	6.2.3
react-native	0.73.4
node	18.14.2
npm or yarn	yarn

[github-actions]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/native (found: 6.1.12, latest: 6.1.17)
• @react-navigation/bottom-tabs (found: 6.5.14, latest: 6.5.20)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?