Open Veryyapeee opened 1 month ago
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 😊
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
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>
);
};
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
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
Additional context Add any other context about the problem here.