bamlab / bamlab/react-tv-space-navigation

Add possibility to lock all Roots for Overlay usage

Open
#191 4 comments 3 reactions 0 assignees View on GitHub
question
Dominant language
TypeScript
Stars
319
Forks
46
PR merge metrics
No merged PRs in 30d

Description

When i create a modal and use Overlay with locker, it locks only 1 parent Root, so if I have some modal which should be presented on all screens (like network error modal) I can not use Overlay on App.tsx because all child components have their own Root and it doesn't lock

```javascript
import { useCallback, useEffect } from 'react'
import { useLockSpatialNavigation } from 'react-tv-space-navigation'

import { useGoBack } from '@/app/navigation/hooks'

interface UseLockProps {
isOverlayVisible: boolean
hideOverlay: () => void
}

export const useLockOverlay = ({ isOverlayVisible, hideOverlay }: UseLockProps) => {
useLockParentSpatialNavigator(isOverlayVisible)
usePreventNavigationGoBack(isOverlayVisible, hideOverlay)
}

const useLockParentSpatialNavigator = (isOverlayVisible: boolean) => {
const { lock, unlock } = useLockSpatialNavigation()
useEffect(() => {
if (isOverlayVisible) {
lock()
return () => {
unlock()
}
}
}, [isOverlayVisible, lock, unlock])
}

const usePreventNavigationGoBack = (isOverlayVisible: boolean, hideOverlay: () => void) => {
const hideOverlayListener = useCallback(() => {
if (isOverlayVisible) {
hideOverlay()
return true
}
return false
}, [isOverlayVisible, hideOverlay])
useGoBack(hideOverlayListener)
}

// Overlay.tsx
export const Overlay = ({ children }: OverlayProps) => {
return (


{children}


)
}

// Modal.tsx
export const Modal = ({ isModalVisible, hideModal, children }: Props) => {
useLockOverlay({ isOverlayVisible: isModalVisible, hideOverlay: hideModal })

return (

{children}

)
}

// RootStack.tsx
export function RootStack() {
const { isNetworkModalVisible, setIsNetworkModalVisible } = useNetworkConnection()

return (



// something else

setIsNetworkModalVisible(false)}
/>

)
}
```

It lock navigation only for parent SpatialNavigationRoot but all SpatialNavigationRoot inside TabNavigator screens doesn't lock and navigation works above Modal

How can we manage such situation? Maybe it is possible to create locker for all Roots and navigate only inside Overlay?

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reading useLockSpatialNavigation and the usage shown in Overlay.tsx, Modal.tsx, and RootStack.tsx. Trace how SpatialNavigationRoot instances are registered and locked, then define how an overlay should affect nested roots and how navigation should be limited while it is visible.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, react-native, typescript
Domain
frontend, mobile
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.