Any suggestion how to use React native Flashlist to achieve magnetic scroll like the instagram explore page?

Question

I have been trying to apply a magnetic scroll effect to the @shopify/flash-list to achieve the same behaviour of the explore page, where whenever you scroll it feel like it snap to the next post.

I have tried different approach where i used the snapToOffsets which is an array that i update as following:

1. initial state useState<number[]>(...estimated offsets)
2. use the CellRendererComponent to fix the offsets array whenever a cell is rendered (offsets[props.index] = props.style.top)

however this was broken as it seems the setOffsets update the state but for some reason the flashlist ignore the new offsets index and use the initial one.

I have also tried the following:

          viewabilityConfig={{
            viewAreaCoveragePercentThreshold: 10,
            waitForInteraction: true,
          }}
          onViewableItemsChanged={({ changed }) => {
            if (changed.length > 0 && changed[changed.length - 1].isViewable) {
              setSnapIndex(changed[changed.length - 1].index);
            }
          }}
          onScrollEndDrag={(e) => {
            photosContainer.current.scrollToIndex({
              index: snapIndex,
              animated: true,
              viewOffset: insets.top,
            });
          }}

i tried to play around the viewAreaCoveragePercent however it seems that sometimes it just starts to jump specially when i want to scroll to top not the next element.