wip

packages/example/App.tsx

@@ -64,7 +64,7 @@ const TabNavigator = () => {
   );
 };
 
-function App(): JSX.Element {
+function App() {
   useTVPanEvent();
   const { height, width } = useWindowDimensions();
   const areFontsLoaded = useFonts();

packages/example/src/components/Menu/Menu.tsx

@@ -112,7 +112,9 @@ export const Menu = ({ state, navigation }: BottomTabBarProps) => {
                   return (
                     <Fragment key={route.key}>
                       <MenuItem
+                        // @ts-expect-error TODO fix this type error
                         label={menuItems[route.name].label}
+                        // @ts-expect-error TODO fix this type error
                         icon={menuItems[route.name].icon}
                         isMenuOpen={isMenuOpen}
                         isActive={state.index === index}

packages/example/src/components/PanEvent/PanEvent.ts

@@ -1,7 +1,7 @@
 import { getGridCoordinates, moveFocus } from './PanEvent.utils';
 
 class PanEvent {
-  private orientation = undefined;
+  private orientation: string | undefined = undefined;
   private lastIndex = 0;
 
   reset = () => {

packages/example/src/components/PanEvent/PanEvent.utils.ts

@@ -4,7 +4,11 @@ import { SupportedKeys } from '../remote-control/SupportedKeys';
 import PanEvent from './PanEvent';
 import { EMIT_KEY_DOWN_INTERVAL, GRID_SIZE, NUMBER_OF_COLUMNS } from './PanEvent.constants';
 
-export const getGridCoordinates = (x: number, y: number, panEvent: PanEvent): number => {
+export const getGridCoordinates = (
+  x: number,
+  y: number,
+  panEvent: PanEvent,
+): number | undefined => {
   const gridElementSize = GRID_SIZE / NUMBER_OF_COLUMNS;
 
   const xIndex = Math.floor((x + gridElementSize / 2) / gridElementSize);

packages/example/src/components/VirtualizedSpatialGrid.tsx

@@ -8,6 +8,7 @@ import { scaledPixels } from '../design-system/helpers/scaledPixels';
 import { theme } from '../design-system/theme/theme';
 import { Header } from '../modules/header/view/Header';
 import { BottomArrow, TopArrow } from '../design-system/components/Arrows';
+import { ProgramInfo } from '../modules/program/domain/programInfo';
 
 const NUMBER_OF_ROWS_VISIBLE_ON_SCREEN = 2;
 const NUMBER_OF_RENDERED_ROWS = NUMBER_OF_ROWS_VISIBLE_ON_SCREEN + 5;
@@ -16,7 +17,9 @@ const INFINITE_SCROLL_ROW_THRESHOLD = 2;
 
 export const VirtualizedSpatialGrid = ({ containerStyle }: { containerStyle?: ViewStyle }) => {
   const renderItem = useCallback(
-    ({ item, index }) => <ProgramNode programInfo={item} label={index?.toString?.()} />,
+    ({ item, index }: { item: ProgramInfo; index: number }) => (
+      <ProgramNode programInfo={item} label={index?.toString?.()} />
+    ),
     [],
   );
 

packages/example/src/components/remote-control/CustomEventEmitter.ts

@@ -29,14 +29,18 @@ export default class CustomEventEmitter<Events extends Record<EventType, unknown
   off = <Key extends keyof Events>(eventType: Key, handler?: Handler<Events[keyof Events]>) => {
     this.handlers.set(
       eventType,
+      // @ts-expect-error TODO fix the type error
       this.handlers.get(eventType).filter((h) => h !== handler),
     );
   };
 
   emit = <Key extends keyof Events>(eventType: Key, evt?: Events[Key]) => {
     const eventTypeHandlers = this.handlers.get(eventType);
+    // @ts-expect-error TODO fix the type error
     for (let index = eventTypeHandlers.length - 1; index >= 0; index--) {
+      // @ts-expect-error TODO fix the type error
       const handler = eventTypeHandlers[index];
+      // @ts-expect-error TODO fix the type error
       if (handler(evt)) {
         return;
       }

packages/example/src/hooks/useKey.ts

@@ -13,7 +13,9 @@ export const useKey = (key: SupportedKeys, callback: (pressedKey: SupportedKeys)
       if (actualKey !== key) return;
       return callback(key);
     };
+    // @ts-expect-error TODO fix the type error
     RemoteControlManager.addKeydownListener(remoteControlListener);
+    // @ts-expect-error TODO fix the type error
     return () => RemoteControlManager.removeKeydownListener(remoteControlListener);
   }, [key, callback]);
 };

packages/example/src/modules/header/view/Header.tsx

@@ -25,6 +25,7 @@ interface HeaderProps {
 }
 
 export const Header = ({ title, description, verticalSize }: HeaderProps) => {
+  // @ts-expect-error TODO fix type error
   const imageSource = images[Math.floor(Math.random() * 9)];
   return (
     <SpatialNavigationNode orientation="horizontal">

packages/example/src/modules/program/view/ProgramList.tsx

@@ -104,8 +104,10 @@ export const ProgramList = React.forwardRef<View, ProgramListProps>(
           numberOfRenderedItems={WINDOW_SIZE}
           numberOfItemsVisibleOnScreen={NUMBER_OF_ITEMS_VISIBLE_ON_SCREEN}
           onEndReachedThresholdItemsNumber={NUMBER_OF_ITEMS_VISIBLE_ON_SCREEN}
+          // @ts-expect-error TODO change the type from ReactElement to ReactNode in the core
           descendingArrow={isActive ? <LeftArrow /> : null}
           descendingArrowContainerStyle={styles.leftArrowContainer}
+          // @ts-expect-error TODO change the type from ReactElement to ReactNode in the core
           ascendingArrow={isActive ? <RightArrow /> : null}
           ascendingArrowContainerStyle={styles.rightArrowContainer}
           ref={(elementRef) => {
@@ -129,7 +131,7 @@ export const ProgramsRow = ({
   containerStyle?: object;
   variant?: 'normal' | 'variable-size';
   listSize?: number;
-  parentRef?: MutableRefObject<SpatialNavigationVirtualizedListRef>;
+  parentRef?: MutableRefObject<SpatialNavigationVirtualizedListRef | null>;
   data?: ProgramInfo[];
 }) => {
   const theme = useTheme();

packages/example/src/modules/program/view/ProgramListWithTitle.tsx

@@ -8,7 +8,7 @@ import { SpatialNavigationVirtualizedListRef } from '../../../../../lib/src/spat
 type Props = {
   title: string;
   listSize?: number;
-  parentRef?: MutableRefObject<SpatialNavigationVirtualizedListRef>;
+  parentRef?: MutableRefObject<SpatialNavigationVirtualizedListRef | null>;
 };
 
 export const ProgramListWithTitle = ({ title, parentRef, listSize }: Props) => {

packages/example/src/pages/AsynchronousContent.tsx

@@ -8,7 +8,7 @@ import { useState } from 'react';
 import { ActivityIndicator } from 'react-native';
 import styled from '@emotion/native';
 
-function sleep(ms) {
+function sleep(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
@@ -49,7 +49,7 @@ export const AsynchronousContent = () => {
         <StyledNavigationRow direction="horizontal">
           <Button label="First button" />
           <SpatialNavigationNode>
-            {shouldShow && <Button label="Second button (asynchronously showed)" />}
+            {shouldShow ? <Button label="Second button (asynchronously showed)" /> : <></>}
           </SpatialNavigationNode>
           <Button label="Third button" />
         </StyledNavigationRow>

packages/example/src/pages/GridWithLongNodesPage.tsx

@@ -23,9 +23,9 @@ import { BottomArrow, TopArrow } from '../design-system/components/Arrows';
 const HEADER_SIZE = scaledPixels(400);
 
 export const GridWithLongNodesPage = () => {
-  const firstItemRef = useRef<SpatialNavigationNodeRef>(null);
-  const lastItemRef = useRef<SpatialNavigationNodeRef>(null);
-  const parentRef = useRef<SpatialNavigationVirtualizedListRef>(null);
+  const firstItemRef = useRef<SpatialNavigationNodeRef | null>(null);
+  const lastItemRef = useRef<SpatialNavigationNodeRef | null>(null);
+  const parentRef = useRef<SpatialNavigationVirtualizedListRef | null>(null);
 
   return (
     <Page>
@@ -56,13 +56,13 @@ export const GridWithLongNodesPage = () => {
               <Button
                 label="Go to first"
                 onSelect={() => {
-                  parentRef.current.focus(0);
+                  parentRef.current?.focus(0);
                 }}
               />
               <Button
                 label="Go to last"
                 onSelect={() => {
-                  parentRef.current.focus(999);
+                  parentRef.current?.focus(999);
                 }}
               />
             </Row>
@@ -118,14 +118,14 @@ const ButtonRow = ({
   firstItemRef,
   lastItemRef,
 }: {
-  firstItemRef: MutableRefObject<SpatialNavigationNodeRef>;
-  lastItemRef: MutableRefObject<SpatialNavigationNodeRef>;
+  firstItemRef: MutableRefObject<SpatialNavigationNodeRef | null>;
+  lastItemRef: MutableRefObject<SpatialNavigationNodeRef | null>;
 }) => {
   return (
     <SpatialNavigationNode orientation="horizontal">
       <ListContainer>
-        <Button label="Go to first item" onSelect={() => firstItemRef.current.focus()} />
-        <Button label="Go to last item" onSelect={() => lastItemRef.current.focus()} />
+        <Button label="Go to first item" onSelect={() => firstItemRef.current?.focus()} />
+        <Button label="Go to last item" onSelect={() => lastItemRef.current?.focus()} />
       </ListContainer>
     </SpatialNavigationNode>
   );

packages/example/src/utils/throttle.ts

@@ -1,7 +1,10 @@
-export const throttle = (callback, delay) => {
+export const throttle = (
+  callback: { (): void; (...arg0: unknown[]): void },
+  delay: number | undefined,
+) => {
   let wait = false;
 
-  return (...args) => {
+  return (...args: unknown[]) => {
     if (wait) {
       return;
     }