Keep the screen awake on the video feed

package.json

@@ -145,6 +145,7 @@
     "expo-image-manipulator": "~14.0.7",
     "expo-image-picker": "~17.0.8",
     "expo-intent-launcher": "~13.0.7",
+    "expo-keep-awake": "^15.0.7",
     "expo-linear-gradient": "~15.0.7",
     "expo-linking": "~8.0.8",
     "expo-localization": "~17.0.7",

src/components/KeepAwake.tsx

@@ -0,0 +1,28 @@
+import {useId} from 'react'
+import {useKeepAwake} from 'expo-keep-awake'
+import {useIsFocused} from '@react-navigation/native'
+
+/**
+ * Stops the screen from sleeping. Only applies to the current screen.
+ *
+ * Note: Expo keeps the screen permanently awake when in dev mode, so
+ * you'll only see this do anything when in production.
+ *
+ * @platform ios, android
+ */
+export function KeepAwake({enabled = true}) {
+  const isFocused = useIsFocused()
+  if (enabled && isFocused) {
+    return <KeepAwakeInner />
+  } else {
+    return null
+  }
+}
+
+function KeepAwakeInner() {
+  const id = useId()
+  // if you don't pass an explicit ID, any `useKeepAwake` hook unmounting disables them all.
+  // very strange behaviour, but easily fixed by passing a unique ID -sfn
+  useKeepAwake(id)
+  return null
+}

src/components/KeepAwake.web.tsx

@@ -0,0 +1,3 @@
+export function KeepAwake() {
+  return null
+}

src/screens/VideoFeed/index.tsx

@@ -93,6 +93,7 @@ import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeftIcon} from '#/components/i
 import {Check_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check'
 import {EyeSlash_Stroke2_Corner0_Rounded as Eye} from '#/components/icons/EyeSlash'
 import {Leaf_Stroke2_Corner0_Rounded as LeafIcon} from '#/components/icons/Leaf'
+import {KeepAwake} from '#/components/KeepAwake'
 import * as Layout from '#/components/Layout'
 import {Link} from '#/components/Link'
 import {ListFooter} from '#/components/Lists'
@@ -150,6 +151,7 @@ export function VideoFeed({}: NativeStackScreenProps<
   return (
     <ThemeProvider theme="dark">
       <Layout.Screen noInsetTop style={{backgroundColor: 'black'}}>
+        <KeepAwake />
         <SystemBars style={{statusBar: 'light', navigationBar: 'light'}} />
         <View
           style={[

yarn.lock

@@ -11292,7 +11292,7 @@ expo-json-utils@~0.15.0:
   resolved "https://registry.yarnpkg.com/expo-json-utils/-/expo-json-utils-0.15.0.tgz#6723574814b9e6b0a90e4e23662be76123ab6ae9"
   integrity sha512-duRT6oGl80IDzH2LD2yEFWNwGIC2WkozsB6HF3cDYNoNNdUvFk6uN3YiwsTsqVM/D0z6LEAQ01/SlYvN+Fw0JQ==
 
-expo-keep-awake@~15.0.7:
+expo-keep-awake@^15.0.7, expo-keep-awake@~15.0.7:
   version "15.0.7"
   resolved "https://registry.yarnpkg.com/expo-keep-awake/-/expo-keep-awake-15.0.7.tgz#4eada556e1cca6c9c2e5aa39478fd01816cd0bc9"
   integrity sha512-CgBNcWVPnrIVII5G54QDqoE125l+zmqR4HR8q+MQaCfHet+dYpS5vX5zii/RMayzGN4jPgA4XYIQ28ePKFjHoA==