chore(example): add async focus example

Author: Pierre Poupin

packages/example/App.tsx

@@ -18,6 +18,7 @@ import { GridWithLongNodesPage } from './src/pages/GridWithLongNodesPage';
 import { useTVPanEvent } from './src/components/PanEvent/useTVPanEvent';
 import { SpatialNavigationDeviceTypeProvider } from '../lib/src/spatial-navigation/context/DeviceContext';
 import { ListWithVariableSize } from './src/pages/ListWithVariableSize';
+import { AsynchronousContent } from './src/pages/AsynchronousContent';
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
@@ -29,6 +30,7 @@ export type RootTabParamList = {
   NonVirtualizedGridPage: undefined;
   GridWithLongNodesPage: undefined;
   ListWithVariableSize: undefined;
+  AsynchronousContent: undefined;
 };
 
 export type RootStackParamList = {
@@ -57,6 +59,7 @@ const TabNavigator = () => {
         <Tab.Screen name="NonVirtualizedGridPage" component={NonVirtualizedGridPage} />
         <Tab.Screen name="GridWithLongNodesPage" component={GridWithLongNodesPage} />
         <Tab.Screen name="ListWithVariableSize" component={ListWithVariableSize} />
+        <Tab.Screen name="AsynchronousContent" component={AsynchronousContent} />
       </Tab.Navigator>
     </MenuProvider>
   );

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

@@ -59,6 +59,7 @@ const menuItems: Record<keyof RootTabParamList, MenuItems> = {
     icon: 'LayoutDashboard',
   },
   ListWithVariableSize: { label: 'List with variable size', icon: 'LayoutDashboard' },
+  AsynchronousContent: { label: 'Asynchronous content', icon: 'Timer' },
 };
 
 export const Menu = ({ state, navigation }: BottomTabBarProps) => {

packages/example/src/design-system/helpers/IconsCatalog.ts

@@ -1,10 +1,11 @@
-import { Grid3X3, Home, LayoutDashboard, LayoutGrid } from 'lucide-react-native';
+import { Grid3X3, Home, LayoutDashboard, LayoutGrid, Timer } from 'lucide-react-native';
 
 export const iconsCatalog = {
   Home: Home,
   Grid3X3: Grid3X3,
   LayoutGrid: LayoutGrid,
   LayoutDashboard: LayoutDashboard,
+  Timer: Timer,
 };
 
 export type IconName = keyof typeof iconsCatalog;

packages/example/src/pages/AsynchronousContent.tsx

@@ -0,0 +1,65 @@
+import { SpatialNavigationNode, SpatialNavigationView } from 'react-tv-space-navigation';
+import { Page } from '../components/Page';
+import { Button } from '../design-system/components/Button';
+import { Typography } from '../design-system/components/Typography';
+import { Box } from '../design-system/components/Box';
+import { Spacer } from '../design-system/components/Spacer';
+import { useState } from 'react';
+import { ActivityIndicator } from 'react-native';
+import styled from '@emotion/native';
+
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export const AsynchronousContent = () => {
+  const [shouldShow, setShouldShow] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const toggle = async () => {
+    if (isLoading) return;
+
+    setIsLoading(true);
+    await sleep(1000);
+    setIsLoading(false);
+
+    setShouldShow((prev) => !prev);
+  };
+
+  return (
+    <Page>
+      <Box padding={'$8'}>
+        <Typography>
+          {
+            'Here are some details about a common pitfall with this library: how do I show/hide focusable elements properly?'
+          }
+        </Typography>
+        <Typography>{'Use this button to trigger an asynchronous show/hide'}</Typography>
+        <SpatialNavigationView direction="horizontal">
+          <Button label={shouldShow ? 'Hide' : 'Show'} onSelect={toggle} />
+          <Spacer gap="$8" direction="horizontal" />
+          {isLoading && <ActivityIndicator color="white" size={'large'} />}
+        </SpatialNavigationView>
+        <Spacer gap="$8" />
+        <Typography>
+          {
+            'Then, try out the focus below. Focus should not be messed up after asynchronous modifications :)'
+          }
+        </Typography>
+        <StyledNavigationRow direction="horizontal">
+          <Button label="First button" />
+          <SpatialNavigationNode>
+            {shouldShow && <Button label="Second button (asynchronously showed)" />}
+          </SpatialNavigationNode>
+          <Button label="Third button" />
+        </StyledNavigationRow>
+
+        <Typography>Check out the code to understand how it is done.</Typography>
+      </Box>
+    </Page>
+  );
+};
+
+const StyledNavigationRow = styled(SpatialNavigationView)({
+  gap: 40,
+});