Olá Dev, esse é meu primeiro tutorial e pretendo ensinar de forma fácil como criar um componente no seu app que detecta em qual direção o dedo se moveu (Swipe Gesture). Para seguir esse tutorial recomendo alguns conhecimentos básicos de programação e do react native em si.
Criando o app
Vamos criar um app utilizando o comando abaixo no terminal:
react-native init swipeGesture && cd swipeGesture
Execute o app pela primeira vez a depender da plataforma que você está utilizando:
Android:
react-native run-android
iOS:
react-native run-ios
Inicialmente o app deverá executar com essa aparência (versão 0.63.4):
Crie uma pasta chamada “src” na raiz do seu projeto, e dentro dela vamos criar uma pasta chamada “Screens”, dentro da Screens crie uma pasta chamada “Home”, essa será a tela principal do nosso app.
Vamos criar um arquivo dentro na nossa pasta Home, bem simples inicialmente, com o seguinte conteúdo:
E na raiz do nosso projeto, no arquivo App.js, vamos alterar o conteúdo dele:
Agora na nossa tela do app já deve mostrar centralizada a palavra HOME.
Vamos criar um quadrado no meio dessa tela, onde será posicionado nosso grid. Comece importando o componente Dimensions do próprio react native que nos dará dinamicamente o tamanho do nosso quadrado, e crie a constante gridDimension:
No nosso styles vamos criar um estilo inicial pra esse grid:
E dentro da View principal criamos nosso grid:
Capturando o movimento
Para saber em qual direção o dedo deslizou dentro do grid usaremos uma lib chamada react-native-swipe-gestures, você pode encontra-la nesse link.
Instale a lib com o comando abaixo no terminal:
npm install react-native-swipe-gestures --save
Importe a biblioteca:
Vamos criar um método inicial que dará para qual direção o dedo deslizou, para isso também vamos utilizar hooks, primeiro vamos criar as variáveis de estado e importar as constantes de direção do gesto capturado:
A biblioteca não funciona perfeitamente no iOS, então segui a orientação abaixo como solução de contorno, o que podemos usar como padrão, nela vamos criar 3 funções, a primeira para dizer se o dedo deslizou pra cima ou pra baixo, a segunda pra direita ou pra esquerda e a principal que dirá em qual eixo o deslize foi predominante:
Agora o método chave que definirá em qual direção vamos atuar no processamento do grid:
E o componente que vamos substituir a View que tínhamos criado inicialmente:
Nesse ponto o nosso aplicativo deve dizer pra qual lado o dedo deslizou dentro do grid.
Espero que esse tutorial possa ser útil pra você, críticas e sugestões são bem vindas.
O código final você pode encontrar no meu GitHub.
https://github.com/BenHurMartins/swipe-gesture-example/tree/master
