From 2727316bf6d654d544f859df36fd959b8a76f6b1 Mon Sep 17 00:00:00 2001
From: Pierre Poupin <pierrep@bam.tech>
Date: Wed, 11 Sep 2024 17:29:12 +0200
Subject: [PATCH] chore(example): more GoBackConfiguration so that each page
 has its own

Otherwise we can't catch hardware back press properly
---
 packages/example/App.tsx                                       | 3 ---
 packages/example/src/components/GoBackConfiguration.tsx        | 3 +++
 packages/example/src/components/Page.tsx                       | 2 ++
 .../components/remote-control/RemoteControlManager.android.ts  | 1 +
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/example/App.tsx b/packages/example/App.tsx
index 46982270..e9ae33ef 100644
--- 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
index 47f0255d..3a8d10ca 100644
--- 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
index 895511ea..dd6c5164 100644
--- 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
index 200fb36f..6e935c13 100644
--- 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) {