chore: example of non virtualized manual grid

packages/example/App.tsx

@@ -13,6 +13,7 @@ import { BottomTabBarProps, createBottomTabNavigator } from '@react-navigation/b
 import { ProgramInfo } from './src/modules/program/domain/programInfo';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { ProgramDetail } from './src/pages/ProgramDetail';
+import { NonVirtualizedGridPage } from './src/pages/NonVirtualizedGridPage';
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
@@ -21,6 +22,7 @@ const Tab = createBottomTabNavigator<RootTabParamList>();
 export type RootTabParamList = {
   Home: undefined;
   ProgramGridPage: undefined;
+  NonVirtualizedGridPage: undefined;
 };
 
 export type RootStackParamList = {
@@ -45,6 +47,7 @@ const TabNavigator = () => {
     >
       <Tab.Screen name="Home" component={Home} />
       <Tab.Screen name="ProgramGridPage" component={ProgramGridPage} />
+      <Tab.Screen name="NonVirtualizedGridPage" component={NonVirtualizedGridPage} />
     </Tab.Navigator>
   );
 };

packages/example/src/pages/NonVirtualizedGridPage.tsx

@@ -0,0 +1,66 @@
+import { DefaultFocus, SpatialNavigationNode } from 'react-tv-space-navigation';
+import { Page } from '../components/Page';
+import '../components/configureRemoteControl';
+import { getPrograms } from '../modules/program/infra/programInfos';
+import { useNavigation } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { RootStackParamList } from '../../App';
+import styled from '@emotion/native';
+import { Fragment } from 'react';
+import { scaledPixels } from '../design-system/helpers/scaledPixels';
+import { ProgramNode } from '../modules/program/view/ProgramNode';
+
+export const NonVirtualizedGridPage = () => {
+  return (
+    <Page>
+      <Container>
+        <SpatialNavigationNode alignInGrid>
+          <Fragment>
+            <DefaultFocus>
+              <ShortProgramList />
+            </DefaultFocus>
+            <ShortProgramList />
+            <ShortProgramList />
+          </Fragment>
+        </SpatialNavigationNode>
+      </Container>
+    </Page>
+  );
+};
+
+const ShortProgramList = () => {
+  const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+  const programs = getPrograms().slice(0, 6);
+  return (
+    <SpatialNavigationNode orientation="horizontal">
+      <ListContainer>
+        {programs.map((program) => {
+          return (
+            <ProgramNode
+              programInfo={program}
+              onSelect={() => navigation.push('ProgramDetail', { programInfo: program })}
+              key={program.id}
+            />
+          );
+        })}
+      </ListContainer>
+    </SpatialNavigationNode>
+  );
+};
+
+const ListContainer = styled.View(({ theme }) => ({
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  justifyContent: 'center',
+  gap: theme.spacings.$4,
+  padding: theme.spacings.$4,
+}));
+
+const Container = styled.View({
+  backgroundColor: '#222',
+  margin: 'auto',
+  borderRadius: scaledPixels(20),
+  padding: scaledPixels(30),
+  justifyContent: 'center',
+  alignItems: 'center',
+});