javascript + typescript + tecnologia + … = amor

Modal no React Native

React Native = A framework for building native apps using React

React Native = amorzinho

Este post tem como objetivo mostrar a solução para um problema que passamos recentemente utilizando o componente de Modal do React Native (não entraremos em termos ou assunto muito técnicos).

Se você já o utilizou, provavelmente já passou pelo seguinte problema: ao abrir um determinado modal, ao menos que você tenha um botão dentro dele para realizar um hide ou dismiss, ou como tenha nomeado, ele permanecerá aberto como no exemplo a seguir.

O componente apenas será aberto, mas não conseguirá ser fechado.

Código do componente de Modal.

Pesquisando, consegui chegar a uma conclusão bem objetiva. Inclusive, caso alguém tenha a solucionado de outra maneira, fico a disposição.

Ao clicar em qualquer parte fora do componente, o estado de sua visibilidade será alterado.

Inclusão do TouchableWithoutFeedback

Com a inclusão do TouchableWithoutFeedback e sua determinada ação, posso alterar o estado de sua visibilidade e o mesmo será fechado após eu clicar em qualquer parte fora do modal.

Código Fonte

O código fonte deste projeto está disponibilizado e pode ser encontrado neste repositório do GitHub.