SpatialNavigationVirtualizedList boundaries

[Veryyapeee]

Describe the bug Currently due to the fact that SpatialNavigationVirtualizedList is using translate, I can't really add any boundaries

I'd like my list to be for example width of 500, and I don't want the scrolled elements to go beyond that width, simply adding styles is not enough

Also playing around with overflow: 'hidden' is not causing the perfect result .

To Reproduce

<SpatialNavigationVirtualizedList style={{width: 500}} />

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Version and OS

• Library version: [e.g. 1.0.0]
• React Native version: [e.g. 0.71.2]
• OS [e.g. Android, web]

Additional context Add any other context about the problem here.

[pierpo]

Hey! I think I managed to do that already. Have you tried putting the virtualized list inside a parent view that has width 500?

I realize that something is not very clear: the virtualized list will compute the parent's width and force its width. You can't change its width by setting the style 😊

[Veryyapeee]

Hey! I think I managed to do that already. Have you tried putting the virtualized list inside a parent view that has width 500?

I realize that something is not very clear: the virtualized list will compute the parent's width and force its width. You can't change its width by setting the style 😊

Yup, I've tried, and seems like it's not working, the only thing that was working was adding the overflow: hidden to the parent element, but this was kinda tricky, and wasn't working in every case, and was breaking the UI in some cases

[pierpo]

I just tried on the sample app, isn't this what you want to achieve? (tried on the web version)

diff --git a/packages/example/src/modules/program/view/ProgramListWithTitle.tsx b/packages/example/src/modules/program/view/ProgramListWithTitle.tsx
index 44ccda9..758126a 100644
--- a/packages/example/src/modules/program/view/ProgramListWithTitle.tsx
+++ b/packages/example/src/modules/program/view/ProgramListWithTitle.tsx
@@ -5,6 +5,7 @@ import { Typography } from '../../../design-system/components/Typography';
 import { ProgramsRow } from './ProgramList';
 import { ProgramsRowVariableSize } from './ProgramListVariableSize';
 import { SpatialNavigationVirtualizedListRef } from '../../../../../lib/src/spatial-navigation/types/SpatialNavigationVirtualizedListRef';
+import { View } from 'react-native';

 type Props = {
   title: string;
@@ -18,7 +19,9 @@ export const ProgramListWithTitle = ({ title, listRef }: Props) => {
         {title}
       </Typography>
       <Spacer direction="vertical" gap="$2" />
-      <ProgramsRow listRef={listRef ?? null} />
+      <View style={{ width: 1000 }}>
+        <ProgramsRow listRef={listRef ?? null} />
+      </View>
     </Box>
   );
 };