Any way to Implement with SectionList?

[stephanoparaskeva]

SectionList does not seem to have 'scrollToLocation' function. But Is the only List type I need to use for my tabs, is there anything I can do. Have currently tried everything.

Also what about ScrollView?

[JungHsuan]

@stephanoparaskeva
Hi! Maybe you can try this for SectionList, and try this for ScrollView to replace scrollToOffset. I will try to implement it with SectionList and ScrollView later. Thanks!

[stephanoparaskeva]

@stephanoparaskeva Hi! Maybe you can try this for SectionList, and try this for ScrollView to replace scrollToOffset. I will try to implement it with SectionList and ScrollView later. Thanks!

Hey man! really nice work. I have managed to implement this for sectionlist and scrollview. Here is the code:

  const automaticScroll = ({ key, value }: RefType) => {
    const scrollVal = scrollY._value;
    const currRouteKey = routes[tabIndex].key;
    const inactiveOffset = listOffset.current[key];

    let offset = null;
    let viewOffset = null;

    if (key === currRouteKey || !value) return;

    if (scrollVal < HEADER_HEIGHT && scrollVal >= 0) {
      offset = scrollVal;
      viewOffset = HEADER_HEIGHT + TAB_BAR_HEIGHT - scrollVal;

      listOffset.current[key] = scrollVal;
    } else if (
      scrollVal >= HEADER_HEIGHT &&
      (inactiveOffset < HEADER_HEIGHT ||
        inactiveOffset == null ||
        inactiveOffset <= 0)
    ) {
      offset = HEADER_HEIGHT;
      viewOffset = TAB_BAR_HEIGHT;

      listOffset.current[key] = HEADER_HEIGHT;
    } else return;

    if (value instanceof ScrollView) {
      value.scrollTo({ y: offset, animated: false });
    } else if (value instanceof FlatList) {
      value.scrollToOffset({ offset, animated: false });
    } else if (value instanceof SectionList) {
      const defaults = { itemIndex: 0, sectionIndex: 0 };
      value.scrollToLocation({ viewOffset, ...defaults, animated: false });
    }
  };

  const onScrollEndDrag = () => {
    listRefArr.current.forEach(automaticScroll);
  };

There is an important issue with the original code that I am facing. There is a memory leak with onGetRef which I cannot seem to fix, somehow the ref array stays around for me. I click on a user and go to their profile, which uses the tab code you've written, when I go back and click on another profile or the same profile, the refs begin to build up. I've tried to make the ref array listRefArr.current = [] on component unmount but this didn't work.

Any ideas on how to fix this?

[JungHsuan]

hi @stephanoparaskeva, sorry I am not entirely understand the memory leak problem you mentioned before. The ref for each scene is necessary to be build. Could you explain more in detail? Thanks.

[stephanoparaskeva]

hi @stephanoparaskeva, sorry I am not entirely understand the memory leak problem you mentioned before. The ref for each scene is necessary to be build. Could you explain more in detail? Thanks.

It's nothing @JungHsuan, my mistake!

I had a memory leak in my application that was separate to what you made with the refs. This is not a problem. I fixed the issue in my app.

[JungHsuan]

Great! Please let me know if you have any questions.