diff --git a/src/app/(tabs)/(password-manager)/password-details.tsx b/src/app/(tabs)/(password-manager)/password-details.tsx index e98836a5..3e00c057 100644 --- a/src/app/(tabs)/(password-manager)/password-details.tsx +++ b/src/app/(tabs)/(password-manager)/password-details.tsx @@ -5,7 +5,6 @@ import PasswordFormCard, { import { usePasswordRepository } from "@/contexts/RepositoryContext"; import { useToast } from "@/contexts/ToastContext"; -import { getScreenShotSecureScreen } from "@/libs/screenshot_prevention"; import { formatDate } from "@passcodes/passalgo"; import FontAwesome6 from "@react-native-vector-icons/fontawesome6"; @@ -28,8 +27,6 @@ export default function PasswordDetailsScreen() { const { showToast } = useToast(); - getScreenShotSecureScreen(); - /** * Remove focus from whichever TextInput is currently focused * and dismiss the keyboard. diff --git a/src/app/(tabs)/(password-manager)/save-password.tsx b/src/app/(tabs)/(password-manager)/save-password.tsx index 0e32456b..be98496e 100644 --- a/src/app/(tabs)/(password-manager)/save-password.tsx +++ b/src/app/(tabs)/(password-manager)/save-password.tsx @@ -3,7 +3,6 @@ import FormTextField from "@/components/FormTextField"; import SecureTextField from "@/components/SecureTextField"; import { usePasswordRepository } from "@/contexts/RepositoryContext"; import { useToast } from "@/contexts/ToastContext"; -import { getScreenShotSecureScreen } from "@/libs/screenshot_prevention"; import FontAwesome6 from "@react-native-vector-icons/fontawesome6"; import { router, useLocalSearchParams } from "expo-router"; import { useState } from "react"; @@ -59,8 +58,6 @@ export default function SavePasswordScreen() { const { showToast } = useToast(); - getScreenShotSecureScreen(); - return ( {lockCategory !== "1" && ( diff --git a/src/app/(tabs)/(settings)/settings.tsx b/src/app/(tabs)/(settings)/settings.tsx index 37080b7e..fcd9aef5 100644 --- a/src/app/(tabs)/(settings)/settings.tsx +++ b/src/app/(tabs)/(settings)/settings.tsx @@ -2,6 +2,10 @@ import LinkButton from "@/components/LinkButton"; import { LinkIconButton } from "@/components/LinkIconButton"; import Text from "@/components/Text"; import Config from "@/config"; +import { + isScreenshotPreventionEnabled, + toggleScreenshotPreventionFeature, +} from "@/features/screenshot-prevention"; import { isBiometricsAuthEnabled, toggleBiometricsFeature, @@ -11,10 +15,6 @@ import { useHomeLayout, type HomeLayout, } from "@/libs/home_layout"; -import { - isScreenshotPreventionEnabled, - toggleScreenshotPreventionFeature, -} from "@/libs/screenshot_prevention"; import { FontAwesome6 } from "@react-native-vector-icons/fontawesome6"; import { LinearGradient } from "expo-linear-gradient"; import { router } from "expo-router"; diff --git a/src/components/PasswordFormCard.tsx b/src/components/PasswordFormCard.tsx index 124e1722..be2fe7f6 100644 --- a/src/components/PasswordFormCard.tsx +++ b/src/components/PasswordFormCard.tsx @@ -56,6 +56,7 @@ export default function PasswordFormCard({ value={value.password} onChangeText={(text) => onChange("password", text)} editable={editable} + screenCaptureKey="password-form" /> ; +type StrippedTextFieldProps = Omit; +type SecureTextFieldProps = StrippedTextFieldProps & { + /* generally, you can set to name of screen route, we need it for screen shot prevention */ + screenCaptureKey: string; +}; -// isPasswordVisible ? "eye-off" : "eye" -export default function SecureTextField({ ...props }: SecureTextFieldProps) { +export default function SecureTextField({ + screenCaptureKey, + ...props +}: SecureTextFieldProps) { + let { preventScreenShots, allowScreenShots } = + useSecretScreenController(screenCaptureKey); const [isPasswordVisible, setIsPasswordVisible] = useState(false); return ( @@ -17,7 +26,19 @@ export default function SecureTextField({ ...props }: SecureTextFieldProps) { secureTextEntry={!isPasswordVisible} right={ setIsPasswordVisible(!isPasswordVisible)} + onPress={() => { + setIsPasswordVisible((prev) => { + // Note: this checks are hard to understand, + // because we using previous state, read it twice!! + if (!prev) { + preventScreenShots(); + } else { + allowScreenShots(); + } + + return !prev; + }); + }} icon={({ size, color }) => ( { + return () => { + allowScreenShots(key); + }; + }, []); + + return { + preventScreenShots: () => preventScreenShots(key), + allowScreenShots: () => allowScreenShots(key), + }; +}