Add reader toggle to keep screen awake on mobile

package.json

@@ -23,6 +23,7 @@
     "expo-document-picker": "~13.0.0",
     "expo-file-system": "~18.0.0",
     "expo-font": "~13.0.4",
+    "expo-keep-awake": "~14.0.3",
     "expo-localization": "~16.0.1",
     "expo-status-bar": "~2.0.0",
     "expo-updates": "~0.27.5",

src/screens/ReaderScreen.tsx

@@ -19,6 +19,10 @@ import {
   TouchableWithoutFeedback,
   View,
 } from "react-native";
+import {
+  activateKeepAwakeAsync,
+  deactivateKeepAwake,
+} from "expo-keep-awake";
 import type { NativeStackScreenProps } from "@react-navigation/native-stack";
 import type { RootStackParamList } from "../../App";
 import { firstIndexOfPage, WordEntry } from "../utils/pdfParser";
@@ -35,6 +39,8 @@ const WebView =
 
 type Props = NativeStackScreenProps<RootStackParamList, "Reader">;
 
+const READER_KEEP_AWAKE_TAG = "reader-screen";
+
 const CONTEXT_LINES = 5;
 const WORDS_PER_LINE_EST = 8; // rough estimate for advance threshold
 const CONTEXT_WINDOW = WORDS_PER_LINE_EST * CONTEXT_LINES; // ~40 words fills 5 lines
@@ -188,6 +194,7 @@ export default function ReaderScreen({ route, navigation }: Props) {
   const [pageInput, setPageInput] = useState("");
 
   const [flowReading, setFlowReading] = useState(true);
+  const [keepScreenAwake, setKeepScreenAwake] = useState(false);
 
   const indexRef = useRef(currentIndex);
   const wpmRef = useRef(wpm);
@@ -205,6 +212,17 @@ export default function ReaderScreen({ route, navigation }: Props) {
     flowReadingRef.current = flowReading;
   }, [flowReading]);
 
+  useEffect(() => {
+    if (!keepScreenAwake) {
+      void deactivateKeepAwake(READER_KEEP_AWAKE_TAG);
+      return;
+    }
+    void activateKeepAwakeAsync(READER_KEEP_AWAKE_TAG);
+    return () => {
+      void deactivateKeepAwake(READER_KEEP_AWAKE_TAG);
+    };
+  }, [keepScreenAwake]);
+
   // Called by ContextDisplay when the highlighted word's onLayout reports it's past
   // the visible container. Advances the window so the current word is near the top.
   const WINDOW_OVERLAP = 3;
@@ -569,6 +587,19 @@ export default function ReaderScreen({ route, navigation }: Props) {
               {font === "opendyslexic" ? "OpenDyslexic" : "Dyslexic"}
             </Text>
           </TouchableOpacity>
+          <TouchableOpacity
+            style={[styles.flowBtn, keepScreenAwake && styles.flowBtnActive]}
+            onPress={() => setKeepScreenAwake((v) => !v)}
+          >
+            <Text
+              style={[
+                styles.flowBtnText,
+                keepScreenAwake && styles.flowBtnTextActive,
+              ]}
+            >
+              {keepScreenAwake ? t(lang, "keepAwakeOn") : t(lang, "keepAwakeOff")}
+            </Text>
+          </TouchableOpacity>
         </View>
       </View>
 
@@ -850,6 +881,8 @@ function makeStyles(c: ThemeColors, SERIF: string = 'Georgia') {
     },
     speedToggles: {
       flexDirection: "row",
+      flexWrap: "wrap",
+      justifyContent: "center",
       alignItems: "center",
       gap: 10,
     },

src/utils/i18n.ts

@@ -50,6 +50,8 @@ const strings = {
     lookUpWord: "look up word",
     flowOn: "flow on",
     flowOff: "flow off",
+    keepAwakeOn: "Awake",
+    keepAwakeOff: "Stay awake",
     back: "\u2190 back",
     backBtn: "\u2190 Back",
     jumpToPage: "Jump to page",
@@ -109,6 +111,8 @@ const strings = {
     lookUpWord: "buscar palabra",
     flowOn: "flujo activado",
     flowOff: "flujo desactivado",
+    keepAwakeOn: "Activa",
+    keepAwakeOff: "No apagar",
     back: "\u2190 atr\u00e1s",
     backBtn: "\u2190 Volver",
     jumpToPage: "Ir a p\u00e1gina",