Bloqueio de Captura de Tela (Android e React Native)

Para aumentar a segurança do aplicativo e proteger dados sensíveis durante o manuseio de cartões, é possível impedir que o sistema realize capturas de tela (screenshots) ou gravações de vídeo enquanto o app estiver em primeiro plano.

1. Implementação Nativa (Android/Kotlin)

No Android, essa funcionalidade é controlada através das flags da janela (window). Ao definir a flag FLAG_SECURE, o sistema operacional bloqueia capturas e oculta o conteúdo em visualizações de multitarefa.

Para ativar o bloqueio: O método abaixo deve ser chamado ao iniciar o pagamento, garantindo a proteção dos dados desde o começo da transação:

private fun setScreenBlock() {
    window.setFlags(
        WindowManager.LayoutParams.FLAG_SECURE,
        WindowManager.LayoutParams.FLAG_SECURE
    )
}

Para permitir capturas novamente: Caso o fluxo de pagamento tenha sido finalizado e você deseje permitir que o usuário tire um print do recibo ou grave a tela novamente, utilize a seguinte linha de código para limpar a trava de segurança:

private fun clearScreenBlock() {
    window.clearFlags(WindowManager.LayoutParams.FLAG_SECURE)
}

1. Integração com React Native (Native Module)

Para expor essa funcionalidade ao JavaScript, a melhor abordagem é criar um Native Module. Em sua classe que estende ReactContextBaseJavaModule, adicione o seguinte método:

@ReactMethod
fun setSafeMode(enable: Boolean) {
    currentActivity?.let { activity ->
        activity.runOnUiThread {
            if (enable) {
                activity.window.addFlags(WindowManager.LayoutParams.FLAG_SECURE)
            } else {
                activity.window.clearFlags(WindowManager.LayoutParams.FLAG_SECURE)
            }
        }
    }
}

Exemplo de Uso no Componente React Native

No React Native, utilize o hook useEffect para gerenciar o estado de bloqueio de acordo com o ciclo de vida da tela. No exemplo abaixo, o modo seguro é ativado ao entrar na tela Home .

import { useEffect } from 'react';
import { NativeModules } from 'react-native';

export function Home() {
  // ... outras lógicas do componente

  useEffect(() => {
    // Referência ao módulo nativo criado
    const SafeMode = NativeModules.NativeModule;

    // Ativa o bloqueio ao montar a tela
    if (SafeMode && SafeMode.setSafeMode) {
      SafeMode.setSafeMode(true);
    }

    // Função de limpeza (Cleanup): executada ao sair da tela (unmount)
    return () => {
      if (SafeMode && SafeMode.setSafeMode) {
        SafeMode.setSafeMode(false); // Libera a tela para prints novamente
      }
    };
  }, []);

  return (
    // Seu JSX aqui (Container, Input, BottomSheet, etc.)
  );
}