FPSCounter

[piaskowyk]

Summary

This PR adds a new Reanimated component which displays current fps for both JS and UI threads.

Test plan

Open Reanimated Example on your android/ios emulator and go into the Performance Monitor Example

[latekvo]

previousTimestamp is an integer, while timestamp was a float.
This caused around 1ms of disparity, giving an error of roughly 4% per frame.
After running with this fix for around 5 minutes, FPS remained at a stable 60 per second.
Previously, after 5 or so minutes fps was either 0. something, or above 5000.

[latekvo]

Hot-reloads break this feature. Looks like both the old loopAnimationFrame() and useFrameCallback() keep on running after hot-reload.

[latekvo]

This component does not have the earlier mention hot-reload issues when running as a component imported from react-native-reanimated.

[latekvo]

Do we push this component just as an example for now, or should we make a standalone component out of it?

[szydlovsky]

@latekvo The PR looks great! There are some smaller quality-of-life things to add. It would also be great if you featured a Summary and a Test plan for the PR. If it comes to the summary, just a few sentences describing the feature (and possibly its limitations if there are any), some video showcasing it would also be great. Test plan usually comes down to pointing to a specific example in our app - but if you have any extra code that the feature can be tested on, make sure to include it!

[latekvo]

Thank you for the review @szydlovsky :)
I've applied most of these changes locally, but while at that, i found some new issues which i will have to resolve before requesting another review, and so i'm converting this PR to draft for now.
Thank you for your time

[latekvo]

Screen.Recording.2024-03-25.at.15.05.35.mov

[szydlovsky]

✅