Focus Navigation Issue - Unable to Move Focus from react-native-snap-carousel to Tabmenu

Vega Open Beta Bug Reports
1

:backhand_index_pointing_right: Bug Description

1. Summary
When using react-native-snap-carousel , focus navigation does not work as expected. Pressing “Up” from a carousel item does not move focus to the Tabmenu above the carousel. Instead, focus gets stuck inside the carousel, blocking navigation.

App Name: Frndlytv

Bug Severity:
:check_box_with_check: Blocks current development

2. Steps to Reproduce

  1. Launch the app

  2. Navigate to the home screen with a Tabmenu at the top and a react-native-snap-carousel below it.

  3. Focus on any item in the carousel.

  4. Press the “Up” key on the remote.

3. Observed Behavior

  • Focus does not move to the Tabmenu.

  • Focus remains trapped inside the carousel.

4. Expected Behavior

  • Pressing “Up” from a carousel item should transfer focus directly to the Tabmenu above.

4.a Possible Root Cause & Temporary Workaround

  • Possible Root Cause: react-native-snap-carousel does not expose nextFocusUp / nextFocusDown support for navigation.

  • Workarounds Tried:

    • Wrapped carousel in TVFocusGuideView → no effect.

    • Handled focus manually via useTVEventHandler → partial workaround (not reliable).

    • Tried hasTVPreferredFocus → only works once, not consistent after navigation.

5. Logs or Crash Report
No crashes observed. Issue is related to focus navigation.

6. Environment

  • SDK Version: 0.20.3207

  • App State: Foreground

  • OS Information (Fire TV):

    cat /etc/os-release
NAME="Ubuntu"
VERSION="20.04.6 LTS (Focal Fossa)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 20.04.6 LTS"
VERSION_ID="20.04"
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
VERSION_CODENAME=focal
UBUNTU_CODENAME=focal

7. Example Code Snippet / Screenshots / Screengrabs

<Tabmenu navigation={navigation} ref={tabButtonsRef} />

<TVFocusGuideView trapFocusLeft trapFocusRight style={styles.BannerGridContainer}>
  <Carousel
    ref={bannerRef}
    data={bannerdatas[0].data}
    renderItem={renderItem}
    sliderWidth={viewportWidth}
    itemWidth={700}
    loop
    autoplay={isautoPlay}
    onSnapToItem={handleSnapToItem}
    scrollEnabled={false}
    hasTVPreferredFocus={preferredFocus}
  />
</TVFocusGuideView>

Screenshots: [Attach if possible]

:backhand_index_pointing_right: Playback Issues

N/A – This is not a playback-related issue.

:backhand_index_pointing_right: Additional Context

  • Prevents from navigating between main UI elements using the remote.

  • Blocks current development since focus navigation is essential .

“Please find the Tabmenu.tsx file attached for reference. I would appreciate your assistance and providing the appropriate solution.”

Tabmenu.tsx (10.0 KB)

Regards,
Vittal maradi

3

Hi @vittalmaradi ,

Could you please share the vpkg with your Amazon contact to further help us investigate the issue?

Thanks,
Rohit

4

Hi @Amz_Rsk

We have shared the VPKG file with our Amazon contact on Slack.

Thanks,
Vittal Maradi

5

Hi Team,
Just checking in to see if there are any updates on this ticket.

6

Hi Team,

would like to follow up on this. Could you plz expedite the solution as it is impacting the delivery.