Feature: Add support for fullscreen.

app/note/[id].tsx

@@ -17,6 +17,7 @@ import {
   Text,
   View,
   useWindowDimensions,
+  StatusBar
 } from 'react-native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -72,6 +73,7 @@ const PAGE_WIDTH = 820;
 const PAGE_HEIGHT = 1061;
 const FINGER_DRAWING_PREF_KEY = 'opennotes.editor.fingerDrawingEnabled';
 
+
 type EditorAction =
   | { kind: 'insertImage' }
   | { kind: 'rename' };
@@ -167,6 +169,7 @@ export default function NoteScreen() {
   const [selection, setSelection] = useState<OverlaySelection | null>(null);
   const [action, setAction] = useState<EditorAction | null>(null);
   const [isExporting, setIsExporting] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
   const [isPageSidebarOpen, setIsPageSidebarOpen] = useState(false);
   const defaultFingerDrawingEnabled = useMemo(
     () => defaultFingerDrawingForViewport(viewportWidth, viewportHeight),
@@ -780,6 +783,7 @@ export default function NoteScreen() {
 
   const handleBack = useCallback(async () => {
     if (exitRef.current !== 'editing') return;
+    StatusBar.setHidden(false, "fade");
     exitRef.current = 'confirming';
     Keyboard.dismiss();
     setAction(null);
@@ -800,7 +804,7 @@ export default function NoteScreen() {
     }, [handleBack]),
   );
 
-  const headerHeight = insets.top + EDITOR_HEADER_BAR_HEIGHT;
+  const headerHeight = isFullscreen ? insets.top : insets.top + EDITOR_HEADER_BAR_HEIGHT;
 
   const pagesForOverlay = useMemo(() => {
     return enginePages.map((page) => {
@@ -887,6 +891,7 @@ export default function NoteScreen() {
         pageCount={Math.max(1, enginePages.length)}
         isExporting={isExporting}
         isPageSidebarOpen={isPageSidebarOpen}
+        isFullscreen={isFullscreen}
         onBack={() => void handleBack()}
         onRename={() => setAction({ kind: 'rename' })}
         onTogglePageSidebar={() => setIsPageSidebarOpen((value) => !value)}
@@ -939,11 +944,17 @@ export default function NoteScreen() {
         activeTool={toolState.toolType as ToolDescriptor['type']}
         toolColors={toolColors}
         topInset={headerHeight}
+        isFullscreen={isFullscreen}
         fingerDrawingEnabled={fingerDrawingEnabled}
         onToggleFingerDrawing={() => {
           void Haptics.selectionAsync();
           setFingerDrawingEnabled((value) => !value);
         }}
+        onToggleFullscreen={() => {
+          void Haptics.selectionAsync();
+          StatusBar.setHidden(!isFullscreen, "fade");
+          setIsFullscreen((value) => !value);
+        }}
         onToolPress={handleToolPress}
         onToolLongPress={handleToolLongPress}
         onUndo={handleUndo}

src/components/editor/EditorHeader.tsx

@@ -17,6 +17,7 @@ export interface EditorHeaderProps {
   pageCount: number;
   isExporting: boolean;
   isPageSidebarOpen: boolean;
+  isFullscreen: boolean;
   onBack: () => void;
   onRename: () => void;
   onTogglePageSidebar: () => void;
@@ -30,13 +31,16 @@ export function EditorHeader({
   pageCount,
   isExporting,
   isPageSidebarOpen,
+  isFullscreen,
   onBack,
   onRename,
   onTogglePageSidebar,
   onExport,
 }: EditorHeaderProps) {
   const theme = useTheme();
   const insets = useSafeAreaInsets();
+  if (isFullscreen) return
+
   return (
     <View
       style={[

src/components/editor/FloatingToolbar.tsx

@@ -180,7 +180,9 @@ export interface FloatingToolbarProps {
   onToolPress: (tool: ToolDescriptor, alreadyActive: boolean, anchor: ToolbarButtonAnchor) => void;
   onToolLongPress: (tool: ToolDescriptor, anchor: ToolbarButtonAnchor) => void;
   fingerDrawingEnabled: boolean;
+  isFullscreen: boolean;
   onToggleFingerDrawing: () => void;
+  onToggleFullscreen: () => void;
   onUndo: () => void;
   onRedo: () => void;
 }
@@ -201,7 +203,9 @@ export function FloatingToolbar({
   onToolPress,
   onToolLongPress,
   fingerDrawingEnabled,
+  isFullscreen,
   onToggleFingerDrawing,
+  onToggleFullscreen,
   onUndo,
   onRedo,
 }: FloatingToolbarProps) {
@@ -526,6 +530,18 @@ export function FloatingToolbar({
               onPress={onToggleFingerDrawing}
               theme={theme}
             />
+
+            <SmallIconButton
+              iconName="expand"
+              active={isFullscreen}
+              compact={isCompactHorizontal}
+              accessibilityLabel={
+                isFullscreen ? t.editor.disableFullscreen : t.editor.enableFullscreen
+              }
+              onPress={onToggleFullscreen}
+              theme={theme}
+            />
+
             <SmallIconButton
               iconName="arrow-undo-outline"
               compact={isCompactHorizontal}

src/i18n/locales/de.ts

@@ -181,6 +181,8 @@ export const de: Strings = {
     goToPageA11y: (page: number) => `Zu Seite ${page} wechseln`,
     undo: 'Widerrufen',
     redo: 'Wiederholen',
+    enableFullscreen: 'Vollbild aktivieren',
+    disableFullscreen: 'Vollbild deaktivieren',
     enableFingerDrawing: 'Fingerzeichnen aktivieren',
     disableFingerDrawing: 'Fingerzeichnen deaktivieren',
     tapToAddText: 'Tippen, um Text hinzuzufügen',

src/i18n/locales/en.ts

@@ -181,6 +181,8 @@ export const en = {
     goToPageA11y: (page: number) => `Go to page ${page}`,
     undo: 'Undo',
     redo: 'Redo',
+    enableFullscreen: 'Enable fullscreen',
+    disableFullscreen: 'Disable fullscreen',
     enableFingerDrawing: 'Enable finger drawing',
     disableFingerDrawing: 'Disable finger drawing',
     tapToAddText: 'Tap to add text',

src/i18n/locales/es.ts

@@ -181,6 +181,8 @@ export const es: Strings = {
     goToPageA11y: (page: number) => `Ir a la página ${page}`,
     undo: 'Deshacer',
     redo: 'Rehacer',
+    enableFullscreen: 'Activar pantalla completa',
+    disableFullscreen: 'Desactivar pantalla completa',
     enableFingerDrawing: 'Activar dibujo con el dedo',
     disableFingerDrawing: 'Desactivar dibujo con el dedo',
     tapToAddText: 'Toca para añadir texto',

src/i18n/locales/fr.ts

@@ -181,6 +181,8 @@ export const fr: Strings = {
     goToPageA11y: (page: number) => `Aller à la page ${page}`,
     undo: 'Annuler',
     redo: 'Rétablir',
+    enableFullscreen: 'Activer le plein écran',
+    disableFullscreen: 'Désactiver le plein écran',
     enableFingerDrawing: 'Activer le dessin au doigt',
     disableFingerDrawing: 'Désactiver le dessin au doigt',
     tapToAddText: 'Touchez pour ajouter du texte',

src/i18n/locales/it.ts

@@ -181,6 +181,8 @@ export const it: Strings = {
     goToPageA11y: (page: number) => `Vai alla pagina ${page}`,
     undo: 'Annulla',
     redo: 'Ripeti',
+    enableFullscreen: 'Attiva schermo intero',
+    disableFullscreen: 'Disattiva schermo intero',
     enableFingerDrawing: 'Attiva disegno col dito',
     disableFingerDrawing: 'Disattiva disegno col dito',
     tapToAddText: 'Tocca per aggiungere testo',

src/i18n/locales/ja.ts

@@ -181,6 +181,8 @@ export const ja: Strings = {
     goToPageA11y: (page: number) => `${page}ページへ移動`,
     undo: '取り消す',
     redo: 'やり直す',
+    enableFullscreen: '全画面表示を有効にする',
+    disableFullscreen: '全画面表示を無効にする',
     enableFingerDrawing: '指での描画を有効にする',
     disableFingerDrawing: '指での描画を無効にする',
     tapToAddText: 'タップしてテキストを追加',

src/i18n/locales/ko.ts

@@ -181,6 +181,8 @@ export const ko: Strings = {
     goToPageA11y: (page: number) => `${page}페이지로 이동`,
     undo: '실행 취소',
     redo: '다시 실행',
+    enableFullscreen: '전체 화면 사용',
+    disableFullscreen: '전체 화면 사용 안 함',
     enableFingerDrawing: '손가락 그리기 켜기',
     disableFingerDrawing: '손가락 그리기 끄기',
     tapToAddText: '탭하여 텍스트 추가',

src/i18n/locales/nl.ts

@@ -181,6 +181,8 @@ export const nl: Strings = {
     goToPageA11y: (page: number) => `Ga naar pagina ${page}`,
     undo: 'Herstel',
     redo: 'Opnieuw',
+    enableFullscreen: 'Volledig scherm inschakelen',
+    disableFullscreen: 'Volledig scherm uitschakelen',
     enableFingerDrawing: 'Tekenen met vinger aanzetten',
     disableFingerDrawing: 'Tekenen met vinger uitzetten',
     tapToAddText: 'Tik om tekst toe te voegen',

src/i18n/locales/pt.ts

@@ -181,6 +181,8 @@ export const pt: Strings = {
     goToPageA11y: (page: number) => `Ir para a página ${page}`,
     undo: 'Desfazer',
     redo: 'Refazer',
+    enableFullscreen: 'Ativar ecrã inteiro',
+    disableFullscreen: 'Desativar ecrã inteiro',
     enableFingerDrawing: 'Ativar desenho com o dedo',
     disableFingerDrawing: 'Desativar desenho com o dedo',
     tapToAddText: 'Toque para adicionar texto',

src/i18n/locales/ru.ts

@@ -191,6 +191,8 @@ export const ru: Strings = {
     goToPageA11y: (page: number) => `Перейти к странице ${page}`,
     undo: 'Отменить',
     redo: 'Повторить',
+    enableFullscreen: 'Включить полноэкранный режим',
+    disableFullscreen: 'Выйти из полноэкранного режима',
     enableFingerDrawing: 'Включить рисование пальцем',
     disableFingerDrawing: 'Выключить рисование пальцем',
     tapToAddText: 'Коснитесь, чтобы добавить текст',

src/i18n/locales/zhHans.ts

@@ -178,6 +178,8 @@ export const zhHans: Strings = {
     goToPageA11y: (page: number) => `前往第 ${page} 页`,
     undo: '撤销',
     redo: '重做',
+    enableFullscreen: '啟用全螢幕',
+    disableFullscreen: '停用全螢幕',
     enableFingerDrawing: '开启手指绘画',
     disableFingerDrawing: '关闭手指绘画',
     tapToAddText: '点按以添加文本',

src/i18n/locales/zhHant.ts

@@ -178,6 +178,8 @@ export const zhHant: Strings = {
     goToPageA11y: (page: number) => `前往第 ${page} 頁`,
     undo: '還原',
     redo: '重做',
+    enableFullscreen: '啟用全螢幕模式',
+    disableFullscreen: '停用全螢幕模式',
     enableFingerDrawing: '開啟手指繪圖',
     disableFingerDrawing: '關閉手指繪圖',
     tapToAddText: '點一下以加入文字',