Optimize Marquee Animation with Focus Detection

[TaewookKwak]

This PR introduces an optimization for the Marquee component by pausing the animation when the screen is not visible. Using the useFocusEffect hook from @react-navigation/native, the component now deactivates the frame callback and resets the animation state when the user navigates away. This enhancement reduces unnecessary work on both the UI and JS threads, ultimately improving performance and responsiveness.

Key Changes

Focus Detection & Animation Control:

• Activation on Focus: When the screen is active, the frame callback is enabled to run the marquee animation.

• Deactivation on Blur: When the screen loses focus, the frame callback is deactivated, and the animation value is reset to zero. This effectively stops the animation and minimizes CPU load.

Performance Optimization:

By pausing the animation on non-visible screens, we reduce redundant rendering and processing, leading to improved performance, especially in scenarios with limited resources.

Backward Compatibility:

The changes are fully backward compatible. Existing usage of the Marquee component will benefit from this optimization without any modifications required from the consumer’s side.

Testing & Validation

Smooth Resume: Verified that the marquee animation resumes correctly when the screen regains focus.
Resource Usage: Confirmed that the UI and JS threads experience reduced load when the animation is paused, enhancing overall app performance.

Conclusion

This enhancement optimizes the Marquee component by ensuring that animations only run when necessary. It contributes to better resource management and smoother performance, particularly in multi-screen applications using @react-navigation/native. Feedback and further improvements are welcome!

[ys251294]

Stopping animation when screen is not in focus to improve performance is neat trick.
but I believe we do not need this inside our package, but let user decide themself using
export type MarqueeRef = { start: () => void; stop: () => void; isActive: boolean; };

Also:

• wouldn't this add new required dependency for this package. @react-navigation/native
• Also, what about components which are outside this <NavigationContainer> mainly BottomSheet or Modal components