1. Summary
The onFocus callback is triggered with a delay of more than 6 seconds when shifting focus between cards in a carousel.
App Name: Frndly Tv
Bug Severity
Impacts operation of app
2. Steps to Reproduce
HomeScreen –> movieGrid(flashList) vertical scrolling of carousels) –> movieCarousel(kepler-ui-carousel ) horizontal scrolling of Kepler cards –> videoTile(card – kepler-ui-component)
We are using multiple array of objects, by default focus is working, we want to control the focus handling as we have custom focus handling scenarios. So we need onFocus to be triggered fastly in card.
Check by clicking the remote button (D-pad) on the card. Add logs inside the card component’s onFocus function—you’ll notice a delay before the logs appear.
3. Observed Behavior
1.When we click left or right D-pad button fastly from first card to nth card , focus shifting to nth card is happening with so much delay. Meanwhile if user navigating to any other cards without waiting focus is misbehaving.
- when navigating to other screen after clicking card , clicking back to previous , same card gets focus with delay of 4 to 6 seconds.(we are storing focus index value in redux,before navigating to other screen)
4. Expected Behavior
We need onFocus to trigger faster so the related UI functionalities can be handled without delay
4.a Possible Root Cause & Temporary Workaround
This issue has already been raised with the community. The Amazon team suggested four possible causes and corresponding inputs. We have implemented all the suggested changes.
After applying these fixes, the focus delay has reduced slightly (by ~1 second). However, the onFocus callback is still getting delayed by more than 6 seconds when shifting focus between carousel cards*
following are the inputs givn by amazon.
1.*Carousel Scroll Delay: itemScrollDelay: 0.3 adds 300ms delay to focus event{}
-we removed itemScrollDelay property
2.Animation Wrappers: requestAnimationFrame() wrapping focus handlers might add frame delay
-removed requestAnimationFrame() property
3.Heavy Rendering: maxToRenderPerBatch={24} might casue UI blocking during focus change
- maxToRenderPerBatch -reduced value 24 to 11
4.Animated Scrolling: FlashList animated: true might delay scroll-to-index operation
- removed animation in flashlist
6. Environment
- SDK Version: 0.20.3719
7. Example Code Snippet:
The implementation code will be shared directly with our Amazon representative