Focusing issue on hidden (display : none) element

[alham0046]

Describe the bug
Initially the focus is on TvShows tab. When i am navigating to Movies tab and pressing down key, TvShows tab's element should hide but here Movies tab's element is layering over TvShows tab's element and the focus still remains on TvShows tab's element which should be on Movies tab's element. Basically i am trying to make custom top tab navigator. I have used SpatialNavigationRoot in its parent component

To Reproduce

const MainScreen = () => {
    const mainFocus = useSelector((state) => state.currentFocus.focusedType)
    const [tabFocusArr, setTabFocusArr] = useState([])
    useEffect(() => {
        if (!tabFocusArr.includes(mainFocus)) {
            setTabFocusArr([...tabFocusArr, mainFocus])
        }
    }, [mainFocus])

    return (
        <View className='w-full'>
            <SpatialNavigationNode>{tabFocusArr.includes('TvShows') && <View className ={`${mainFocus == 'TvShows' ? 'flex' : 'hidden'}`} ><Tvshows/></View>}</SpatialNavigationNode>
            <SpatialNavigationNode>{tabFocusArr.includes('Movies') && <View className={`${mainFocus == 'Movies' ? 'flex' : 'hidden'}`} ><Movies/></View>}</SpatialNavigationNode>
        </View>
    )
}

export default memo(MainScreen)

Expected behavior
When i focus on videos tab the photos tab's element and when i press down it should focus on videos tab's element

Version and OS

• Library version: [e.g. 1.0.0]
• React Native version: [e.g. 0.76.3]
• OS [tvOS]

[pierpo]

Hi!

I do not fully understand your issue because I do not understand the layout 😁 What do you mean by pressing down? What is supposed to happen, is your screen beneath your tab bar?
Also, what is your state.currentFocus.focusedType, and how do you update it?

If you can't provide any screenshot, can you do at least a little drawing of your layout? It's quite hard to help otherwise 😄