extract hook to custom hook for the sake of clarity

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>

packages/example/src/hooks/useLockModal.tsx

@@ -0,0 +1,37 @@
+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(() => {
+    const navigationListener = (e: EventArg<'beforeRemove', true>) => {
+      e.preventDefault();
+      setIsModalVisible(false);
+    };
+    navigation.addListener('beforeRemove', navigationListener);
+    return () => {
+      navigation.removeListener('beforeRemove', navigationListener);
+    };
+  }, [navigation, isModalVisible, setIsModalVisible]);
+};