Keep the screen awake on the video feed (#9146)

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={[