Doc Core

Telas Customizáveis

É possível personalizar as telas de instrução e permissão, fornecendo componentes de views customizadas.

1. Tela de Instruções

Para incorporar uma tela de instruções personalizável, é necessário criar um componente que retorne a nossa tela, passando o componente personalizado CustomInstructionView para Liveness2dView..

<Liveness2dView
   options={options}
   navigation={navigation}
	 loading={loading}
   callbackView="Home"
   CustomInstructionView={<InstructionsView navigation={navigation} />} //  <--------
   onSuccess={onSuccess} 
   onError={onError} 
/>

Componente Botão de Ação: <DocCoreBackButton> </DocCoreBackButton>

Para iniciar a jornada da Doc Core, é necessário importar o componente e envolver seu botão ou imagem quando o usuário clicar em 'Voltar' dentro do seu componente personalizado.

<DocCoreBackButton>
  <Image
    source={require('../../../assets/images/left-arrow.png')}
    style={styles.leftArrow}
	/>
</DocCoreBackButton>

Componente Botão de Ação: <DocCoreContinueButton> </DocCoreContinueButton>

Para iniciar a jornada da Doc Core, é necessário importar o componente e envolver seu botão, texto ou imagem, quando o usuário clicar em 'Continuar' ou em algum documento dentro do seu componente personalizado.

<DocCoreContinueButton style={{}}>
      <Text style={styles.nextText}>Continuar</Text>
</DocCoreContinueButton>

2. Tela de Permissões

Para incluir uma tela de permissão, adicione o componente da sua tela como parâmetro para CustomPermissionView.

<DocumentsCopyView
   options={options}
   navigation={navigation}
	 loading={loading}
   callbackView="Home"
       CustomPermissionView={<PermissionView navigation={navigation} />} //  <--------
   onSuccess={onSuccess} 
   onError={onError} 
/>

Componente Botão de Ação:: <DocCorePermissionButton> </DocCorePermissionButton>

Para executar a verificação de permissão para o usuário, importe o componente e envolva seu botão, texto ou imagem de permissão dentro do seu componente personalizado.

<DocCorePermissionButton style={{}}>
    <Text style={styles.nextText}>Verificar Permissão</Text>
</DocCorePermissionButton>

Objeto do Tema

No React Native, utilizamos um objeto para realizar diversas alterações no tema.

1. Theme

Objeto de customização responsável pelas cores da jornada da Doc Core

theme: {
      setCaptureInstructionGuideText: 'textGUIDE',
      setCaptureInstructionGuideBackgroundColor: '#DD0101',
      setCaptureInstructionGuideTextColor: '#4bb75f',
},

1.1 Propriedades customizáveis

Abaixo, estão mapeadas as propriedades para customização do ThemeBuilder.

Customizações de telas ThemeBuilder

2. Tela de Loading

3. Tela de Captura

4. Tela de Resultado

5. Tela de Instruções(Nativa)

Você pode utilizar o parâmetro nativeCustom no objeto de options assim você ativa a tela de instruções native e as propriedades customizáveis da tela.

{
    appkey: '',
    ticket: '',
    environment: 'HML',
    nativeCustom: true, // <---------
  }