-
Notifications
You must be signed in to change notification settings - Fork 106
Description
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.