Biscoigram. Um clone do Instagram usando React Native e Firebase — parte 4
Construa sua própria versão do Instagram… mas é aquele ditado: Meu app, minhas regras!
Parte 1 — Criando estrutura
Parte 2 — Incluindo ícones
Parte 3 — Home: Primeiros componentes
Parte 4 — Home: Criando os Posts
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.jsPost 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
