bamlab / bamlab/react-tv-space-navigation
Add possibility to lock all Roots for Overlay usage
- 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