feat: add new Page component

bamlab · Jul 13, 2023 · 4eabd4a · 4eabd4a
1 parent b9bbecd
commit 4eabd4a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/packages/rabbit-tv-with-rn-tvos/src/components/Page.tsx b/packages/rabbit-tv-with-rn-tvos/src/components/Page.tsx
@@ -0,0 +1,10 @@
+import { useIsFocused } from '@react-navigation/native';
+import { ReactNode } from 'react';
+import { SpatialNavigationRoot } from 'react-native-tv-spatial-navigation/src';
+
+type Props = { children: ReactNode };
+
+export const Page = ({ children }: Props) => {
+  const isFocused = useIsFocused();
+  return <SpatialNavigationRoot isActive={isFocused}>{children}</SpatialNavigationRoot>;
+};
diff --git a/packages/rabbit-tv-with-rn-tvos/src/pages/Home.tsx b/packages/rabbit-tv-with-rn-tvos/src/pages/Home.tsx
@@ -1,24 +1,23 @@
-import { useIsFocused, useNavigation } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { StyleSheet, View } from 'react-native';
 import {
   DefaultFocus,
-  SpatialNavigationRoot,
   SpatialNavigationScrollView,
   SpatialNavigationView,
 } from 'react-native-tv-spatial-navigation/src';
 import { RootStackParamList } from '../../App';
+import { Page } from '../components/Page';
 import { SimpleNode } from '../components/SimpleNode';
 import { VirtualizedColumn, VirtualizedRow } from '../components/VirtualizedSpatialList';
 import '../components/configureRemoteControl';
 import { Spacer } from '../design-system/components/Spacer';
 
 export const Home = () => {
-  const isFocused = useIsFocused();
   const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
   return (
-    <SpatialNavigationRoot isActive={isFocused}>
+    <Page>
       <DefaultFocus>
         <SpatialNavigationScrollView offsetFromStart={140}>
           <View style={styles.container}>
@@ -58,7 +57,7 @@ export const Home = () => {
           <Spacer gap="$12" />
         </SpatialNavigationScrollView>
       </DefaultFocus>
-    </SpatialNavigationRoot>
+    </Page>
   );
 };