0

I have been following exactly this article here to animate a header resizing on the scroll of a flatList (list of comments, on Scroll Y, reduce header). It works very well (sometimes a little slow but it's ok).

Now I would like to change layout disposition on resizing: passing from one to two columns when the header becomes smaller. But it seems to me very hard for a performant result.

I thought about two ways to do this:

  1. Use onLayout on the header, to listen to the resizing height, at the middle of the height interpolation, change styles class. This method is costly on performance because it fired onLayout listener every frame, so my app is very buggy.

  2. listen to ScrollY, at the middle of scrollY, change class. The same problem as previously said, each frame check scroll Y make my scroll perform very slowly.

Does anyone as a better idea to change a view layout on resizing?

Thank you

edit: here an exemple of the onlayout event, called a lot of time, causing shuttering

gif example

saratv
  • 33
  • 6
  • Debounce the event, this will make sure the event wont get fired on every frame. – Sjoerd de Wit Apr 22 '19 at 18:48
  • @SjoerddeWit never heard about that, but will test as fast as possible :) Do you talk about the lodash function [_debounce] (https://lodash.com/docs/#debounce) ? – saratv Apr 23 '19 at 20:13
  • It's a general concept in programming to control how many times we allow a function to be executed over time. here's a good explanation: https://css-tricks.com/debouncing-throttling-explained-examples/ – Sjoerd de Wit Apr 25 '19 at 08:02

1 Answers1

0

You should use onLayout for this.

If your app is buggy from using onLayout, you should investigate the cause, as this is not called every frame.

Source: https://facebook.github.io/react-native/docs/view#onlayout

Invoked on mount and layout changes

  • Exactly, my header is resizing on Scroll so the onLayout event is called not every frame, but multiple times per second. I update my question with a gif, to be more clear. In yellow, there is my header, when i scroll on the green View, my header must resize. At the left, you can see the Chrome debugger and that onLayout is called multiple time on resize, as said in the doc "Invoked on mount and layout changes", but the onLayout listener cause shuttering on my scroll. – saratv Apr 23 '19 at 20:07