Does not scroll to latest content

[jeet-mehta]

Current behavior

I have a tab in my home screen. There are total two tabs. One is Home screen and second is Settings screen. In my home screen I have to fire a api to get data. Now when I add pagination in that tab ( i.e. HomeScreen ) I get the data and the content is also reflected in the flatlist. But the issue is that the flatlist is automatically scrolled to the top.

const onEndReachedPeople = () => {
        api.search(requestObject)
            .then(res => {
                if (res.code === 200) {
                    setPeopleData([...peopleData, ...res.data.user])
                }
            })
    }

const renderPeopleTab = ({ item }: any) => {
                return (
            <View style={{ marginVertical: 10 }}>
                <PeopleTile
                    userInfo={item}
                    location={item.location}
                    title={item.userName}
                    profileURL={item.profilePic}
                    isFollowing={item.following}
                    onPressFollow={onPressFollow}
                    onPressUnfollow={onPressUnFollow}
                    onPressTile={onPressTile}
                />
            </View>
        )
    }

 const Tab = () => {
        return (
            <FlatList
                data={peopleData}
                renderItem={renderPeopleTab}
                style={ {
        flex: 1,
    }}
                contentContainerStyle={{
        flexGrow: 1,
        paddingHorizontal: smartScale(15),
        paddingBottom: smartScale(100)
    }}
                onEndReached={onEndReachedPeople}
                onEndReachedThreshold={0.5}
            />
        )
    }

const renderScene = ({ route }: { route: { key: string } }) => {
        switch (route.key) {
            case 'people':
                return <Tab />
            case 'groups':
                return <ComingSoon />
            default:
                return null
        }
    }

return (
           <TabView
                    swipeEnabled={true}
                    navigationState={{ index, routes }}
                    renderScene={renderScene}
                    onIndexChange={setIndex}
                    initialLayout={{ width: WINDOW.width }}
            />
)

Expected behavior

Here the flatlist should not scroll to top and maintain the scroll position.

Reproduction

na

Platform

• [ ] Android
• [ ] iOS
• [ ] Web
• [ ] Windows
• [ ] MacOS

Environment

package	version
react-native-tab-view	^3.1.1
react-native-pager-view	^5.4.7
react-native	0.66.1

[github-actions[bot]]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[github-actions[bot]]

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

• react-native-pager-view (found: 5.4.7, latest: 5.4.24)
• react-native (found: 0.66.1, latest: 0.68.2)

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

[jiyuan12354]

I think you just encounter the render issue, Though I am using version 2.16, I still want to suggest you to use SceneMap to wrapper you routes ...

import {
  TabView
  SceneMap,
  ...
} from 'react-native-tab-view';
...
const renderScene = SceneMap([your sceneMap);
...

  return (
    <TabView
      ...
      renderScene={renderScene}
      ...
    />
  );

Each value of your sceneMap should be a named function component or class component， DONOT use anonymous function

[Barragan17]

I've used scenemap and it is still not working, after the api call it still scroll up top, not to it's last position

[OPEN-9]

I also encountered this problem with flatList

[github-actions[bot]]

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.