search

react-navigation / react-navigation

Routing and navigation for your React Native apps
https://reactnavigation.org
23.3k stars 4.97k forks source link

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

Open caice7 opened 3 weeks ago

caice7 commented 3 weeks ago

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}
    />
  );
}

https://github.com/react-navigation/react-navigation/assets/31927047/7f99ff48-da4d-4c6b-bf4a-db162ee357bd

Expected behavior

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

Reproduction

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

Platform

Packages

Environment

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[bot] commented 3 weeks ago

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

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