From f847f291f394edb46753acd52cbe58fe977dfd3c Mon Sep 17 00:00:00 2001
From: Thomas Renaud <thomasre@bam.tech>
Date: Tue, 6 Feb 2024 11:44:59 +0100
Subject: [PATCH 01/16] Add modal with buttons

---
 package.json                                  |  1 +
 .../src/components/modals/GenericModal.tsx    | 47 +++++++++++++++++++
 packages/example/src/pages/ProgramDetail.tsx  | 13 +++++
 yarn.lock                                     | 25 +++++++++-
 4 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 packages/example/src/components/modals/GenericModal.tsx

diff --git a/package.json b/package.json
index 103e05c4..bc391b39 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "@react-navigation/bottom-tabs": "^6.5.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-native-modal": "^13.0.1",
     "react-native-web": "^0.19.6"
   },
   "resolutions": {
diff --git a/packages/example/src/components/modals/GenericModal.tsx b/packages/example/src/components/modals/GenericModal.tsx
new file mode 100644
index 00000000..4b90e412
--- /dev/null
+++ b/packages/example/src/components/modals/GenericModal.tsx
@@ -0,0 +1,47 @@
+import styled from '@emotion/native';
+import React from 'react';
+import { View, ModalProps } from 'react-native';
+import { Typography } from '../../design-system/components/Typography';
+import { Spacer } from '../../design-system/components/Spacer';
+
+type CustomModalProps = ModalProps & {
+  isVisible: boolean;
+  children: React.ReactNode;
+  title: string;
+};
+
+export const GenericModal: React.FC<CustomModalProps> = ({ isVisible, children, title }) => {
+  if (!isVisible) return null;
+
+  return (
+    <StyledModal>
+      <ModalContentContainer>
+        <Typography variant="title" fontWeight="strong">
+          {title}
+        </Typography>
+        <Spacer gap="$8" />
+        {children}
+      </ModalContentContainer>
+    </StyledModal>
+  );
+};
+
+const StyledModal = styled(View)({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+const ModalContentContainer = styled(View)({
+  minHeight: 200,
+  minWidth: 200,
+  backgroundColor: 'grey',
+  padding: 32,
+  margin: 16,
+  borderRadius: 16,
+  justifyContent: 'center',
+});
diff --git a/packages/example/src/pages/ProgramDetail.tsx b/packages/example/src/pages/ProgramDetail.tsx
index 95fe4105..8ef54ddb 100644
--- a/packages/example/src/pages/ProgramDetail.tsx
+++ b/packages/example/src/pages/ProgramDetail.tsx
@@ -8,12 +8,15 @@ import { Spacer } from '../design-system/components/Spacer';
 import { Typography } from '../design-system/components/Typography';
 import { ProgramListWithTitle } from '../modules/program/view/ProgramListWithTitle';
 import { Button } from '../design-system/components/Button';
+import { useState } from 'react';
+import { GenericModal } from '../components/GenericModal';
 
 export const ProgramDetail = ({
   route,
 }: {
   route: RouteProp<RootStackParamList, 'ProgramDetail'>;
 }) => {
+  const [isModalVisible, setIsModalVisible] = useState(false);
   const { programInfo } = route.params;
 
   return (
@@ -38,6 +41,16 @@ export const ProgramDetail = ({
               <Spacer gap="$8" />
               {/* eslint-disable-next-line no-console */}
               <Button label="More info" onSelect={() => console.log('More info!')} />
+              <Spacer gap="$8" />
+              {/* eslint-disable-next-line no-console */}
+              <Button label="Choose subtitles" onSelect={() => setIsModalVisible(true)} />
+              <GenericModal isVisible={isModalVisible}>
+                <Button label="English" onSelect={() => setIsModalVisible(false)} />
+                <Spacer direction="horizontal" gap="$8" />
+                <Button label="Spanish" onSelect={() => setIsModalVisible(false)} />
+                <Spacer direction="horizontal" gap="$8" />
+                <Button label="French" onSelect={() => setIsModalVisible(false)} />
+              </GenericModal>
             </Box>
           </DefaultFocus>
         </Container>
diff --git a/yarn.lock b/yarn.lock
index e2a4d7d9..edac257c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14156,7 +14156,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.8.1":
+"prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -14366,6 +14366,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-animatable@npm:1.3.3":
+  version: 1.3.3
+  resolution: "react-native-animatable@npm:1.3.3"
+  dependencies:
+    prop-types: ^15.7.2
+  checksum: eb35821de36ae4eb00f97d99fc22ed79bd017248092ff1299f9d46a7ab946de16d2e6d6bfbf4cab5ef77d0d3bf47684aec761a7670ec7d36aae8d77ab8ddd171
+  languageName: node
+  linkType: hard
+
 "react-native-keyevent-expo-config-plugin@npm:^1.0.49":
   version: 1.0.49
   resolution: "react-native-keyevent-expo-config-plugin@npm:1.0.49"
@@ -14386,6 +14395,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-modal@npm:^13.0.1":
+  version: 13.0.1
+  resolution: "react-native-modal@npm:13.0.1"
+  dependencies:
+    prop-types: ^15.6.2
+    react-native-animatable: 1.3.3
+  peerDependencies:
+    react: "*"
+    react-native: ">=0.65.0"
+  checksum: 15985fd6aaae7a2134ec1003c63abd384f4a17beabd0a80b74033c98eccee29161aa07150f479373fb43106cfb33b5837b7a4f1d2b721ff03b3727490c830a07
+  languageName: node
+  linkType: hard
+
 "react-native-safe-area-context@npm:^4.8.2":
   version: 4.8.2
   resolution: "react-native-safe-area-context@npm:4.8.2"
@@ -14550,6 +14572,7 @@ __metadata:
     prettier: ^2.8.8
     react: ^18.2.0
     react-dom: ^18.2.0
+    react-native-modal: ^13.0.1
     react-native-web: ^0.19.6
     style-loader: ^3.3.3
     ts-loader: ^9.4.4

From 7a6af9040cb16d3aff7cba6a235980efeeaac52a Mon Sep 17 00:00:00 2001
From: Thomas Renaud <thomasre@bam.tech>
Date: Tue, 6 Feb 2024 16:17:12 +0100
Subject: [PATCH 02/16] Add ability to deactivate a page navigation

---
 packages/example/src/components/Page.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/example/src/components/Page.tsx b/packages/example/src/components/Page.tsx
index 895511ea..408dedaa 100644
--- a/packages/example/src/components/Page.tsx
+++ b/packages/example/src/components/Page.tsx
@@ -5,7 +5,7 @@ import { SpatialNavigationRoot, useLockSpatialNavigation } from 'react-tv-space-
 import { useMenuContext } from './Menu/MenuContext';
 import { Keyboard } from 'react-native';
 
-type Props = { children: ReactNode };
+type Props = { children: ReactNode; isPageActive?: boolean };
 
 /**
  * Locks/unlocks the navigator when the native keyboard is shown/hidden.
@@ -31,11 +31,11 @@ const SpatialNavigationKeyboardLocker = () => {
   return null;
 };
 
-export const Page = ({ children }: Props) => {
+export const Page = ({ children, isPageActive = true }: Props) => {
   const isFocused = useIsFocused();
   const { isOpen: isMenuOpen, toggleMenu } = useMenuContext();
 
-  const isActive = isFocused && !isMenuOpen;
+  const isActive = isFocused && !isMenuOpen && isPageActive;
 
   const onDirectionHandledWithoutMovement = useCallback(
     (movement: Direction) => {

From b60ebc192c9e6a039d73e879db0b7a6bc72b5714 Mon Sep 17 00:00:00 2001
From: Thomas Renaud <thomasre@bam.tech>
Date: Tue, 6 Feb 2024 16:19:35 +0100
Subject: [PATCH 03/16] Add subtitles modal in program details page

---
 .../src/components/modals/SubtitlesModal.tsx  | 57 ++++++++++++++
 packages/example/src/pages/ProgramDetail.tsx  | 78 +++++++++----------
 2 files changed, 96 insertions(+), 39 deletions(-)
 create mode 100644 packages/example/src/components/modals/SubtitlesModal.tsx

diff --git a/packages/example/src/components/modals/SubtitlesModal.tsx b/packages/example/src/components/modals/SubtitlesModal.tsx
new file mode 100644
index 00000000..156234ac
--- /dev/null
+++ b/packages/example/src/components/modals/SubtitlesModal.tsx
@@ -0,0 +1,57 @@
+import { SpatialNavigationRoot } from '../../../../lib/src/spatial-navigation/components/Root';
+import { DefaultFocus } from '../../../../lib/src/spatial-navigation/context/DefaultFocusContext';
+import { Button } from '../../design-system/components/Button';
+import { Spacer } from '../../design-system/components/Spacer';
+import { GenericModal } from './GenericModal';
+
+interface SubtitlesModalProps {
+  isModalVisible: boolean;
+  setIsModalVisible: (isVisible: boolean) => void;
+  setSubtitles: (subtitles: string) => void;
+}
+
+export const SubtitlesModal = ({
+  isModalVisible,
+  setIsModalVisible,
+  setSubtitles,
+}: SubtitlesModalProps) => {
+  return (
+    <SpatialNavigationRoot>
+      <GenericModal isVisible={isModalVisible} title={'Choose subtitles'}>
+        <DefaultFocus>
+          <Button
+            label="English"
+            onSelect={() => {
+              setSubtitles('English');
+              setIsModalVisible(false);
+            }}
+          />
+        </DefaultFocus>
+        <Spacer gap="$8" />
+        <Button
+          label="Spanish"
+          onSelect={() => {
+            setSubtitles('Spanish');
+            setIsModalVisible(false);
+          }}
+        />
+        <Spacer gap="$8" />
+        <Button
+          label="Portuguese"
+          onSelect={() => {
+            setSubtitles('Portuguese');
+            setIsModalVisible(false);
+          }}
+        />
+        <Spacer gap="$8" />
+        <Button
+          label="None"
+          onSelect={() => {
+            setSubtitles('No');
+            setIsModalVisible(false);
+          }}
+        />
+      </GenericModal>
+    </SpatialNavigationRoot>
+  );
+};
diff --git a/packages/example/src/pages/ProgramDetail.tsx b/packages/example/src/pages/ProgramDetail.tsx
index 8ef54ddb..eef33bff 100644
--- a/packages/example/src/pages/ProgramDetail.tsx
+++ b/packages/example/src/pages/ProgramDetail.tsx
@@ -9,7 +9,7 @@ import { Typography } from '../design-system/components/Typography';
 import { ProgramListWithTitle } from '../modules/program/view/ProgramListWithTitle';
 import { Button } from '../design-system/components/Button';
 import { useState } from 'react';
-import { GenericModal } from '../components/GenericModal';
+import { SubtitlesModal } from '../components/modals/SubtitlesModal';
 
 export const ProgramDetail = ({
   route,
@@ -17,47 +17,47 @@ export const ProgramDetail = ({
   route: RouteProp<RootStackParamList, 'ProgramDetail'>;
 }) => {
   const [isModalVisible, setIsModalVisible] = useState(false);
+  const [subtitles, setSubtitles] = useState('No');
   const { programInfo } = route.params;
 
   return (
-    <Page>
-      <Box padding="$5">
-        <Container paddingHorizontal="$15" paddingTop="$10" direction="horizontal">
-          <JumbotronContainer>
-            <Jumbotron source={programInfo.image} />
-          </JumbotronContainer>
-          <DefaultFocus>
-            <Box padding="$15" flex={1}>
-              <Typography variant="title" fontWeight="strong">
-                {programInfo.title}
-              </Typography>
-              <Spacer gap="$15" />
-              <Description variant="body" fontWeight="strong">
-                {programInfo.description}
-              </Description>
-              <Spacer gap="$8" />
-              {/* eslint-disable-next-line no-console */}
-              <Button label="Play" onSelect={() => console.log('Playing!')} />
-              <Spacer gap="$8" />
-              {/* eslint-disable-next-line no-console */}
-              <Button label="More info" onSelect={() => console.log('More info!')} />
-              <Spacer gap="$8" />
-              {/* eslint-disable-next-line no-console */}
-              <Button label="Choose subtitles" onSelect={() => setIsModalVisible(true)} />
-              <GenericModal isVisible={isModalVisible}>
-                <Button label="English" onSelect={() => setIsModalVisible(false)} />
-                <Spacer direction="horizontal" gap="$8" />
-                <Button label="Spanish" onSelect={() => setIsModalVisible(false)} />
-                <Spacer direction="horizontal" gap="$8" />
-                <Button label="French" onSelect={() => setIsModalVisible(false)} />
-              </GenericModal>
-            </Box>
-          </DefaultFocus>
-        </Container>
-        <Spacer gap="$5" />
-        <ProgramListWithTitle title="You may also like..."></ProgramListWithTitle>
-      </Box>
-    </Page>
+    <>
+      <Page isPageActive={!isModalVisible}>
+        <Box padding="$5">
+          <Container paddingHorizontal="$15" paddingTop="$10" direction="horizontal">
+            <JumbotronContainer>
+              <Jumbotron source={programInfo.image} />
+            </JumbotronContainer>
+            <DefaultFocus>
+              <Box padding="$15" flex={1}>
+                <Typography variant="title" fontWeight="strong">
+                  {programInfo.title}
+                </Typography>
+                <Spacer gap="$15" />
+                <Description variant="body" fontWeight="strong">
+                  {programInfo.description}
+                </Description>
+                <Spacer gap="$8" />
+                {/* eslint-disable-next-line no-console */}
+                <Button label="Play" onSelect={() => console.log('Playing!')} />
+                <Spacer gap="$8" />
+                {/* eslint-disable-next-line no-console */}
+                <Button label="More info" onSelect={() => console.log('More info!')} />
+                <Spacer gap="$8" />
+                <Button label={`${subtitles} subtitles`} onSelect={() => setIsModalVisible(true)} />
+              </Box>
+            </DefaultFocus>
+          </Container>
+          <Spacer gap="$5" />
+          <ProgramListWithTitle title="You may also like..."></ProgramListWithTitle>
+        </Box>
+      </Page>
+      <SubtitlesModal
+        isModalVisible={isModalVisible}
+        setIsModalVisible={setIsModalVisible}
+        setSubtitles={setSubtitles}
+      />
+    </>
   );
 };
 

From ae2863fccc7243b9b9eb2cdfa36d27cba27c9fcd Mon Sep 17 00:00:00 2001
From: Thomas Renaud <thomasre@bam.tech>
Date: Wed, 7 Feb 2024 10:22:03 +0100
Subject: [PATCH 04/16] use the useLockSpatialNavigation hook to deactivate
 parent navigator

---
 packages/example/src/components/Page.tsx      |  6 +-
 .../src/components/modals/SubtitlesModal.tsx  | 15 +++++
 packages/example/src/pages/ProgramDetail.tsx  | 62 +++++++++----------
 3 files changed, 48 insertions(+), 35 deletions(-)

diff --git a/packages/example/src/components/Page.tsx b/packages/example/src/components/Page.tsx
index 408dedaa..895511ea 100644
--- a/packages/example/src/components/Page.tsx
+++ b/packages/example/src/components/Page.tsx
@@ -5,7 +5,7 @@ import { SpatialNavigationRoot, useLockSpatialNavigation } from 'react-tv-space-
 import { useMenuContext } from './Menu/MenuContext';
 import { Keyboard } from 'react-native';
 
-type Props = { children: ReactNode; isPageActive?: boolean };
+type Props = { children: ReactNode };
 
 /**
  * Locks/unlocks the navigator when the native keyboard is shown/hidden.
@@ -31,11 +31,11 @@ const SpatialNavigationKeyboardLocker = () => {
   return null;
 };
 
-export const Page = ({ children, isPageActive = true }: Props) => {
+export const Page = ({ children }: Props) => {
   const isFocused = useIsFocused();
   const { isOpen: isMenuOpen, toggleMenu } = useMenuContext();
 
-  const isActive = isFocused && !isMenuOpen && isPageActive;
+  const isActive = isFocused && !isMenuOpen;
 
   const onDirectionHandledWithoutMovement = useCallback(
     (movement: Direction) => {
diff --git a/packages/example/src/components/modals/SubtitlesModal.tsx b/packages/example/src/components/modals/SubtitlesModal.tsx
index 156234ac..04c320db 100644
--- a/packages/example/src/components/modals/SubtitlesModal.tsx
+++ b/packages/example/src/components/modals/SubtitlesModal.tsx
@@ -1,5 +1,7 @@
+import { useEffect } from 'react';
 import { SpatialNavigationRoot } from '../../../../lib/src/spatial-navigation/components/Root';
 import { DefaultFocus } from '../../../../lib/src/spatial-navigation/context/DefaultFocusContext';
+import { useLockSpatialNavigation } from '../../../../lib/src/spatial-navigation/context/LockSpatialNavigationContext';
 import { Button } from '../../design-system/components/Button';
 import { Spacer } from '../../design-system/components/Spacer';
 import { GenericModal } from './GenericModal';
@@ -15,6 +17,19 @@ export const SubtitlesModal = ({
   setIsModalVisible,
   setSubtitles,
 }: SubtitlesModalProps) => {
+  const { lock, unlock } = useLockSpatialNavigation();
+
+  // Locks the parent navigator when the modal is open and unlocks it when it's closed
+  useEffect(() => {
+    return () => {
+      if (isModalVisible) {
+        lock();
+      } else {
+        unlock();
+      }
+    };
+  }, [isModalVisible, lock, unlock]);
+
   return (
     <SpatialNavigationRoot>
       <GenericModal isVisible={isModalVisible} title={'Choose subtitles'}>
diff --git a/packages/example/src/pages/ProgramDetail.tsx b/packages/example/src/pages/ProgramDetail.tsx
index eef33bff..eb5aa48d 100644
--- a/packages/example/src/pages/ProgramDetail.tsx
+++ b/packages/example/src/pages/ProgramDetail.tsx
@@ -21,43 +21,41 @@ export const ProgramDetail = ({
   const { programInfo } = route.params;
 
   return (
-    <>
-      <Page isPageActive={!isModalVisible}>
-        <Box padding="$5">
-          <Container paddingHorizontal="$15" paddingTop="$10" direction="horizontal">
-            <JumbotronContainer>
-              <Jumbotron source={programInfo.image} />
-            </JumbotronContainer>
-            <DefaultFocus>
-              <Box padding="$15" flex={1}>
-                <Typography variant="title" fontWeight="strong">
-                  {programInfo.title}
-                </Typography>
-                <Spacer gap="$15" />
-                <Description variant="body" fontWeight="strong">
-                  {programInfo.description}
-                </Description>
-                <Spacer gap="$8" />
-                {/* eslint-disable-next-line no-console */}
-                <Button label="Play" onSelect={() => console.log('Playing!')} />
-                <Spacer gap="$8" />
-                {/* eslint-disable-next-line no-console */}
-                <Button label="More info" onSelect={() => console.log('More info!')} />
-                <Spacer gap="$8" />
-                <Button label={`${subtitles} subtitles`} onSelect={() => setIsModalVisible(true)} />
-              </Box>
-            </DefaultFocus>
-          </Container>
-          <Spacer gap="$5" />
-          <ProgramListWithTitle title="You may also like..."></ProgramListWithTitle>
-        </Box>
-      </Page>
+    <Page>
+      <Box padding="$5">
+        <Container paddingHorizontal="$15" paddingTop="$10" direction="horizontal">
+          <JumbotronContainer>
+            <Jumbotron source={programInfo.image} />
+          </JumbotronContainer>
+          <DefaultFocus>
+            <Box padding="$15" flex={1}>
+              <Typography variant="title" fontWeight="strong">
+                {programInfo.title}
+              </Typography>
+              <Spacer gap="$15" />
+              <Description variant="body" fontWeight="strong">
+                {programInfo.description}
+              </Description>
+              <Spacer gap="$8" />
+              {/* eslint-disable-next-line no-console */}
+              <Button label="Play" onSelect={() => console.log('Playing!')} />
+              <Spacer gap="$8" />
+              {/* eslint-disable-next-line no-console */}
+              <Button label="More info" onSelect={() => console.log('More info!')} />
+              <Spacer gap="$8" />
+              <Button label={`${subtitles} subtitles`} onSelect={() => setIsModalVisible(true)} />
+            </Box>
+          </DefaultFocus>
+        </Container>
+        <Spacer gap="$5" />
+        <ProgramListWithTitle title="You may also like..."></ProgramListWithTitle>
+      </Box>
       <SubtitlesModal
         isModalVisible={isModalVisible}
         setIsModalVisible={setIsModalVisible}
         setSubtitles={setSubtitles}
       />
-    </>
+    </Page>
   );
 };
 

From c060668671a56d3a6f63823b0cb291b2f9c58b31 Mon Sep 17 00:00:00 2001
From: Thomas Renaud <thomasre@bam.tech>
Date: Wed, 7 Feb 2024 16:44:37 +0100
Subject: [PATCH 05/16] clean modal locking process as it was dirty

---
 .../example/src/components/modals/SubtitlesModal.tsx     | 8 +++++---
 packages/example/src/hooks/useIsFirstRender.tsx          | 9 +++++++++
 2 files changed, 14 insertions(+), 3 deletions(-)
 create mode 100644 packages/example/src/hooks/useIsFirstRender.tsx

diff --git a/packages/example/src/components/modals/SubtitlesModal.tsx b/packages/example/src/components/modals/SubtitlesModal.tsx
index 04c320db..41ba23e8 100644
--- a/packages/example/src/components/modals/SubtitlesModal.tsx
+++ b/packages/example/src/components/modals/SubtitlesModal.tsx
@@ -5,6 +5,7 @@ import { useLockSpatialNavigation } from '../../../../lib/src/spatial-navigation
 import { Button } from '../../design-system/components/Button';
 import { Spacer } from '../../design-system/components/Spacer';
 import { GenericModal } from './GenericModal';
+import { useIsFirstRender } from '../../hooks/useIsFirstRender';
 
 interface SubtitlesModalProps {
   isModalVisible: boolean;
@@ -18,17 +19,18 @@ export const SubtitlesModal = ({
   setSubtitles,
 }: SubtitlesModalProps) => {
   const { lock, unlock } = useLockSpatialNavigation();
+  const isFirstRender = useIsFirstRender();
 
   // Locks the parent navigator when the modal is open and unlocks it when it's closed
   useEffect(() => {
-    return () => {
+    if (!isFirstRender) {
       if (isModalVisible) {
         lock();
       } else {
         unlock();
       }
-    };
-  }, [isModalVisible, lock, unlock]);
+    }
+  }, [isModalVisible, lock, unlock, isFirstRender]);
 
   return (
     <SpatialNavigationRoot>
diff --git a/packages/example/src/hooks/useIsFirstRender.tsx b/packages/example/src/hooks/useIsFirstRender.tsx
new file mode 100644
index 00000000..9c35321f
--- /dev/null
+++ b/packages/example/src/hooks/useIsFirstRender.tsx
@@ -0,0 +1,9 @@
+import { useEffect, useRef } from 'react';
+
+export const useIsFirstRender = () => {
+  const isFirstRenderRef = useRef(true);
+  useEffect(() => {
+    isFirstRenderRef.current = false;
+  }, []);
+  return isFirstRenderRef.current;
+};

From d48f0ea858afd6fa373dc274d79ca20d95ed86a7 Mon Sep 17 00:00:00 2001
From: Thomas Renaud <thomasre@bam.tech>
Date: Wed, 7 Feb 2024 17:37:55 +0100
Subject: [PATCH 06/16] correct dubious type declaration for GenericModal
 component

---
 packages/example/src/components/modals/GenericModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/example/src/components/modals/GenericModal.tsx b/packages/example/src/components/modals/GenericModal.tsx
index 4b90e412..5758f316 100644
--- a/packages/example/src/components/modals/GenericModal.tsx
+++ b/packages/example/src/components/modals/GenericModal.tsx
@@ -10,7 +10,7 @@ type CustomModalProps = ModalProps & {
   title: string;
 };
 
-export const GenericModal: React.FC<CustomModalProps> = ({ isVisible, children, title }) => {
+export const GenericModal = ({ isVisible, children, title }: CustomModalProps) => {
   if (!isVisible) return null;
 
   return (

From 8959ac87b9faac2773c17c881bad4e55115d1c39 Mon Sep 17 00:00:00 2001
From: Thomas Renaud <thomasre@bam.tech>
Date: Thu, 8 Feb 2024 11:26:39 +0100
Subject: [PATCH 07/16] remove isFirstRender as a much more simple solution
 exists

---
 .../src/components/modals/SubtitlesModal.tsx        | 13 +++++--------
 packages/example/src/hooks/useIsFirstRender.tsx     |  9 ---------
 2 files changed, 5 insertions(+), 17 deletions(-)
 delete mode 100644 packages/example/src/hooks/useIsFirstRender.tsx

diff --git a/packages/example/src/components/modals/SubtitlesModal.tsx b/packages/example/src/components/modals/SubtitlesModal.tsx
index 41ba23e8..7f00f414 100644
--- a/packages/example/src/components/modals/SubtitlesModal.tsx
+++ b/packages/example/src/components/modals/SubtitlesModal.tsx
@@ -5,7 +5,6 @@ import { useLockSpatialNavigation } from '../../../../lib/src/spatial-navigation
 import { Button } from '../../design-system/components/Button';
 import { Spacer } from '../../design-system/components/Spacer';
 import { GenericModal } from './GenericModal';
-import { useIsFirstRender } from '../../hooks/useIsFirstRender';
 
 interface SubtitlesModalProps {
   isModalVisible: boolean;
@@ -19,18 +18,16 @@ export const SubtitlesModal = ({
   setSubtitles,
 }: SubtitlesModalProps) => {
   const { lock, unlock } = useLockSpatialNavigation();
-  const isFirstRender = useIsFirstRender();
 
   // Locks the parent navigator when the modal is open and unlocks it when it's closed
   useEffect(() => {
-    if (!isFirstRender) {
-      if (isModalVisible) {
-        lock();
-      } else {
+    if (isModalVisible) {
+      lock();
+      return () => {
         unlock();
-      }
+      };
     }
-  }, [isModalVisible, lock, unlock, isFirstRender]);
+  }, [isModalVisible, lock, unlock]);
 
   return (
     <SpatialNavigationRoot>
diff --git a/packages/example/src/hooks/useIsFirstRender.tsx b/packages/example/src/hooks/useIsFirstRender.tsx
deleted file mode 100644
index 9c35321f..00000000
--- a/packages/example/src/hooks/useIsFirstRender.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-export const useIsFirstRender = () => {
-  const isFirstRenderRef = useRef(true);
-  useEffect(() => {
-    isFirstRenderRef.current = false;
-  }, []);
-  return isFirstRenderRef.current;
-};

From fff79cf2885fa7a8af778366ef4f842bba0ec479 Mon Sep 17 00:00:00 2001
From: Thomas Renaud <thomasre@bam.tech>
Date: Thu, 8 Feb 2024 11:56:09 +0100
Subject: [PATCH 08/16] add navigation event handling, preventing goBack on
 back key press

---
 .../example/src/components/modals/SubtitlesModal.tsx   | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/example/src/components/modals/SubtitlesModal.tsx b/packages/example/src/components/modals/SubtitlesModal.tsx
index 7f00f414..10650ee9 100644
--- a/packages/example/src/components/modals/SubtitlesModal.tsx
+++ b/packages/example/src/components/modals/SubtitlesModal.tsx
@@ -5,6 +5,7 @@ import { useLockSpatialNavigation } from '../../../../lib/src/spatial-navigation
 import { Button } from '../../design-system/components/Button';
 import { Spacer } from '../../design-system/components/Spacer';
 import { GenericModal } from './GenericModal';
+import { EventArg, useNavigation } from '@react-navigation/native';
 
 interface SubtitlesModalProps {
   isModalVisible: boolean;
@@ -18,16 +19,23 @@ export const SubtitlesModal = ({
   setSubtitles,
 }: SubtitlesModalProps) => {
   const { lock, unlock } = useLockSpatialNavigation();
+  const navigation = useNavigation();
 
   // Locks the parent navigator when the modal is open and unlocks it when it's closed
   useEffect(() => {
     if (isModalVisible) {
+      const navigationListener = (e: EventArg<'beforeRemove', true>) => {
+        e.preventDefault();
+        setIsModalVisible(false);
+      };
+      navigation.addListener('beforeRemove', navigationListener);
       lock();
       return () => {
+        navigation.removeListener('beforeRemove', navigationListener);
         unlock();
       };
     }
-  }, [isModalVisible, lock, unlock]);
+  }, [isModalVisible, lock, unlock, navigation, setIsModalVisible]);
 
   return (
     <SpatialNavigationRoot>

From cc5ba0b447260f8cb1e8bf2446076a29457c7c15 Mon Sep 17 00:00:00 2001
From: Thomas Renaud <thomasre@bam.tech>
Date: Thu, 8 Feb 2024 12:16:47 +0100
Subject: [PATCH 09/16] extract hook to custom hook for the sake of clarity

---
 .../src/components/modals/SubtitlesModal.tsx  | 23 +----------
 packages/example/src/hooks/useLockModal.tsx   | 39 +++++++++++++++++++
 2 files changed, 41 insertions(+), 21 deletions(-)
 create mode 100644 packages/example/src/hooks/useLockModal.tsx

diff --git a/packages/example/src/components/modals/SubtitlesModal.tsx b/packages/example/src/components/modals/SubtitlesModal.tsx
index 10650ee9..6dee5482 100644
--- a/packages/example/src/components/modals/SubtitlesModal.tsx
+++ b/packages/example/src/components/modals/SubtitlesModal.tsx
@@ -1,11 +1,9 @@
-import { useEffect } from 'react';
 import { SpatialNavigationRoot } from '../../../../lib/src/spatial-navigation/components/Root';
 import { DefaultFocus } from '../../../../lib/src/spatial-navigation/context/DefaultFocusContext';
-import { useLockSpatialNavigation } from '../../../../lib/src/spatial-navigation/context/LockSpatialNavigationContext';
 import { Button } from '../../design-system/components/Button';
 import { Spacer } from '../../design-system/components/Spacer';
 import { GenericModal } from './GenericModal';
-import { EventArg, useNavigation } from '@react-navigation/native';
+import { useLockModal } from '../../hooks/useLockModal';
 
 interface SubtitlesModalProps {
   isModalVisible: boolean;
@@ -18,24 +16,7 @@ export const SubtitlesModal = ({
   setIsModalVisible,
   setSubtitles,
 }: SubtitlesModalProps) => {
-  const { lock, unlock } = useLockSpatialNavigation();
-  const navigation = useNavigation();
-
-  // Locks the parent navigator when the modal is open and unlocks it when it's closed
-  useEffect(() => {
-    if (isModalVisible) {
-      const navigationListener = (e: EventArg<'beforeRemove', true>) => {
-        e.preventDefault();
-        setIsModalVisible(false);
-      };
-      navigation.addListener('beforeRemove', navigationListener);
-      lock();
-      return () => {
-        navigation.removeListener('beforeRemove', navigationListener);
-        unlock();
-      };
-    }
-  }, [isModalVisible, lock, unlock, navigation, setIsModalVisible]);
+  useLockModal({ isModalVisible, setIsModalVisible });
 
   return (
     <SpatialNavigationRoot>
diff --git a/packages/example/src/hooks/useLockModal.tsx b/packages/example/src/hooks/useLockModal.tsx
new file mode 100644
index 00000000..70f13ccc
--- /dev/null
+++ b/packages/example/src/hooks/useLockModal.tsx
@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+import { useLockSpatialNavigation } from '../../../lib/src/spatial-navigation/context/LockSpatialNavigationContext';
+import { EventArg, useNavigation } from '@react-navigation/native';
+
+interface UseLockProps {
+  isModalVisible: boolean;
+  setIsModalVisible: (isVisible: boolean) => void;
+}
+
+// This hook is used to lock the spatial navigation of parent navigator when a modal is open
+// and to prevent the user from closing the modal by pressing the back button
+
+export const useLockModal = ({ isModalVisible, setIsModalVisible }: UseLockProps) => {
+  // Locks the parent navigator when the modal is open and unlocks it when it's closed
+  const { lock, unlock } = useLockSpatialNavigation();
+  useEffect(() => {
+    if (isModalVisible) {
+      lock();
+      return () => {
+        unlock();
+      };
+    }
+  }, [isModalVisible, lock, unlock]);
+
+  // Prevents the user from closing the modal by pressing the back button
+  const navigation = useNavigation();
+  useEffect(() => {
+    if (isModalVisible) {
+      const navigationListener = (e: EventArg<'beforeRemove', true>) => {
+        e.preventDefault();
+        setIsModalVisible(false);
+      };
+      navigation.addListener('beforeRemove', navigationListener);
+      return () => {
+        navigation.removeListener('beforeRemove', navigationListener);
+      };
+    }
+  }, [navigation, isModalVisible, setIsModalVisible]);
+};

From 313e267b8a54b6dd50e14fd7edaef4bf04829359 Mon Sep 17 00:00:00 2001
From: Thomas Renaud <thomasre@bam.tech>
Date: Thu, 8 Feb 2024 12:30:40 +0100
Subject: [PATCH 10/16] displace modal logic to Modal component

---
 .../src/components/modals/GenericModal.tsx    | 47 -------------
 .../example/src/components/modals/Modal.tsx   | 54 +++++++++++++++
 .../src/components/modals/SubtitlesModal.tsx  | 69 ++++++++++---------
 3 files changed, 89 insertions(+), 81 deletions(-)
 delete mode 100644 packages/example/src/components/modals/GenericModal.tsx
 create mode 100644 packages/example/src/components/modals/Modal.tsx

diff --git a/packages/example/src/components/modals/GenericModal.tsx b/packages/example/src/components/modals/GenericModal.tsx
deleted file mode 100644
index 5758f316..00000000
--- a/packages/example/src/components/modals/GenericModal.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import styled from '@emotion/native';
-import React from 'react';
-import { View, ModalProps } from 'react-native';
-import { Typography } from '../../design-system/components/Typography';
-import { Spacer } from '../../design-system/components/Spacer';
-
-type CustomModalProps = ModalProps & {
-  isVisible: boolean;
-  children: React.ReactNode;
-  title: string;
-};
-
-export const GenericModal = ({ isVisible, children, title }: CustomModalProps) => {
-  if (!isVisible) return null;
-
-  return (
-    <StyledModal>
-      <ModalContentContainer>
-        <Typography variant="title" fontWeight="strong">
-          {title}
-        </Typography>
-        <Spacer gap="$8" />
-        {children}
-      </ModalContentContainer>
-    </StyledModal>
-  );
-};
-
-const StyledModal = styled(View)({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  justifyContent: 'center',
-  alignItems: 'center',
-});
-
-const ModalContentContainer = styled(View)({
-  minHeight: 200,
-  minWidth: 200,
-  backgroundColor: 'grey',
-  padding: 32,
-  margin: 16,
-  borderRadius: 16,
-  justifyContent: 'center',
-});
diff --git a/packages/example/src/components/modals/Modal.tsx b/packages/example/src/components/modals/Modal.tsx
new file mode 100644
index 00000000..1212c7a7
--- /dev/null
+++ b/packages/example/src/components/modals/Modal.tsx
@@ -0,0 +1,54 @@
+import styled from '@emotion/native';
+import React from 'react';
+import { View, ModalProps } from 'react-native';
+import { Typography } from '../../design-system/components/Typography';
+import { Spacer } from '../../design-system/components/Spacer';
+import { SpatialNavigationRoot } from '../../../../lib/src/spatial-navigation/components/Root';
+import { useLockModal } from '../../hooks/useLockModal';
+
+type CustomModalProps = ModalProps & {
+  isModalVisible: boolean;
+  setIsModalVisible: (isVisible: boolean) => void;
+  children: React.ReactNode;
+  title: string;
+};
+
+export const Modal = ({ isModalVisible, setIsModalVisible, children, title }: CustomModalProps) => {
+  useLockModal({ isModalVisible, setIsModalVisible });
+
+  if (!isModalVisible) return null;
+
+  return (
+    <SpatialNavigationRoot>
+      <StyledModal>
+        <ModalContentContainer>
+          <Typography variant="title" fontWeight="strong">
+            {title}
+          </Typography>
+          <Spacer gap="$8" />
+          {children}
+        </ModalContentContainer>
+      </StyledModal>
+    </SpatialNavigationRoot>
+  );
+};
+
+const StyledModal = styled(View)({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+const ModalContentContainer = styled(View)({
+  minHeight: 200,
+  minWidth: 200,
+  backgroundColor: 'grey',
+  padding: 32,
+  margin: 16,
+  borderRadius: 16,
+  justifyContent: 'center',
+});
diff --git a/packages/example/src/components/modals/SubtitlesModal.tsx b/packages/example/src/components/modals/SubtitlesModal.tsx
index 6dee5482..bb2af2eb 100644
--- a/packages/example/src/components/modals/SubtitlesModal.tsx
+++ b/packages/example/src/components/modals/SubtitlesModal.tsx
@@ -1,8 +1,7 @@
-import { SpatialNavigationRoot } from '../../../../lib/src/spatial-navigation/components/Root';
 import { DefaultFocus } from '../../../../lib/src/spatial-navigation/context/DefaultFocusContext';
 import { Button } from '../../design-system/components/Button';
 import { Spacer } from '../../design-system/components/Spacer';
-import { GenericModal } from './GenericModal';
+import { Modal } from './Modal';
 import { useLockModal } from '../../hooks/useLockModal';
 
 interface SubtitlesModalProps {
@@ -19,42 +18,44 @@ export const SubtitlesModal = ({
   useLockModal({ isModalVisible, setIsModalVisible });
 
   return (
-    <SpatialNavigationRoot>
-      <GenericModal isVisible={isModalVisible} title={'Choose subtitles'}>
-        <DefaultFocus>
-          <Button
-            label="English"
-            onSelect={() => {
-              setSubtitles('English');
-              setIsModalVisible(false);
-            }}
-          />
-        </DefaultFocus>
-        <Spacer gap="$8" />
+    <Modal
+      isModalVisible={isModalVisible}
+      setIsModalVisible={setIsModalVisible}
+      title={'Choose subtitles'}
+    >
+      <DefaultFocus>
         <Button
-          label="Spanish"
+          label="English"
           onSelect={() => {
-            setSubtitles('Spanish');
+            setSubtitles('English');
             setIsModalVisible(false);
           }}
         />
-        <Spacer gap="$8" />
-        <Button
-          label="Portuguese"
-          onSelect={() => {
-            setSubtitles('Portuguese');
-            setIsModalVisible(false);
-          }}
-        />
-        <Spacer gap="$8" />
-        <Button
-          label="None"
-          onSelect={() => {
-            setSubtitles('No');
-            setIsModalVisible(false);
-          }}
-        />
-      </GenericModal>
-    </SpatialNavigationRoot>
+      </DefaultFocus>
+      <Spacer gap="$8" />
+      <Button
+        label="Spanish"
+        onSelect={() => {
+          setSubtitles('Spanish');
+          setIsModalVisible(false);
+        }}
+      />
+      <Spacer gap="$8" />
+      <Button
+        label="Portuguese"
+        onSelect={() => {
+          setSubtitles('Portuguese');
+          setIsModalVisible(false);
+        }}
+      />
+      <Spacer gap="$8" />
+      <Button
+        label="None"
+        onSelect={() => {
+          setSubtitles('No');
+          setIsModalVisible(false);
+        }}
+      />
+    </Modal>
   );
 };

From eb1674a7641429776a9546deebcf7bb7919f5dc1 Mon Sep 17 00:00:00 2001
From: Thomas Renaud <thomasre@bam.tech>
Date: Thu, 8 Feb 2024 12:33:22 +0100
Subject: [PATCH 11/16] clear useLockModal for better clarity

---
 packages/example/src/hooks/useLockModal.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/example/src/hooks/useLockModal.tsx b/packages/example/src/hooks/useLockModal.tsx
index 70f13ccc..c672255c 100644
--- a/packages/example/src/hooks/useLockModal.tsx
+++ b/packages/example/src/hooks/useLockModal.tsx
@@ -9,9 +9,12 @@ interface UseLockProps {
 
 // This hook is used to lock the spatial navigation of parent navigator when a modal is open
 // and to prevent the user from closing the modal by pressing the back button
-
 export const useLockModal = ({ isModalVisible, setIsModalVisible }: UseLockProps) => {
-  // Locks the parent navigator when the modal is open and unlocks it when it's closed
+  useLockParentSpatialNavigator(isModalVisible);
+  usePreventNavigationGoBack(isModalVisible, setIsModalVisible);
+};
+
+const useLockParentSpatialNavigator = (isModalVisible: boolean) => {
   const { lock, unlock } = useLockSpatialNavigation();
   useEffect(() => {
     if (isModalVisible) {
@@ -21,8 +24,12 @@ export const useLockModal = ({ isModalVisible, setIsModalVisible }: UseLockProps
       };
     }
   }, [isModalVisible, lock, unlock]);
+};
 
-  // Prevents the user from closing the modal by pressing the back button
+const usePreventNavigationGoBack = (
+  isModalVisible: boolean,
+  setIsModalVisible: (isVisible: boolean) => void,
+) => {
   const navigation = useNavigation();
   useEffect(() => {
     if (isModalVisible) {

From 4888020c4ab8efa618990c008ab0398a6de7dc43 Mon Sep 17 00:00:00 2001
From: Thomas Renaud <thomasre@bam.tech>
Date: Thu, 8 Feb 2024 12:36:10 +0100
Subject: [PATCH 12/16] change modal display to have better view

---
 packages/example/src/components/modals/Modal.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/example/src/components/modals/Modal.tsx b/packages/example/src/components/modals/Modal.tsx
index 1212c7a7..7c8473eb 100644
--- a/packages/example/src/components/modals/Modal.tsx
+++ b/packages/example/src/components/modals/Modal.tsx
@@ -5,6 +5,7 @@ import { Typography } from '../../design-system/components/Typography';
 import { Spacer } from '../../design-system/components/Spacer';
 import { SpatialNavigationRoot } from '../../../../lib/src/spatial-navigation/components/Root';
 import { useLockModal } from '../../hooks/useLockModal';
+import { colors } from '../../design-system/theme/colors';
 
 type CustomModalProps = ModalProps & {
   isModalVisible: boolean;
@@ -46,7 +47,9 @@ const StyledModal = styled(View)({
 const ModalContentContainer = styled(View)({
   minHeight: 200,
   minWidth: 200,
-  backgroundColor: 'grey',
+  backgroundColor: colors.background.main,
+  borderWidth: 2,
+  borderColor: colors.primary.light,
   padding: 32,
   margin: 16,
   borderRadius: 16,

From 8c77f13ee6e780cfe58c14ca284671eecf90b61e Mon Sep 17 00:00:00 2001
From: Thomas Renaud <thomasre@bam.tech>
Date: Thu, 8 Feb 2024 14:18:26 +0100
Subject: [PATCH 13/16] separate modal display from spatial navigation part

---
 .../example/src/components/modals/Modal.tsx   | 20 +++++++++----------
 .../SpatialNavigationModal.tsx                | 18 +++++++++++++++++
 .../SpatialNavigationModal}/useLockModal.tsx  |  2 +-
 .../src/components/modals/SubtitlesModal.tsx  |  3 ---
 4 files changed, 29 insertions(+), 14 deletions(-)
 create mode 100644 packages/example/src/components/modals/SpatialNavigationModal/SpatialNavigationModal.tsx
 rename packages/example/src/{hooks => components/modals/SpatialNavigationModal}/useLockModal.tsx (92%)

diff --git a/packages/example/src/components/modals/Modal.tsx b/packages/example/src/components/modals/Modal.tsx
index 7c8473eb..8cbdd2e1 100644
--- a/packages/example/src/components/modals/Modal.tsx
+++ b/packages/example/src/components/modals/Modal.tsx
@@ -3,9 +3,8 @@ import React from 'react';
 import { View, ModalProps } from 'react-native';
 import { Typography } from '../../design-system/components/Typography';
 import { Spacer } from '../../design-system/components/Spacer';
-import { SpatialNavigationRoot } from '../../../../lib/src/spatial-navigation/components/Root';
-import { useLockModal } from '../../hooks/useLockModal';
 import { colors } from '../../design-system/theme/colors';
+import { SpatialNavigationModal } from './SpatialNavigationModal/SpatialNavigationModal';
 
 type CustomModalProps = ModalProps & {
   isModalVisible: boolean;
@@ -15,22 +14,23 @@ type CustomModalProps = ModalProps & {
 };
 
 export const Modal = ({ isModalVisible, setIsModalVisible, children, title }: CustomModalProps) => {
-  useLockModal({ isModalVisible, setIsModalVisible });
-
   if (!isModalVisible) return null;
 
   return (
-    <SpatialNavigationRoot>
-      <StyledModal>
-        <ModalContentContainer>
+    <StyledModal>
+      <ModalContentContainer>
+        <SpatialNavigationModal
+          isModalVisible={isModalVisible}
+          setIsModalVisible={setIsModalVisible}
+        >
           <Typography variant="title" fontWeight="strong">
             {title}
           </Typography>
           <Spacer gap="$8" />
           {children}
-        </ModalContentContainer>
-      </StyledModal>
-    </SpatialNavigationRoot>
+        </SpatialNavigationModal>
+      </ModalContentContainer>
+    </StyledModal>
   );
 };
 
diff --git a/packages/example/src/components/modals/SpatialNavigationModal/SpatialNavigationModal.tsx b/packages/example/src/components/modals/SpatialNavigationModal/SpatialNavigationModal.tsx
new file mode 100644
index 00000000..a21b6679
--- /dev/null
+++ b/packages/example/src/components/modals/SpatialNavigationModal/SpatialNavigationModal.tsx
@@ -0,0 +1,18 @@
+import { SpatialNavigationRoot } from '../../../../../lib/src/spatial-navigation/components/Root';
+import { useLockModal } from './useLockModal';
+
+type SpatialNavigationModalProps = {
+  isModalVisible: boolean;
+  setIsModalVisible: (isVisible: boolean) => void;
+  children: React.ReactNode;
+};
+
+export const SpatialNavigationModal = ({
+  isModalVisible,
+  setIsModalVisible,
+  children,
+}: SpatialNavigationModalProps) => {
+  useLockModal({ isModalVisible, setIsModalVisible });
+
+  return <SpatialNavigationRoot>{children}</SpatialNavigationRoot>;
+};
diff --git a/packages/example/src/hooks/useLockModal.tsx b/packages/example/src/components/modals/SpatialNavigationModal/useLockModal.tsx
similarity index 92%
rename from packages/example/src/hooks/useLockModal.tsx
rename to packages/example/src/components/modals/SpatialNavigationModal/useLockModal.tsx
index c672255c..3f8e2c0f 100644
--- a/packages/example/src/hooks/useLockModal.tsx
+++ b/packages/example/src/components/modals/SpatialNavigationModal/useLockModal.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useLockSpatialNavigation } from '../../../lib/src/spatial-navigation/context/LockSpatialNavigationContext';
+import { useLockSpatialNavigation } from '../../../../../lib/src/spatial-navigation/context/LockSpatialNavigationContext';
 import { EventArg, useNavigation } from '@react-navigation/native';
 
 interface UseLockProps {
diff --git a/packages/example/src/components/modals/SubtitlesModal.tsx b/packages/example/src/components/modals/SubtitlesModal.tsx
index bb2af2eb..8e7c80bd 100644
--- a/packages/example/src/components/modals/SubtitlesModal.tsx
+++ b/packages/example/src/components/modals/SubtitlesModal.tsx
@@ -2,7 +2,6 @@ import { DefaultFocus } from '../../../../lib/src/spatial-navigation/context/Def
 import { Button } from '../../design-system/components/Button';
 import { Spacer } from '../../design-system/components/Spacer';
 import { Modal } from './Modal';
-import { useLockModal } from '../../hooks/useLockModal';
 
 interface SubtitlesModalProps {
   isModalVisible: boolean;
@@ -15,8 +14,6 @@ export const SubtitlesModal = ({
   setIsModalVisible,
   setSubtitles,
 }: SubtitlesModalProps) => {
-  useLockModal({ isModalVisible, setIsModalVisible });
-
   return (
     <Modal
       isModalVisible={isModalVisible}

From 32196a07929770e0f40903703a3c70a2c565071b Mon Sep 17 00:00:00 2001
From: Thomas Renaud <thomasre@bam.tech>
Date: Thu, 8 Feb 2024 14:25:42 +0100
Subject: [PATCH 14/16] use hideModal instead of setIsModalVisible

---
 packages/example/src/components/modals/Modal.tsx  |  9 +++------
 .../SpatialNavigationModal.tsx                    |  6 +++---
 .../SpatialNavigationModal/useLockModal.tsx       | 15 ++++++---------
 .../src/components/modals/SubtitlesModal.tsx      |  2 +-
 4 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/packages/example/src/components/modals/Modal.tsx b/packages/example/src/components/modals/Modal.tsx
index 8cbdd2e1..a20e8945 100644
--- a/packages/example/src/components/modals/Modal.tsx
+++ b/packages/example/src/components/modals/Modal.tsx
@@ -8,21 +8,18 @@ import { SpatialNavigationModal } from './SpatialNavigationModal/SpatialNavigati
 
 type CustomModalProps = ModalProps & {
   isModalVisible: boolean;
-  setIsModalVisible: (isVisible: boolean) => void;
+  hideModal: () => void;
   children: React.ReactNode;
   title: string;
 };
 
-export const Modal = ({ isModalVisible, setIsModalVisible, children, title }: CustomModalProps) => {
+export const Modal = ({ isModalVisible, hideModal, children, title }: CustomModalProps) => {
   if (!isModalVisible) return null;
 
   return (
     <StyledModal>
       <ModalContentContainer>
-        <SpatialNavigationModal
-          isModalVisible={isModalVisible}
-          setIsModalVisible={setIsModalVisible}
-        >
+        <SpatialNavigationModal isModalVisible={isModalVisible} hideModal={hideModal}>
           <Typography variant="title" fontWeight="strong">
             {title}
           </Typography>
diff --git a/packages/example/src/components/modals/SpatialNavigationModal/SpatialNavigationModal.tsx b/packages/example/src/components/modals/SpatialNavigationModal/SpatialNavigationModal.tsx
index a21b6679..2c40779a 100644
--- a/packages/example/src/components/modals/SpatialNavigationModal/SpatialNavigationModal.tsx
+++ b/packages/example/src/components/modals/SpatialNavigationModal/SpatialNavigationModal.tsx
@@ -3,16 +3,16 @@ import { useLockModal } from './useLockModal';
 
 type SpatialNavigationModalProps = {
   isModalVisible: boolean;
-  setIsModalVisible: (isVisible: boolean) => void;
+  hideModal: () => void;
   children: React.ReactNode;
 };
 
 export const SpatialNavigationModal = ({
   isModalVisible,
-  setIsModalVisible,
+  hideModal,
   children,
 }: SpatialNavigationModalProps) => {
-  useLockModal({ isModalVisible, setIsModalVisible });
+  useLockModal({ isModalVisible, hideModal });
 
   return <SpatialNavigationRoot>{children}</SpatialNavigationRoot>;
 };
diff --git a/packages/example/src/components/modals/SpatialNavigationModal/useLockModal.tsx b/packages/example/src/components/modals/SpatialNavigationModal/useLockModal.tsx
index 3f8e2c0f..3678eabd 100644
--- a/packages/example/src/components/modals/SpatialNavigationModal/useLockModal.tsx
+++ b/packages/example/src/components/modals/SpatialNavigationModal/useLockModal.tsx
@@ -4,14 +4,14 @@ import { EventArg, useNavigation } from '@react-navigation/native';
 
 interface UseLockProps {
   isModalVisible: boolean;
-  setIsModalVisible: (isVisible: boolean) => void;
+  hideModal: () => void;
 }
 
 // This hook is used to lock the spatial navigation of parent navigator when a modal is open
 // and to prevent the user from closing the modal by pressing the back button
-export const useLockModal = ({ isModalVisible, setIsModalVisible }: UseLockProps) => {
+export const useLockModal = ({ isModalVisible, hideModal }: UseLockProps) => {
   useLockParentSpatialNavigator(isModalVisible);
-  usePreventNavigationGoBack(isModalVisible, setIsModalVisible);
+  usePreventNavigationGoBack(isModalVisible, hideModal);
 };
 
 const useLockParentSpatialNavigator = (isModalVisible: boolean) => {
@@ -26,21 +26,18 @@ const useLockParentSpatialNavigator = (isModalVisible: boolean) => {
   }, [isModalVisible, lock, unlock]);
 };
 
-const usePreventNavigationGoBack = (
-  isModalVisible: boolean,
-  setIsModalVisible: (isVisible: boolean) => void,
-) => {
+const usePreventNavigationGoBack = (isModalVisible: boolean, hideModal: () => void) => {
   const navigation = useNavigation();
   useEffect(() => {
     if (isModalVisible) {
       const navigationListener = (e: EventArg<'beforeRemove', true>) => {
         e.preventDefault();
-        setIsModalVisible(false);
+        hideModal();
       };
       navigation.addListener('beforeRemove', navigationListener);
       return () => {
         navigation.removeListener('beforeRemove', navigationListener);
       };
     }
-  }, [navigation, isModalVisible, setIsModalVisible]);
+  }, [navigation, isModalVisible, hideModal]);
 };
diff --git a/packages/example/src/components/modals/SubtitlesModal.tsx b/packages/example/src/components/modals/SubtitlesModal.tsx
index 8e7c80bd..859f424a 100644
--- a/packages/example/src/components/modals/SubtitlesModal.tsx
+++ b/packages/example/src/components/modals/SubtitlesModal.tsx
@@ -17,7 +17,7 @@ export const SubtitlesModal = ({
   return (
     <Modal
       isModalVisible={isModalVisible}
-      setIsModalVisible={setIsModalVisible}
+      hideModal={() => setIsModalVisible(false)}
       title={'Choose subtitles'}
     >
       <DefaultFocus>

From e67932117256c51d27d7e52fc060a4ed11b538ce Mon Sep 17 00:00:00 2001
From: Thomas Renaud <thomasre@bam.tech>
Date: Thu, 8 Feb 2024 14:31:51 +0100
Subject: [PATCH 15/16] rename Modal to Overlay

---
 packages/example/src/components/modals/Modal.tsx       |  6 +++---
 .../SpatialNavigationOverlay.tsx}                      | 10 +++++-----
 .../useLockOverlay.tsx}                                |  2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)
 rename packages/example/src/components/modals/{SpatialNavigationModal/SpatialNavigationModal.tsx => SpatialNavigationOverlay/SpatialNavigationOverlay.tsx} (57%)
 rename packages/example/src/components/modals/{SpatialNavigationModal/useLockModal.tsx => SpatialNavigationOverlay/useLockOverlay.tsx} (94%)

diff --git a/packages/example/src/components/modals/Modal.tsx b/packages/example/src/components/modals/Modal.tsx
index a20e8945..949127f2 100644
--- a/packages/example/src/components/modals/Modal.tsx
+++ b/packages/example/src/components/modals/Modal.tsx
@@ -4,7 +4,7 @@ import { View, ModalProps } from 'react-native';
 import { Typography } from '../../design-system/components/Typography';
 import { Spacer } from '../../design-system/components/Spacer';
 import { colors } from '../../design-system/theme/colors';
-import { SpatialNavigationModal } from './SpatialNavigationModal/SpatialNavigationModal';
+import { SpatialNavigationOverlay } from './SpatialNavigationOverlay/SpatialNavigationOverlay';
 
 type CustomModalProps = ModalProps & {
   isModalVisible: boolean;
@@ -19,13 +19,13 @@ export const Modal = ({ isModalVisible, hideModal, children, title }: CustomModa
   return (
     <StyledModal>
       <ModalContentContainer>
-        <SpatialNavigationModal isModalVisible={isModalVisible} hideModal={hideModal}>
+        <SpatialNavigationOverlay isModalVisible={isModalVisible} hideModal={hideModal}>
           <Typography variant="title" fontWeight="strong">
             {title}
           </Typography>
           <Spacer gap="$8" />
           {children}
-        </SpatialNavigationModal>
+        </SpatialNavigationOverlay>
       </ModalContentContainer>
     </StyledModal>
   );
diff --git a/packages/example/src/components/modals/SpatialNavigationModal/SpatialNavigationModal.tsx b/packages/example/src/components/modals/SpatialNavigationOverlay/SpatialNavigationOverlay.tsx
similarity index 57%
rename from packages/example/src/components/modals/SpatialNavigationModal/SpatialNavigationModal.tsx
rename to packages/example/src/components/modals/SpatialNavigationOverlay/SpatialNavigationOverlay.tsx
index 2c40779a..8587a363 100644
--- a/packages/example/src/components/modals/SpatialNavigationModal/SpatialNavigationModal.tsx
+++ b/packages/example/src/components/modals/SpatialNavigationOverlay/SpatialNavigationOverlay.tsx
@@ -1,18 +1,18 @@
 import { SpatialNavigationRoot } from '../../../../../lib/src/spatial-navigation/components/Root';
-import { useLockModal } from './useLockModal';
+import { useLockOverlay } from './useLockOverlay';
 
-type SpatialNavigationModalProps = {
+type SpatialNavigationOverlayProps = {
   isModalVisible: boolean;
   hideModal: () => void;
   children: React.ReactNode;
 };
 
-export const SpatialNavigationModal = ({
+export const SpatialNavigationOverlay = ({
   isModalVisible,
   hideModal,
   children,
-}: SpatialNavigationModalProps) => {
-  useLockModal({ isModalVisible, hideModal });
+}: SpatialNavigationOverlayProps) => {
+  useLockOverlay({ isModalVisible, hideModal });
 
   return <SpatialNavigationRoot>{children}</SpatialNavigationRoot>;
 };
diff --git a/packages/example/src/components/modals/SpatialNavigationModal/useLockModal.tsx b/packages/example/src/components/modals/SpatialNavigationOverlay/useLockOverlay.tsx
similarity index 94%
rename from packages/example/src/components/modals/SpatialNavigationModal/useLockModal.tsx
rename to packages/example/src/components/modals/SpatialNavigationOverlay/useLockOverlay.tsx
index 3678eabd..ae58104d 100644
--- a/packages/example/src/components/modals/SpatialNavigationModal/useLockModal.tsx
+++ b/packages/example/src/components/modals/SpatialNavigationOverlay/useLockOverlay.tsx
@@ -9,7 +9,7 @@ interface UseLockProps {
 
 // This hook is used to lock the spatial navigation of parent navigator when a modal is open
 // and to prevent the user from closing the modal by pressing the back button
-export const useLockModal = ({ isModalVisible, hideModal }: UseLockProps) => {
+export const useLockOverlay = ({ isModalVisible, hideModal }: UseLockProps) => {
   useLockParentSpatialNavigator(isModalVisible);
   usePreventNavigationGoBack(isModalVisible, hideModal);
 };

From 6068a546bdbf394f2319e6761556a37c24e5d2de Mon Sep 17 00:00:00 2001
From: Thomas Renaud <thomasre@bam.tech>
Date: Thu, 8 Feb 2024 14:40:36 +0100
Subject: [PATCH 16/16] correct placement of Overlay in Modal

---
 packages/example/src/components/modals/Modal.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/example/src/components/modals/Modal.tsx b/packages/example/src/components/modals/Modal.tsx
index 949127f2..23034bfb 100644
--- a/packages/example/src/components/modals/Modal.tsx
+++ b/packages/example/src/components/modals/Modal.tsx
@@ -19,11 +19,11 @@ export const Modal = ({ isModalVisible, hideModal, children, title }: CustomModa
   return (
     <StyledModal>
       <ModalContentContainer>
+        <Typography variant="title" fontWeight="strong">
+          {title}
+        </Typography>
+        <Spacer gap="$8" />
         <SpatialNavigationOverlay isModalVisible={isModalVisible} hideModal={hideModal}>
-          <Typography variant="title" fontWeight="strong">
-            {title}
-          </Typography>
-          <Spacer gap="$8" />
           {children}
         </SpatialNavigationOverlay>
       </ModalContentContainer>