When navigation elements are conditionally rendered or part of a dynamic list, the library's internal Left-Right-Up-Down (LRUD) order can become corrupted. This happens because the library relies on React's rendering order to determine spatial relationships. If an element is removed and re-added, it may be registered in the wrong position relative to other elements.
To prevent this, always wrap conditionally rendered elements or elements within a dynamic list with a <SpatialNavigationNode /> that remains present in the React tree even when its children change.
Conditional Visibility
Instead of rendering an element directly based on a condition, wrap the condition inside a <SpatialNavigationNode /> so the node itself is never removed from the tree.
Dynamic Lists
When mapping over a list that can change, wrap each element in a <SpatialNavigationNode /> using the list index as the key. While using indices as keys is generally discouraged in React, it is necessary here to ensure the SpatialNavigationNode components remain stable even if the list items move, preserving the correct spatial order.
// Handling conditional visibility
// DON'T ❌
<View>
<Text>Title</Text>
{isVisible && <Element />}
</View>
// DO ✅
<View>
<Text>Title</Text>
<SpatialNavigationNode>{isVisible && <Element />}</SpatialNavigationNode>
</View>
// Handling dynamic lists
// DON'T ❌
<View>
{elements.map((element) => <Element element={element} />)}
</View>
// DO ✅
<View>
{elements.map((element, index) =>
<SpatialNavigationNode key={index}>
<Element element={element} />
</SpatialNavigationNode>
)}
</View>
