optimizing for performance

[faceyspacey]

Lately I've been doing a lot of performance testing with Perf.start/stop etc. React Native Parallax takes the most rendering time. That's especially weird for me given I do almost nothing dynamic with it. It just loads static images from the device once and has shouldComponentUpdate always returning false.

After looking at the code, it seems the handleLayout function being called for every row may be the culprit. Have you experienced the same?

I'm thinking of solving it by passing in the width and height of each row manually, and then as far as the pageY, I assume I can calculate that by knowing the index of the row and then multiply that by the height of each row. What do you think? Would this provide significant performance benefits?

[oblador]

handleLayout is not the culprit as it only affects the initial render, the performance problem is that it's not ideal for scroll events having to be passed pass the bridge back and forth for every scroll event. Hopefully native support will be implemented for iOS soon, android already have it so I should probably look into implementing that here too.

[faceyspacey]

I'm referring to the initial load. Parallax.image has a lot of time wasted.

[oblador]

This component has some performance issues, initial load is by far not one with highest impact AFAIK. Your suggestion will fit your exact use case, but will break many others for example when you don't have variable height or variable surrounding content.