What i should do to disable auto scrolling behaviour when new item is added at top of list?

[krupalikevadiya]

No description provided.

[chubillkelvin]

You can enable / disable the autoscroll behavior with the prop isAutoScrolling.

Just pass false to it whenever applicable in your case.

[krupalikevadiya]

I checked with given props but it's not worked for me. I want to disable autoscrolling when i add new data at top or bottom inshort at both side. Can you please suggest me some way how can i do that?

[chubillkelvin]

hi @krupalikevadiya I think I do not understand your case here. From your description, it seems that you do not want the autoscroll function at all (because autoscrolling is mainly for when new data is added). Then, using a normal FlatList would have been the simplest choice.

May I know what is something that you want to do with AutoScrollFlatList here that normal FlatList cannot do for you? I will need a little more detailed description / image / pseudo code to add my opinion here.

[krupalikevadiya]

Okay first of all thanks for quick reply.
Let me add detail description of what i want to achieve.
I have chat application and i use normal Flatlist with inverted props to render messages through pagination, but problem is there when i search messages and my message is in 5th page of pagination i have to load 5th page first and than other pages like 4,3,2,1 and 6,7....etc later through async. But when i added messages of other pages rather than 5th page list scrolls automatically to down so i want to disable that auto scrolling and stays user to their searched message untill they scroll list manually.

[chubillkelvin]

I am suggesting you use a state like canAutoScroll to keep track of the usage.

When the searching is performed, set it to false in the callback (maybe in the onChange callback of your search input box).

When user manually scrolls (you can use the onScroll prop), set it to true.

Then, you pass it like isAutoScrolling={canAutoScroll}.

Hope this helps.

[krupalikevadiya]

Yaa i use it like that but it is not worked and always scrolled automatically when i add data at top or bototm.

[chubillkelvin]

@krupalikevadiya that sounds weird. Is it possible you provide me with a minimal repo with dummy data which can reproduce this issue so I can take a look on it?

[krupalikevadiya]

Let me attach my app.js file here so you can check it.
App.js.zip

[chubillkelvin]

@krupalikevadiya thanks for the code. Let me get back to you as soon as possible.

[krupalikevadiya]

Hey @RageBill any update on it ?

[chubillkelvin]

I do not have access to my computer yet. Will get back to you as soon as possible.

[chubillkelvin]

hi @krupalikevadiya, turns out I was wrong with the usage of isAutoScrolling. Sorry for the confusion.

To clarify:
It was a method meant to be called to check whether the auto-scrolling behaviour is enabled right now or not, but not for enabling / disabling the auto-scrolling behaviour.

To resolve your issue, I have released v1.11.0 in which I have added the autoScrollDisabled props for your convenience.

Hope it helps!

[krupalikevadiya]

Hey @RageBill Thanks for your concern. I tested this newly added props and this props also doesn't work for me as if i add autoScrollDisabled={true} list is not scrolled when i add data at top but it is scrolled when i add data at bottom and with autoScrollDisabled={false} list is not scrolled when i add data at bottom but animation like scrolling is appear and list is scrolled when i add data at top.

[chubillkelvin]

hi @krupalikevadiya let me test again and get back to you later today. When I was trying it out, it was working for me (based on your code). I will attach a working code snippet for you later. Hope this helps!

[chubillkelvin]

Hi @krupalikevadiya I have tested and now understand your problem.

When I tested with this:

<AutoScrollFlatList
    {...otherProps}
    inverted={true}
    autoScrollDisabled={true}
/>

It matches your description - the auto-scrolling behaviour is no longer there, and it does not scroll when adding data to the top. However, when adding data at the bottom - the list "shifted". It is not scrolling (as it does not trigger animations).

This is an expected behaviour - you can test with it against the official <FlatList /> component as well. The reason for this is because - when you add new items to the bottom, the whole list will shift according to its default behaviour.

How to solve this? In your addTop() method, you add a scrollTo method after setState as follows:

addTop() {
        let prev = this.state.list_data
        const additionalNumbers = Array.from(Array(10).keys())
            .map((n) => ({
                id: this.generateUniqueKey(),
                value: prev[0].value - n - 1,
            }))
            .reverse();

        let final_data = additionalNumbers.concat(prev);

        /**
         * Adjust the scrollTop to make the view unchanged
         */
        this.setState({ list_data: final_data }, () => {
            if (this.ref.current) {
                this.ref.current.getNativeScrollRef().scrollTo({y: this.ref.current.scrollTop + 100 * 10, animated: false})
            }
        })
    }

Please make sure you have done this for the ref:

export default class App extends React.Component {
    ref = React.createRef();

   (...many other codes...)

   <AutoScrollFlatList
       ref={this.ref}
       {...otherProps}
  />

  (...many other codes...)
}

Hope this helps!