/expand_content_react_native

Exemplo de um componente expansível de acordo com o tamanho do mesmo.

Primary LanguageJavaScriptMIT LicenseMIT

expand_content_react_native

Aplicativo desenvolvido em React Native para demonstração de um componente expansível de acordo com o tamanho do mesmo, utilizando animações para melhor fazer as transições do tamanho.

❓ Por quê?

Este aplicativo foi desenvolvido para testar o aprendizado de animações do React Native, neste caso foi criado um componente que faz o uso de animações para alterar o seu tamanho de acordo com o seu conteúdo, utilizando as animações para fazer uma transição mais bonita, visualmente falando.
Quando criamos um componente, podemos definir seu tamanho ou deixa-lo automático de acordo com o seu conteúdo, porém, isso pode deixar as telas visualmente sobrecarregadas
Com este exemplo podemos ver como a tela fica mais amigável ao definir um tamanho fixo e fazer com que somente é mostrado o que for escolhido, utilizar animações para fazer as transições dos tamanhos.

📱 Demo

Demo

🚀 Iniciando

Para executar este aplicativo. você deverá ter um ambiente de trabalho configurado para o desenvolvimento em React Native.
No meu caso, utilizei um dispositivo físico com sistema operacional Android para testes, mas você pode usar um emulador.

Começando:

  • Clone o repositório com o comando git clone (veja mais)
  • Abra um prompt de comando (famoso cmd) na pasta raiz ou navegue até ela, e insira o comando npx isntall ou npm install ou yarn install, dependendo do gerenciador de pacotes que você usa, este comando serve para instalar os pacotes/módulos utilizado nesse projeto
  • Após a instalação dos pacotes/módulos, você pode executar no emulador/dispositivo com o comando npx react-native run-android

🔩 Módulos

Neste projeto foram utilizado os seguintes módulos:
react-native-reanimated - Animações dos componentes
react-native-gesture-handler - Lidar com gestos na tela

E todas as dependências desses módulos que estão presentes em suas respectivas paginas.

👏 Agradecimentos

Agradecimentos a todos os desenvolvedores dos módulos acima.

📃 Notas/Problemas

Nada por enquanto, mas sinta-se livre para dar sugestões. 👍

⚠️ Licença

Você pode usar este aplicativos para estudos, e apenas para estudo, está proibido a sua publicação ou apropriação do código.

📷 Screenshots

Screenshots