Merged PR 37873: Create reusable screenlock hook

Create reusable screenlock hook

src/hooks/useLockScreen.ts

@@ -0,0 +1,12 @@
+import {lockAsync, OrientationLock, unlockAsync} from 'expo-screen-orientation'
+import {useEffect} from 'react'
+
+export const useLockScreen = (orientation: OrientationLock) => {
+  useEffect(() => {
+    void lockAsync(orientation)
+
+    return () => {
+      void unlockAsync()
+    }
+  }, [orientation])
+}

src/modules/access-code/components/AccessCodeKeyBoard.tsx

@@ -1,11 +1,12 @@
-import {lockAsync, OrientationLock, unlockAsync} from 'expo-screen-orientation'
-import {useCallback, useEffect, useMemo} from 'react'
+import {OrientationLock} from 'expo-screen-orientation'
+import {useCallback, useMemo} from 'react'
 import {View, StyleSheet, Platform} from 'react-native'
 import {EdgeInsets, useSafeAreaInsets} from 'react-native-safe-area-context'
 import {Box} from '@/components/ui/containers/Box'
 import {Column} from '@/components/ui/layout/Column'
 import {Row} from '@/components/ui/layout/Row'
 import {useAccessibilityAnnounce} from '@/hooks/accessibility/useAccessibilityAnnounce'
+import {useLockScreen} from '@/hooks/useLockScreen'
 import {AccessCodeKeyBoardKey} from '@/modules/access-code/components/AccessCodeKeyboardKey'
 import {useAccessCode} from '@/modules/access-code/hooks/useAccessCode'
 import {useAccessCodeBiometrics} from '@/modules/access-code/hooks/useAccessCodeBiometrics'
@@ -32,6 +33,8 @@ export const AccessCodeKeyBoard = ({onPressAuthenticate, type}: Props) => {
   const {codeConfirmed} = useConfirmAccessCode()
   const {codeLength} = useAccessCode()
 
+  useLockScreen(OrientationLock.PORTRAIT_UP)
+
   const nextTextField = useMemo(() => {
     switch (type) {
       case AccessCodeType.codeEntered:
@@ -58,14 +61,6 @@ export const AccessCodeKeyBoard = ({onPressAuthenticate, type}: Props) => {
     [accessibilityAnnounce, addDigit, codeLength, nextTextField, type],
   )
 
-  useEffect(() => {
-    void lockAsync(OrientationLock.PORTRAIT_UP)
-
-    return () => {
-      void unlockAsync()
-    }
-  }, [])
-
   return (
     <View style={styles.container}>
       <Box inset="sm">

src/modules/city-pass/components/card-display/CityPasses.tsx

@@ -1,9 +1,10 @@
-import {lockAsync, OrientationLock, unlockAsync} from 'expo-screen-orientation'
+import {OrientationLock} from 'expo-screen-orientation'
 import {useCallback, useEffect} from 'react'
 import {AccessibilityInfo, Alert, StyleSheet, View} from 'react-native'
 import {useDispatch} from '@/hooks/redux/useDispatch'
 import {useBlockScreenshots} from '@/hooks/useBlockScreenshots'
 import {useBrightScreen} from '@/hooks/useBrightScreen'
+import {useLockScreen} from '@/hooks/useLockScreen'
 import {useEnterAccessCode} from '@/modules/access-code/hooks/useEnterAccessCode'
 import {CityPassesSwiper} from '@/modules/city-pass/components/card-display/CityPassesSwiper'
 import {setStartIndex} from '@/modules/city-pass/slice'
@@ -19,18 +20,12 @@ export const CityPasses = ({index}: Props) => {
   const {isCodeValid} = useEnterAccessCode()
   const styles = useThemable(createStyles)
 
+  useLockScreen(OrientationLock.PORTRAIT_UP)
+
   useEffect(() => {
     dispatch(setStartIndex(index))
   }, [dispatch, index])
 
-  useEffect(() => {
-    void lockAsync(OrientationLock.PORTRAIT_UP)
-
-    return () => {
-      void unlockAsync()
-    }
-  }, [])
-
   const onScreenshot = useCallback(() => {
     const screenshotMessage = 'Dit scherm staat geen schermafdrukken toe'