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

Otherwise we can't catch hardware back press properly
bamlab · Sep 13, 2024 · 2727316 · 2727316
1 parent 2cde6ad
commit 2727316
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 3 deletions.
diff --git a/packages/example/App.tsx b/packages/example/App.tsx
@@ -1,7 +1,6 @@
 import { ThemeProvider } from '@emotion/react';
 import { NavigationContainer } from '@react-navigation/native';
 import { useWindowDimensions } from 'react-native';
-import { GoBackConfiguration } from './src/components/GoBackConfiguration';
 import { theme } from './src/design-system/theme/theme';
 import { Home } from './src/pages/Home';
 import { ProgramGridPage } from './src/pages/ProgramGridPage';
@@ -78,8 +77,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
@@ -4,6 +4,7 @@ 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 { 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) {