···11+import {useId} from 'react'
22+import {useKeepAwake} from 'expo-keep-awake'
33+import {useIsFocused} from '@react-navigation/native'
44+55+/**
66+ * Stops the screen from sleeping. Only applies to the current screen.
77+ *
88+ * Note: Expo keeps the screen permanently awake when in dev mode, so
99+ * you'll only see this do anything when in production.
1010+ *
1111+ * @platform ios, android
1212+ */
1313+export function KeepAwake({enabled = true}) {
1414+ const isFocused = useIsFocused()
1515+ if (enabled && isFocused) {
1616+ return <KeepAwakeInner />
1717+ } else {
1818+ return null
1919+ }
2020+}
2121+2222+function KeepAwakeInner() {
2323+ const id = useId()
2424+ // if you don't pass an explicit ID, any `useKeepAwake` hook unmounting disables them all.
2525+ // very strange behaviour, but easily fixed by passing a unique ID -sfn
2626+ useKeepAwake(id)
2727+ return null
2828+}
+3
src/components/KeepAwake.web.tsx
···11+export function KeepAwake() {
22+ return null
33+}
+2
src/screens/VideoFeed/index.tsx
···9393import {Check_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check'
9494import {EyeSlash_Stroke2_Corner0_Rounded as Eye} from '#/components/icons/EyeSlash'
9595import {Leaf_Stroke2_Corner0_Rounded as LeafIcon} from '#/components/icons/Leaf'
9696+import {KeepAwake} from '#/components/KeepAwake'
9697import * as Layout from '#/components/Layout'
9798import {Link} from '#/components/Link'
9899import {ListFooter} from '#/components/Lists'
···150151 return (
151152 <ThemeProvider theme="dark">
152153 <Layout.Screen noInsetTop style={{backgroundColor: 'black'}}>
154154+ <KeepAwake />
153155 <SystemBars style={{statusBar: 'light', navigationBar: 'light'}} />
154156 <View
155157 style={[