chore(example): more GoBackConfiguration so that each page has its own

Otherwise we can't catch hardware back press properly
bamlab · Sep 11, 2024 · 6144737 · 6144737
1 parent 9b69e78
commit 6144737
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 3 deletions.
diff --git a/packages/example/App.tsx b/packages/example/App.tsx
@@ -78,8 +78,6 @@ function App(): JSX.Element {
     <NavigationContainer>
       <ThemeProvider theme={theme}>
         <SpatialNavigationDeviceTypeProvider>
-          <GoBackConfiguration />
-
           <Container width={width} height={height}>
             <Stack.Navigator
               screenOptions={{

diff --git a/packages/example/src/components/GoBackConfiguration.tsx b/packages/example/src/components/GoBackConfiguration.tsx
@@ -19,6 +19,9 @@ export const GoBackConfiguration = () => {
 
   const goBackOnBackPress = useCallback(
     (pressedKey: SupportedKeys) => {
+      if (!navigation.isFocused) {
+        return false;
+      }
       if (pressedKey !== SupportedKeys.Back) return false;
       if (navigation.canGoBack()) {
         navigation.goBack();

diff --git a/packages/example/src/components/Page.tsx b/packages/example/src/components/Page.tsx
@@ -3,7 +3,8 @@ import { useIsFocused } from '@react-navigation/native';
 import { ReactNode, useCallback, useEffect } from 'react';
 import { SpatialNavigationRoot, useLockSpatialNavigation } from 'react-tv-space-navigation';
 import { useMenuContext } from './Menu/MenuContext';
-import { Keyboard } from 'react-native';
+import { BackHandler, Keyboard } from 'react-native';
+import { GoBackConfiguration } from './GoBackConfiguration';
 
 type Props = { children: ReactNode };
 
@@ -51,6 +52,7 @@ export const Page = ({ children }: Props) => {
       isActive={isActive}
       onDirectionHandledWithoutMovement={onDirectionHandledWithoutMovement}
     >
+      <GoBackConfiguration />
       <SpatialNavigationKeyboardLocker />
       {children}
     </SpatialNavigationRoot>

diff --git a/packages/example/src/components/remote-control/RemoteControlManager.android.ts b/packages/example/src/components/remote-control/RemoteControlManager.android.ts
@@ -19,6 +19,7 @@ class RemoteControlManager implements RemoteControlManagerInterface {
       66: SupportedKeys.Enter,
       23: SupportedKeys.Enter,
       67: SupportedKeys.Back,
+      4: SupportedKeys.Back,
     }[keyEvent.keyCode];
 
     if (!mappedKey) {