maintainVisibleContentPosition does not work correctly with multiple instances of a Flatlist

I’m currently facing an issue where the <Flatlist/> component is failing to maintain its position when being used as a common component between multiple other components. My use case goes the following way. I have a common component <Feed/> that holds common logic and renders this package <Flatlist/>. This <Feed/> component is being used from 2 other components, so there are <Home/> and <Verticals/>, both have an instance of <Feed/> in their render functions. The <Home/> is always mounted, meaning that it is only being unmounted when the app is killed, but the <Verticals/> one is unmounted when the user navigates back from that specific screen and mounted when tapping that screen. The Flatlist works as expected and maintains its position only at the <Home/> screen. When I navigate to the <Verticals/> and update the content for that list, the view is not being maintained.

I noticed that if I do not render the <Feed/> component inside the <Home/> screen and only in the <Verticals/> screen, the list behaves as expected and the view is maintained. I tried to do some debugging but I couldn’t find anything useful for me to find a solution (so far). I did inspect flRef.current.getScrollableNode() for the <Verticals/> list and I saw that the values were different for those scenarios. Meaning that when I first loaded the Home list screen and then navigate to the Verticals screen that value was different if I only render the Vertical list screen (when is actually working).

Edit: One more thing, If I go to the main list in the Home screen (currently working), go to the other instance of the list in the Vertical screen (not working) and then go back to the Home screen, now the list in the Home screen does not mantains its position.

This is the configuration for the list in the common <Feed/>

    <FlatList
        ref={ref}
        style={extraStyles}
        accessibilityLabel="Content Feed"
        ListHeaderComponent={header}
        ListEmptyComponent={LoadingStuff}
        data={feedItems}
        renderItem={renderItem}
        onTouchStart={onTouchStart}
        onViewableItemsChanged={onViewableItemsChanged}
        viewabilityConfig={viewabilityConfig}
        keyboardShouldPersistTaps="handled"
        keyExtractor={keyExtractor}
        onEndReached={onInfiniteScroll}
        onEndReachedThreshold={0}
        showsVerticalScrollIndicator={false}
        onScroll={onScroll}
        scrolled={scrolled}
        maintainVisibleContentPosition={{
          minIndexForVisible: 0,
        }}
        refreshControl={
          <RefreshControl refreshing={isRefreshing} onRefresh={onRefresh} />
        }
      />

[jbernhardt23]

@bradnorman5490 PR was submitted https://github.com/GetStream/flat-list-mvcp/pull/21

[jbernhardt23]

hey @bradnorman5490 ! yes, we have finished doing extensive testing around this on our side so I will be opening a PR shortly (tomorrow or starting next week)