scrollToLocation always scrolling to top in sectionList in react native

Question

I am using a simple function to scroll to index in section list in react native;

let sectionIndex = route.params.index;

sectionListRef?.current?.scrollToLocation({
        sectionIndex,
        itemIndex: 0,
});

where sectionIndex in coming from route params. Though I though that may be causing the problem, but i created a button to scroll to a particular index and even gave a number as the index instead of using the one coming from route params. But it doesn't work, it is just ignoring the sectionIndex and always scrolling to top (if not at the top).

There is no more relevant code but anyways, here is my sectionList:

<SectionList
        ref={sectionListRef}
        refreshing={isFetching}
        onRefresh={refetch}
        sections={boards ?? []}
        renderItem={renderItem}
        ListEmptyComponent={
          !isFetching ? <NoBoards screenname="board" /> : null
        }
        ListFooterComponent={<VStack padding="5" />}
        renderSectionHeader={Sectionheader}
        stickySectionHeadersEnabled
      />

What is stored in the variable `sectionIndex`? And according to [RN docs](https://reactnative.dev/docs/sectionlist#scrolltolocation), you should define `getItemLayout` or `onScrollToIndexFailed`. — kiuQ, May 23 '23 at 06:40
@kiuQ updated the question , FYI in js, if the key and value names are same, then we can use the shorthand as i used above and if we don't provide a value, then it will throw an error, sectionIndex is not defined — Irfan wani, May 23 '23 at 06:44
@kiuQ will check the docs again, but i created a similar sectionlist and applied the same code, that was working. — Irfan wani, May 23 '23 at 06:49
Or would you please provide some dataset to reproduce the issue? — kiuQ, May 23 '23 at 06:54

score 0 · Answer 1 · answered May 23 '23 at 07:29

I recreated the issue using your expo snack. I believe the issue is about the main container view. It is better to provide flex: 1 in the container style.

import { useRef } from 'react';
import { SectionList, View, Text, Button } from 'react-native';

const data = [
  { title: 'title 1', data: [1, 2, 3, 4] },
  { title: 'title 2', data: [1, 2, 3, 4] },
  { title: 'title 3', data: [1, 2, 3, 4] },
  { title: 'title 4', data: [1, 2, 3, 4] },
  { title: 'title 5', data: [1, 2, 3, 4] },
  { title: 'title 6', data: [1, 2, 3, 4] },
  { title: 'title 7', data: [1, 2, 3, 4] },
  { title: 'title 8', data: [1, 2, 3, 4] },
  { title: 'title 9', data: [1, 2, 3, 4] },
  { title: 'title 10', data: [1, 2, 3, 4] },
];

const App = () => {
  const sectionListRef = useRef(null);

  return (
    //Section List will always scroll to the top if this flex prop is removed
    <View style={{flex: 1}}>
      <View style={{flexDirection: 'row', marginTop: 50, justifyContent: 'space-around'}}>
        <Button 
          title={"Top"} 
          onPress={()=>{sectionListRef?.current?.scrollToLocation({sectionIndex: 0, itemIndex: 0})}}
        />
        <Button 
          title={"Bottom"} 
          onPress={()=>{sectionListRef?.current?.scrollToLocation({sectionIndex: 6, itemIndex: 0})}} 
        />
      </View>

      <SectionList
        ref={sectionListRef}
        renderSectionHeader={({section}) => <Text>{section.title}</Text>}
        stickySectionHeadersEnabled
        sections={data}
        renderItem={({ item }) => (
          <View style={{ padding: 20 }}>
            <Text>{item}</Text>
          </View>
        )}
      />
    </View>
  );
};

export default App;

not working, I think in this case, you are just creating a problem by wrapping it into a view and then solving the same problem by flex 1 — Irfan wani, May 23 '23 at 08:38
Then you may need to create a snack contains data and button which is not working to scroll as a minimal, reproducible example. As your snack provided only contains data. — kiuQ, May 23 '23 at 08:57
that is what the problem is. I am not able to repro it in snack with basic setup. As it works fine in that case. It just doesn't work in my case and there is nothing so special in my case too — Irfan wani, May 23 '23 at 12:25
I am sorry that I can't think about reason for this is not working anymore. The code is too simple that it should not have any problem. — kiuQ, May 24 '23 at 00:51
i even replaced my whole component with the above code which is just the basic implementation but the same behaviour, it always scrolls to top — Irfan wani, May 24 '23 at 03:19

scrollToLocation always scrolling to top in sectionList in react native

1 Answers1