Idea: a fail-closed, route-aware screen guard for React Navigation

[AmineYagoub]

The problem

Apps that show private data on Android (health, school, banking) need FLAG_SECURE on the screens that show it: it blocks screenshots and screen recordings, and blanks the app's card in recent apps. In React Native the usual tools turn it on per screen: a screen calls a hook such as expo-screen-capture's usePreventScreenCapture, and is protected while that component is mounted. That fails open:

• A forgotten screen leaks. Every new screen with private data must remember to opt in. Nothing warns when one does not.
• The first frames leak. The flag is set from an effect after the screen renders, and it travels from JS to the native modules thread and then to the UI thread. When a navigation action brings a private screen in, its first frame, or the first frame of a pop animation, can be drawn on an unguarded window. The same happens when an app unlocks and remounts its navigator.
• Activity recreation keeps the last state unless something resets it.
• PIN pads need protection even when the user allows screenshots elsewhere, since a recording shows which key was pressed.

What Minhajna does

Minhajna, a school-records app, ran into this while building its app lock (djazairdev/minhajna#210, djazairdev/minhajna#255). Its guard:

• fails closed: the window is secure from each activity start until JavaScript names the screen in front;
• is told one of three kinds (open, records or pin); an unknown kind is treated as a PIN pad;
• keeps an allow-list of open screens, typed against the navigator's route names. Any screen not on the list is guarded, and the focused route is read from the navigation state, including nested tabs;
• listens to React Navigation's __unsafe_action__ event to raise the guard as each action is dispatched, before the next screen is drawn, then settles on the computed kind after the render;
• treats the gaps while the app locks and unlocks as private.

On an Android 15 emulator, 25 samples of the window flag through an unlock were all secure, and Back from an open screen was secure within 0.14 s. The code is in apps/android/src/lock/screen-guard.ts, App.tsx and android/.../lock/ScreenGuard.kt in djazairdev/minhajna.

What to build

A small library, react-navigation-screen-guard or similar:

• a native module for Android (and, where possible, iOS's capture notifications);
• a <ScreenGuard openScreens={[...]} pinScreens={[...]}> wrapper, or a hook for the NavigationContainer, that drives it from the focused route;
• the raise on navigation actions and the fail-closed start built in;
• an optional "allow screenshots" setting that never unguards the PIN screens;
• tests that read the flag through dumpsys window.

Rough size: a few hundred lines of TypeScript and Kotlin, plus an example app.

Who it helps

Any React Native app with private screens: health records, banking, messaging, education. Today each of them either guards the whole app or opts in screen by screen.