Skip to content

Moving focus to the popup on react-native-tvos #197

@shayypy

Description

@shayypy

Hi there, I'd like to create a popup view with some touchables in it that are automatically navigated to once the popup opens. Unfortunately I can't seem to get this to work despite my efforts. I am using the react-native modal method but perhaps this would fare better with a different one? I have other react-native modals (i.e. <Modal />) in my project which take focus automatically so I'm not really sure why this isn't working.

My popover:

<Popover
  popoverStyle={tw`bg-gray-900 rounded-lg px-2 py-1 shadow-lg flex flex-col gap-px`}
  backgroundStyle={tw`bg-black/10`}
  mode={PopoverMode.RN_MODAL}
  isVisible={popoverOpen}
  onRequestClose={() => setPopoverOpen(false)}
  placement={PopoverPlacement.LEFT}
  from={
    <Pressable
      style={({ focused }) =>
        tw.style("p-3 rounded-full", {
          "bg-gray-200/30": focused,
        })
      }
      onPress={() => {
        setPopoverOpen(true);
      }}
    >
      <Ionicons
        name="logo-closed-captioning"
        style={tw`text-lg text-white`}
      />
    </Pressable>
  }
>
  <TVFocusGuideView
    autoFocus
    destinations={[firstPressableRef.current]}
  >
    <Pressable
      ref={firstPressableRef}
      style={({ focused }) =>
        tw.style("px-4 py-3", { "bg-white": focused })
      }
      onPress={() => {}}
    >
      <Text
        style={tw`text-sm text-gray-100 font-medium`}
        numberOfLines={1}
      >
        Pressable
      </Text>
    </Pressable>
  </TVFocusGuideView>
</Popover>

On opening the popover, I cannot interact with the rest of my app by navigating with arrow keys, but clearly the modal is not in focus either since the Pressable does not indicate that it is focused (background isn't white). You can see that I have tried to use TVFocusGuideView - I have also tried using hasTVPreferredFocus and manually calling requestTVFocus().

Any help is appreciated! Hoping this is possible, since I couldn't actually find a use case or example of a touchable popover for this project.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions