React-native: FlatList automatically scrolls after adding new items

[SiSa68]

FlatList automatically scrolls after change data and adds new data in the front or middle of the data list.
It only works correctly when adds new item to the end of list
I checked scroll offset and understand that FlatList scrolls to keep the latest content Y offset
I mean when the content size changes, the latest Y offset now is not where the user was before! but FlatList scrolls to it

React Native version:
react-native: 0.59.4
System:
OS: Windows 7
CPU: (2) x64 Intel(R) Pentium(R) CPU G4400 @ 3.30GHz
Memory: 310.09 MB / 3.87 GB
Binaries:
Yarn: 1.15.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
IDEs:
Android Studio: Version 3.2.0.0 AI-181.5540.7.32.5056338

Describe what you expected to happen:

It shouldn't scroll to new position when I add new items to list, and should keep latest position where user was

Example code:

inverted
style={{flex: 1}}
data={this.data}
keyExtractor={(item, index) => item.id}
renderItem={this.renderItem}
ref={ref => this.flatList = ref}
/>

Code that adds new items to list:

this.data = [ ...newItems, ...this.data ];

[sgtpepper43]

If you only need this fixed in ios, there's an undocumented prop maintainVisibleContentPosition on ScrollView that ought to do what you want. Unfortunately it doesn't work on android. I've been trying to solve this problem for the last two days in my own code and it's a freaking nightmare.

[SiSa68]

@sgtpepper43 Thank you for participate
I need in both android and iOS.
I find workaround by keep latest y offset with onScroll and also save content height before and after adding new items with onContentSizeChange and calculate the difference of content height, and set new y offset to the latest y offset + content height difference!

But its not a good way, because it has UX problem. Firstly it scrolls down and after that scrolls back to the latest position
And it's not working when I want to load my list item from realm database

There should be a simpler way to do this and I don't understand why there is not?!

[sgtpepper43]

That's the same point I'm at 😩 I was going to try and fix it, but it's taken longer to try to get the Android code building and running in our app then writing the fix itself will take... I still haven't gotten it to compile. So I'm giving up on that.

[SudoPlz]

fyi, I've asked the same thing here https://stackoverflow.com/questions/56707931/prepending-data-to-a-flatlist-always-shows-the-first-child/56837491#56837491

No actual fixes so far.

Leaving that here for future reference.

[winardis]

having the same issue here on trying to prepend data to my datasource,
i found "maintainVisibleContentPosition" but that only works for IOS, Android is not supported
have you guys found any other solutions on this without manually scrollToIndex of course

[kirillpisarev]

I was afraid that there is no straightforward way to achieve this, but at the moment after a couple of days of trying to implement this feature, it looks like RN is not an appropriate tool to implement chat apps.

[SiSa68]

I can not believe that they are not support this feature at all!!!
I found RecyclerListView
It might solve this problem, But I didn't currently have the opportunity to test it
If someone has an opportunity, please test and give the result to the React Native community!

[jmacioszek]

That's an issue for me as well, would be nice to have this working with SectionList.

[AVert]

Have same problem Guys ((
maintainVisibleContentPosition not work on Android

[SudoPlz]

I created a ticket in Canny, please upvote, this has to get fixed soon https://react-native.canny.io/feature-requests/p/allow-prepending-new-items-to-flatlists-without-side-effects

[AVert]

@sahrens
Could you please triage this? This is a regression/bug, right? If so, any advice how to fix it? Thanks!

[AVert]

i check this same way not work

I can not believe that they are not support this future at all!!!
I found RecyclerListView
It might solve this problem, But I didn't currently have the opportunity to test it
If someone has an opportunity, please test and give the result to the React Native community!

[AVert]

I can not believe that they are not support this future at all!!!
I found RecyclerListView
It might solve this problem, But I didn't currently have the opportunity to test it
If someone has an opportunity, please test and give the result to the React Native community!

@naqvitalha can you change you component to mak it work as we need?

[AVert]

I can not believe that they are not support this future at all!!!
I found RecyclerListView
It might solve this problem, But I didn't currently have the opportunity to test it
If someone has an opportunity, please test and give the result to the React Native community!

I try this - no way

[woody-riddle]

@AVert
Thanks for your try.
If you fix it, let's talk how you use that instead of ScrollView and maintainVisibleContentPosition.
I will try that too.
Best wishes for you.

[dmkerfont]

Clarification: I'm creating a chat app which will append pages of messages as user scrolls up, and prepend newly received messages to the bottom.

My solution using an inverted flatlist was to not render newly received messages at the bottom, unless/until the user is scrolled to the bottom.
Here's how I achieved that:

1) Add following component state variables
- isScrolledBottom: boolean
- newMessageList[]

2) define a threshold for deciding if we are scrolled to bottom of list
myThreshold = 100 pixels

3) Create a method for handling onBottomReached while scrolling
onBottomReached()
{
if(newMessageList > 0){
- append them to my flatlist data source
- remove them from my newMessageList in component state
- scroll to bottom
}
}

4) flatlist onScroll:
if (crossed 100px threshold, in either direction)
- if at bottom, then call onBottomReached()
- set state.isScrolledToBottom = T/F

5) New message received:
if(at bottom){
append to flatlist data source
}
else{
append to newMessageList
}

This gave me the best user experience, since maintainVisibleContentPosition does not work on android, so I did not use it at all.

[SudoPlz]

@dmkerfont I don't really get it, what problem does this solve? It looks like you're not "prepending" data, looks like you're only appending.

Isn't the issue only apparent when someone tries to prepend data (and thus get's scrolled on a wrong date?)
Have I miss-understood something?

Thanks

[dmkerfont]

@SudoPlz
With an inverted flatlist. The 'end' of the list is actually the top, thus scrolling up will continue to add older pages ( appending to the end ).

When a new message comes in, prepending it to the front of the list will cause the data shifting issue as the indexes are reset.

Instead of prepending every message that comes in, I'm checking if the user is at/near the bottom or if they are scrolled up a significant distance.

If at bottom, then prepend and scroll down.
Else, build a queue of messages to prepend.

If user reaches bottom, through a manual scroll or pressing a button like a 'New Message' indicator, then simply prepend the queued messages.

I have no experience with native code so I have no desire to implement _maintainVisibleContentPosition_ at this time, but this is a decent workaround.

[SudoPlz]

@dmkerfont interesting, is it too much to ask for some visual example? I've taken the time to replicate what you said with numbers below, does it look right?

Example:

Inverted flatlist

[3]
[2] <-- Index 2 / User sees 2
[1]
[0]

user manually scrolls to the bottom, then:

[3]
[2] 
[1]
[0]<-- Index 0 / User sees 0

New items [4][5][6] get prepended:

[3]
[2] 
[1]
[0]
[4]
[5]
[6]<-- Index 0 / User sees 6

so the user ends up seeing [6] now (which is now index 0) .

Then as an extra step the user get's scrolled to 0 again?

• Isn't that a problem? Shouldn't the user see [4] instead? (index 2) ? since it's the next item after [0] ?
• Also another question, does appending (adding items after [3]) work fine using an inverted list?

I appreciate your time, thanks.

[dmkerfont]

@SudoPlz

Isn't that a problem? Shouldn't the user see [4] instead? (index 2) ? since it's the next item after [0] ?

Shoot... You are right. If I'm scrolled up (and want my scroll position preserved), then I build my list of new messages.
Once I scroll down manually, when I hit the bottom and the list [4][5][6] is prepended, I'm suddenly staring at item [6] instead of [4]. This means that the issue still exists, but you will only notice it if you are prepending more than 1 or 2 items to the list at a time while scrolling.

Perhaps this alternative isn't worth all the effort after all. :(

Also another question, does appending (adding items after [3]) work fine using an inverted list?

If you've done any paging, you will have noticed that adding items to the end of the list ( bottom for regular flatlist ) works as expected. This is the same when appending (top) to an inverted flatlist.

[SudoPlz]

Ok cool, please let me know if you find a way to make the user see [4] instead (the next item).

[jesster2k10]

What’s the story with this issue? Every time the data source on the flat list changes, say once new data is fetched or prended to the list it resets the scroll position. I’m building some sort of user feed, so I need to be able to update the data source without messing up the users scroll position.

Is this possible at all with react native? The maintainVisibleContentPosition prop seems to do nothing for me.

[jakovB777]

Edit: As Sisa68 noted, I misunderstood the struggle here. Mb

[SiSa68]

@jakovB777 I think our case are different from yours!
We want to add item to both side of list, not only push on back.
There is no problem when you have one side list with FlatList

[isuhar]

Same problem =(( We add new items to the start of array and position is still 0

[toddrimes]

This works for me:

[meosieudang]

anyone fix it?

[Donhv]

i use https://github.com/bolan9999/react-native-largelist and same issue.

[nahuelburgos]

Is there a plan to fix this FlatList issue?

[Elias-Graf]

I'm not familiar with the code base and relatively new to react-native but that being said, I think the problem is not the FlatList component itself, but the underlying ScrollView which has the exact same behavior:

push new items to bottom -> renders correct / doesn't move
push new items to the top -> it does all sorts of things but not what we want.

This is a really wild guess and I sadly could not test it at all because I could not get my self-compiled version of react-native to run without crashing, but maybe this is an issue: https://github.com/facebook/react-native/blob/0ee7fb98cc9cae89196570de306e37eefdd3b434/Libraries/Components/ScrollView/ScrollView.js#L726-L736 ?

At least it checks for content at the top and then sets the offset.

Again I'm just trying to help here but it may very well be that this is completely wrong and stupid.

Edit:
I gave it some more thoughts and I am now in the opinion that this probably cannot be the issue. If you push content to the bottom there would have to be some algorithm that determines the new desired scroll offset which this certainly is not... But I still hope that someone looks at the ScrollView

[fungchun1121]

There still isn't a feasible solution for both iOS and Android as of now. Please get this fixed ASAP because it's clearly a hindrance for a lot of people, and they may choose away from React Native because of this.

[markorusic]

Has anyone found a reliable way of dealing with this? It's really frustrating that you cannot have a list that properly scrolls in both directions...

[SudoPlz]

We quit trying to use react-native ScrollViews, instead we made our own Carousel view that works with react-native-gesture-handler and the react-native Animated api to achieve infinite lists.

I've asked from my manager to allow me to open-source this, if I get a green light I'll create a new repo and post back.

[Dexwell]

@SudoPlz That sounds amazing; any news? Does it support (sticky) sections and inverted mode? There is a huge need for a definitive, high-performance, fully featured RN list component.

[Elias-Graf]

@SudoPlz @Dexwell We would be interested as well. Adding to the request list, will it support scrollTo?

[pzxbc]

I worked for a chat app recently. Using inverted property together with a dynamic header component, I completed this function finally.

Snack Demo

[SiSa68]

@pzxbc Your snack demo is one side list!

[kperreau]

Any news ?

[SudoPlz]

Still waiting for that green light..

[GoldenMaximo]

Bump.

[cnkyrpsgl]

9 months and still open ?

[darkbasic]

I suggest you to start looking for alternatives because at this point I don't think it's going to be fixed. Unfortunately React Native has always been iOS first, so if it works on iOS it's considered good enough.

[fungchun1121]

I suggest you to start looking for alternatives because at this point I don't think it's going to be fixed. Unfortunately React Native has always been iOS first, so if it works on iOS it's considered good enough.

Sorry can you show me the solution which works on iOS? By solution I mean a bi-directional FlatList that can scroll both ways and append/prepend new items without changing the scroll position.

[threadhack]

I'm also interested in FlatList that can scroll both ways and append/prepend new items without changing the scroll position. Have anyone found a solution?

[theprdv]

Still no intention to make maintainVisibleContentPosition prop for android? (https://reactnative.dev/docs/scrollview#maintainvisiblecontentposition) Even some dirty solution that just work if the react-native comunity doesn't intend to look on this in the near future...

[theprdv]

Still waiting for that green light..

@SudoPlz Any news?

[SudoPlz]

Hi David,

I haven’t forgotten about this.
Because it’s a real pain I really want to get this out as well.
The problem is that my company is moving slow with those procedures..

The way I’ve implemented the infinite list is by using Animated.Views, specifically 5 of them one next to the other (each one represents a calendar item), and then using interpolation in a way so that when the user reaches the left side, the last view becomes first, and vice versa.

I'll post back as soon as I have news, I won't forget.

[IseeUDenis]

me too

[YogiHa]

wouldn't something like that won't fix thisissue?

`
const [currentItem, setCurrentItem] = useState(null);

data={data}
onViewableItemsChanged={viewableItems=>setCurrentItem(viewableItems[0])}
initialScrollIndex={currentIndex ? data.indexOf(currentItem) : 0}
/>

`

[antoinefotso]

Please god help!! ??

[KyoungHwanLee]

Hello guys.
I implemented simple and nusty "maintainVisibleContentPosition" prop for android,
based on RN 0.61.5 for my own need.

The original (ios) maintainVisibleContentPosition has two keys,
minIndexForVisible: number
and
autoscrollToTopThreshold: number.
But I imeplemented 'autoscrollToTopThreshold' only.

You can use it by modifying your react-native dependency in package.json
"react-native": "github:KyoungHwanLee/react-native#release/0.61-android-maintainVisibleContentPosition",

and use just like ios,

<FlatList
    maintainVisibleContentPosition={{
            minIndexForVisible: 0,
            autoscrollToTopThreshold: 10
    }}
    ...otherProps
/>

As I mentioned, there are 2 limitations for this implementation.

1. Your RN version should be 0.61.x, cuz I'm using 0.61.5 and modified 0.61.5-stable branch.
   There are just few modifications. So, maybe you can check diff and apply to other versions.
2. "maintainVisibleContentPosition.minIndexForVisible" doesn't work. cuz I don't need it.

Now I'm very busy working. So, when things slow down, I'll make a PR for latest version of RN.

[JamesMahy]

For now, I had to solve this using a render Buffer on the list

bufferRenderTimer = null;
bufferRenderRunning = false;
setupBufferRenderTimer = () => {
   this.bufferRenderTimer = setTimeout(this.bufferRender, 500);
};

    bufferRender = () => {
        clearTimeout(this.bufferRenderTimer);
        if(!this.bufferRenderRunning){
            this.bufferRenderRunning = true;
            if(this.scrollOffset.y < 35){
                let messages = this.state.messages;
                let bufferState = this.messageBuffer;

                bufferState.forEach((message, index) => {
                    messages.unshift(message);
                    delete this.messageBuffer[index];
                });

                this.setState({ messages: messages});
            }
            this.bufferRenderRunning = false;
            this.setupBufferRenderTimer();
        }else{
            this.setupBufferRenderTimer();
        }
    };

It's far from ideal, but does the job and from a chat app perspective gives you control of flow too (you can increase the timer to add time dilation to messages).

When i get further into my project, i'm going to see if I can make a custom Android Flat list component to implement maintainVisibleContentPosition instead

[rn01techmelo]

You only need to give initialNumToRender to some infinity and it works perfectly.

ref={ref => this.flatList = red}
contentContainerStyle={{ alignSelf: 'flex-start' }}
vertical={true}
initialNumToRender={100000}
onContentSizeChange={() =>this.flatList.scrollToEnd()}

                        showsVerticalScrollIndicator={false}
                        showsHorizontalScrollIndicator={false}
                        data={this.state.singleChatData}
                        renderItem={({ item, index }) => <MyChats item={item} index={index} />}
                        keyExtractor={item => item.id}
                    />

[Freddy03h]

initialNumToRender={100000} is like not using FlatList at all, right?

[divonelnc]

It would be nice to have any sort of official answer to this problem. Is it even being considered at all? Or is React native not to be used to create a two-way infinite list on Android, ever?

[iqbaldp]

no solution ?

[Samueloyeks]

FlatList automatically scrolls after change data and adds new data in the front or middle of the data list.
It only works correctly when adds new item to the end of list
I checked scroll offset and understand that FlatList scrolls to keep the latest content Y offset
I mean when the content size changes, the latest Y offset now is not where the user was before! but FlatList scrolls to it

React Native version:
react-native: 0.59.4
System:
OS: Windows 7
CPU: (2) x64 Intel(R) Pentium(R) CPU G4400 @ 3.30GHz
Memory: 310.09 MB / 3.87 GB
Binaries:
Yarn: 1.15.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
IDEs:
Android Studio: Version 3.2.0.0 AI-181.5540.7.32.5056338

Describe what you expected to happen:

It shouldn't scroll to new position when I add new items to list, and should keep latest position where user was

Example code:

inverted
style={{flex: 1}}
data={this.data}
keyExtractor={(item, index) => item.id}
renderItem={this.renderItem}
ref={ref => this.flatList = ref}
/>

Code that adds new items to list:

this.data = [ ...newItems, ...this.data ];

That's the same point I'm at 😩 I was going to try and fix it, but it's taken longer to try to get the Android code building and running in our app then writing the fix itself will take... I still haven't gotten it to compile. So I'm giving up on that.

My approach was to set scrollEnabled to false before appending the new data and then set it to true immediately after

[antoinefotso]

I don't think is the correct approach, because if u receive message from backend when ur scrolling ( enable and disable scroll sometime ),
This is nightmare

[preduseldavid]

@SudoPlz any update for that green light?

[SudoPlz]

@preduseldavid I haven't forgotten at all my friend. Still waiting :/

[mustafaerk]

My solution is :
ref={scrollViewRef}
data={allMessage}
renderItem={({ item }) => (
key={item.english}
english={item.english.toUpperCase()}
original={item.original.toUpperCase()}
/>
)}
onContentSizeChange={() => {
scrollViewRef.current.scrollToEnd({ animation: true });
}}
/>

I use text input this function run when user focus to input :
const onFocusToInput = () => {
setTimeout(() => {
scrollViewRef.current.scrollToEnd({ animation: true });
}, 450);
};

[antoinefotso]

@mustafaerk if u do like that , u will not able to scroll over old messages when other users are sending messages,

UX - -

[mustafaerk]

@antoinefotso in case of my project basically I can scroll to anywhere on flatlist

[antoinefotso]

@mustafaerk ok,
If u try to use flatlist for chat app , you will know exactly what we are talking about

[negrudev]

My solution was to use a mutable ref object in order to hold the array displayed by the flatlist.
Changing state will update the component the state is hold in, while the reference will keep the Flatlist from rerendering all the elements.

const itemsRef = useRef([]);
const [items, setItems] = useState([]);

itemsRef.current = items;

const loadNextItems = () => {
  const nextItems = await getNextItems() // here for demonstration purposes, it should also use pagination
  setItems(prevItems => [...prevItems, ...nextItems])
}

<FlatList
  data={itemsRef.current}
  renderItem={({ item }) => ... }
  onEndReachedThreshold={0.3}
  onEndReached={loadNextItems}
/>

[lucaashrq]

My solution was memoize the FlatList component.
I actually use the FlatList how an Animated component, the code is:

const AnimatedFlatList = useMemo(() => Animated.createAnimatedComponent(FlatList), []);

With that, the scrolling problem must be solved.

[Hamidrdeveloper]

Put this in the view
`` <FlatList data={this.state.data} ref={ref => { this.flatListRef = ref; }} initialScrollIndex={0} keyExtractor={item => item.id} extraData={this.state.refresh} renderItem={({item, index}) => { // animation={animation} return ( <ListItem inAnimation={inAnimation} outAnimation={outAnimation} duration={duration} easing={easing} isDeleted={item._isDeleted} id={item.id} item={item} /> ); }} />`

**Run this in a function**
 ```
this.flatListRef.scrollToIndex({
        animated: true,
        index: nextProps.indexScroll,

  });

``

[GBabaBatyr]

Before maxToRenderPerBatch was 100. Now I changed maxToRenderPerBatch={10}. Surprisingly this fixed the issue )

and try to decrease onEndReachedThreshold.
hope this will work

[minhnbh]

When I use Flatlist in react-native (0.61.5), I don't have any problem with onEndReached. But now, when I use Flatlist in react-native (0.62.2), when I add new data to flatlist, it always scroll to top. Someone has any solutions please :(

[GBabaBatyr]

@minhnbh I highly recommend you to use RecyclerListView.
This is a high-performance listview for React Native and Web with support for complex layouts. JS only with no native dependencies, inspired by both RecyclerView on Android and UICollectionView on iOS.
https://github.com/Flipkart/recyclerlistview

This library saved my life

[kirillpisarev]

@minhnbh I highly recommend you to use RecyclerListView.
This is a high-performance listview for React Native and Web with support for complex layouts. JS only with no native dependencies, inspired by both RecyclerView on Android and UICollectionView on iOS.
https://github.com/Flipkart/recyclerlistview

This library saved my life

Performance is important, but does that library solve the problem described in this issue? Does it handle the case with saving visible items on the screen on adding new items from both sides?

[GBabaBatyr]

@kirillpisarev Yes. This library will help you solve these issues.

[jack-guy]

Just to prevent anyone else from going down this path unnecessarily - no, recylerlistview does not solve the issue of maintaining scroll position when inserting at the top: https://github.com/Flipkart/recyclerlistview/issues/44

[abeyuya]

Currently, the PR Support for ScrollView.maintainVisibleContentPosition on Android is open.
I brought the RN that built this branch into my app.
And it is working as expected!

However, the same problem as this occurs in my app both ios and android.

// package.json

  "react-native": "github:abeyuya/react-native#patch-maintainVisibleContentPosition",

[kotsh23]

SOOO ?

Any fix at 2020 ?

[Miskamyasa]

Same here!
Make this Hack:

 <ScrollView
        ref={refs[1]}
        onContentSizeChange={onContentSizeChange(1, reset)}
        style={getStyle(view === 1)}
        onMomentumScrollEnd={onMomentumScrollEnd(!busy && view === 1)}>
        <Loader loading={topLoading || lists[1]?.length < messages?.length} />
        {lists[1]?.map((item, idx) => (
          <MessageSwitch
            key={keyExtractor(item, idx)}
            selected={checkSelected(item?.id, selectedItems)}
            onSelectMessage={onSelectMessage}
            item={item}
            roomInfo={roomInfo} />
        ))}
        <Loader loading={bottomLoading} />
      </ScrollView>
      <ScrollView
        ref={refs[2]}
        onContentSizeChange={onContentSizeChange(2, reset)}
        style={getStyle(view === 2)}
        onMomentumScrollEnd={onMomentumScrollEnd(!busy && view === 2)}>
        <Loader loading={topLoading || lists[2]?.length < messages?.length} />
        {lists[2]?.map((item, idx) => (
          <MessageSwitch
            key={keyExtractor(item, idx)}
            selected={checkSelected(item?.id, selectedItems)}
            onSelectMessage={onSelectMessage}
            item={item}
            roomInfo={roomInfo} />
        ))}
        <Loader loading={bottomLoading} />
      </ScrollView>
      {!isEmpty(prerender) ? (
        <View
          style={styles.prerenderView}
          onLayout={onPrerenderLayout}>
          {Array.isArray(prerender) ? prerender.map((item, idx) => (
            <MessageSwitch
              key={keyExtractor(item, idx)}
              selected={false}
              onSelectMessage={cb}
              item={item}
              roomInfo={roomInfo} />
          )) : null}
        </View>
      ) : null}

prerender is calc for height of new items and in position absolute aside of screen
after prerender second scrollview / flatlist renders and scrollsToOffset from prerender height, than emit contentSizeChange and switch view
1 == view - zIndex of ScrollView 1 is 10 and ScrollView 2 is 0
2 == view - zIndex of ScrollView 2 is 10 and ScrollView 1 is 0
Something Like that

[ghasemikasra39]

I handled this case manually, but of course, is not efficient at all. Would be great if this feature gets added.

[ghasemikasra39]

Dear @tranpeter08
Thank you for your answer. I need a more general solution. I posted my question here.

[kirillpisarev]

@tranpeter08 We're trying to solve the opposite problem - a list shouldn't be scrolled on adding new items.
For everyone who is suffering, trying to build a chat using RN, here is what could potentially help you:
iOS: maintainVisibleContentPosition
Android: https://github.com/facebook/react-native/pull/29466#issuecomment-664367382 and the PR in general, when it is merged

Both have limitations on number of simultaneously added items. When the number of new items exhausts the threshold, list still loses the scroll position.

[tranpeter08]

Whoops, sorry, I will remove my comment.

[ghasemikasra39]

Dear @kirillpisarev
Thank you for your reply. Can you explain the limitation a bit more? I did not get it.

[risto24]

Is ScrollView the only way to make a chat app?
No solution to Flatlist?

[divonelnc]

@risto24 ScrollView does not have the jump to new items issue listed here? Curious, as I didn't think about using Scrollview for my chat app before.

[Nepherius]

So no fix for this?

[Miskamyasa]

Is ScrollView the only way to make a chat app?

And only for ios

[lsdimagine]

anyone tried maintainVisibleContentPosition with SectionList on iOS? Prepend items didn't work reliably on my side

[yuta-757]

I am also worried for this problem.
Please help us.

[akhil-geekyants]

Please fix this.

[ghasemikasra39]

I tested maintainVisibleContentPosition on iOS. But this property only works if you append data. if you prepend data, it does not work.

[ghasemikasra39]

Currently, the PR Support for ScrollView.maintainVisibleContentPosition on Android is open.
I brought the RN that built this branch into my app.
And it is working as expected!

However, the same problem as this occurs in my app both ios and android.

// package.json

  "react-native": "github:abeyuya/react-native#patch-maintainVisibleContentPosition",

The issue is not whether is works on iOS or android. Please don't get confused by this. The issue here is:
Even on iOS devices that the property maintainVisibleContentPosition is available, there is this issue:
prepending data will change the visible content position. This is not the expected behaviour.

[divonelnc]

I noticed that maintainVisibleContentPosition does not work if you prepend data while you are at a scroll position of 0 (all the way to the top). It does work if you are prepending while not a the top. Even scroll Y of 1 would be enough. Tested at least on web: See snack.

Furthermore, maintainVisibleContentPosition does not work the first time you prepend, no matter your scroll position. It does work afterward. See https://github.com/facebook/react-native/issues/19621

[ghasemikasra39]

I noticed that maintainVisibleContentPosition does not work if you prepend data while you are at a scroll position of 0 (all the way to the top). It does work if you are prepending while not a the top. Even scroll Y of 1 would be enough. Tested at least on web: See snack.

Furthermore, maintainVisibleContentPosition does not work the first time you prepend, no matter your scroll position. It does work afterward. See #19621

It's true. I tested this in our React Native app and it's working when I have passed the very first item in the list.
I am using latest version React Native 0.63.3 and this issue is still there. Then why #19621 issue is closed!

[thanhdevapp]

same problem if flatlist inside tabview

[MohamedSR]

Okey so after 10000 libraries and hacks i arrived to accept that the lazy loading way with pagination does not work with RN Flatlist instead there are two props according to the documentation are used to optimize Flatlist performance maxToRenderPerBatch and initialNumToRender

Optimizing Flatlist Configuration

[vishalnarkhede]

If someone is looking for solution regarding android support for maintainVisibleContentPosition on android, please check - https://github.com/GetStream/flat-list-mvcp

Reference - https://github.com/facebook/react-native/pull/29466#issuecomment-741787508