Scroll Flickering/Jumping when changing state from onscroll event

[adamalexander]

Every time I change the state using the onscroll event, the scroll flickers and jumps around a lot. Anybody experienced this or have a solution?

Below is my code

 <RecyclerListView style={{flex:1}}
          ...
         onScroll={(event) => historyScroller(event)}
 />

function historyScroller(event){
      if(event.nativeEvent.contentOffset.y >= 296){
        setCount(0);
      }else{
          setCount(1);
      }
  }

[adamalexander]

@obiwankenoobi let me know when / if you find any workarounds?

[Megha060199]

Found any work arounds for this ?

[adamalexander]

It’s just how react native works. Whenever the state of the element is changed, it Re-renders the element and that’s why it’s jumping. I decided not to use states. Onscroll I just use a ref, to store and use the values of the scroll position. I was able to trigger an animation without the use of states using just the ref value. However, if you pass the ref value to another component (Other than the parent component) and change that state, the recyclerlsitview won’t jump.

On Sun, Oct 11, 2020 at 12:28 PM Megha060199 notifications@github.com wrote:

Found any work arounds for this ?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Flipkart/recyclerlistview/issues/541#issuecomment-706730289, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABP6HC43YAMHTPZMUQUEJ2TSKHMMBANCNFSM4Q32YUHQ .

-- [image: Logo] https://www.shaare.biz/ *Adam Alexander*Vice President of TechnologyShaare Addison Tree House 14981 Midday Road, 2nd Floor Addison, Texas. 75001 USA. adam.alexander@shaare.biz | www.shaare.biz 1 868 477 1114 | 469 860 0496adam.shaare.biz

[yoursinger]

I try use "ref" to solve this problem.But when I do it,the listItem-Video component will not run.Wtf!

[mayfairr]

Is there any update on a fix or workaround?

[mayfairr]

So, for now I've just set a ref on scroll change. I pass this ref to a child component. The child component manages state independently of the parent. So when the state in question is changed, this does not cause a rerender on the parent, only the child.

To tackle the problem of querying whether or not a ref is changed, I created a use effect hook with a 300ms interval that checks whether or not the ref is changed. If yes change the local state.

Hope it helps anyone that's stuck, ping me if you need more info :D