Biscoigram. Um clone do Instagram usando React Native e Firebase — parte 4

Brunno Hofmann
Nov 3 · 3 min read

Construa sua própria versão do Instagram… mas é aquele ditado: Meu app, minhas regras!



Até o momento já criamos os componentes de Stories. Neste arquivo vamos esquematizar a estrutura dos Posts.

Pensando em componentes podemos separar nosso Post como no desenho logo abaixo. Desta forma conseguimos nos preocupar com cada grupo separadamente. Isso vai ajudar na manutenção e nos testes.


Post Wrapper

A função deste componente é apenas receber informações de post e repassá-las aos filhos. Atualmente estamos trabalhando com dados falsos, mas no futuro este componente pode ser responsável por apenas receber um identificados e buscar assincronamente os dados.

Por enquanto apenas o criamos.

$ mkdir src/components/Post
$ touch src/components/Post/index.js

Post Header

Com tudo o que vimos até aqui provavelmente você já deve ter percebido que apenas utilizamos de componentes já criados por nós (como Box e Avatar) para organizar o layout.

React Native utiliza extensamente o Flexbox, portanto, se ainda não está familiarizado com isso recomendo a leitura deste site.

Post Image

Neste componente apenas recebemos a imagem e exibimos por enquanto.
Posteriormente iremos implementar a opção de biscoitar.

Tendo em vista os diferentes tipos de aparelhos, utilizamos o componente Dimensions, que nos entrega um snapshot da altura do dispositivo. Desta forma configuramos que a altura de cada imagem por post ocupará 1/3 da tela.

Post Actions

As ações do nosso aplicativo no momento são: Biscoitar, Flopar e Comentar.

O que há de novo neste componente é que criamos um arquivo de Constants, para facilitar qualquer mudança na aplicação.

Crie o arquivo src/constants/colors.js e escreva:

export const appIconColor = '#5f5a6b'

Você também pode editar o componente Header.js para refletir a nova configuração de cor para os ícones de camera e inbox.

Post Subtitle

Aqui temos uma condicional que verifica se existe realmente uma legenda para o post antes de exibí-la.

Finalizando Post

Agora é hora de unir todos os componentes que criamos dentro do PostWrapper.

Lembra do arquivo que criamos em src/components/Post/index.js?
Dentro dele cole:


Então isto é tudo. Se tudo ocorreu bem você pode ver algo como:


Você pode acessar o nosso github do projeto e contribuir caso tenha interesse.

Também… fique livre para comentar qualquer feedback.


Esta é uma série de artigos sobre a construção do Biscoigram… nossa versão otimizada do instagram.

Parte 1 — Criando estrutura
Parte 2 — Incluindo ícones
Parte 3 — Home: Primeiros componentes

Brunno Hofmann

Written by

Um desenvolvedor que ama a profissão, tem o teatro como paixão e a escrita como refúgio. Ps.: Digimon é melhor que Pokemon. @brunnohofmann

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade