JS fps drop and stutters during image load

[ehsan6sha]

When images are being loaded in chunk, between each load a lot of drop happens in JS as well as stutters. This causes the app to become unresponsive during load. one side-effect is if user scrolls during these times, it jumps around since engine cannot properly determine the last position as it was busy.

[ehsan6sha]

Stutters and frame drops were due to a couple of console.logs, that is fixed with commit below:
732da74

It is not performant without major drop

[ehsan6sha]

When remote Debug JS is on, there is no performance drop, otherwise, it drops.

[ehsan6sha]

RecyclerListView LaoutProvider is called on each screen TAP, which means the component re-renders at each TAP, which is causing a huge recalculation every time and is unexpected. Looking to find the root cause. Most probabely preventing this, would improve performance significantly

[ehsan6sha]

Could improve this a little by adding memo to components in commit ea3b818, however, root cause(excess re-render of RenderPhotos) is still not addressed.

[ehsan6sha]

Excessive states are causing re-renders. Applying a fix by:
1-switching to recoil
2- removing unnecessary states

[ehsan6sha]

I am switching state management to recoil and switching animation to reanimated. So far the switched components has shown an excellent performance. It probably takes a few more days, but the outcome would be a lightning fast application. Work is being done in branch "reanimated-recyclerlistview"