Biscoigram. Um clone do Instagram usando React Native e Firebase — parte 3
Construa sua própria versão do Instagram… mas é aquele ditado: Meu app, minhas regras!
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
Até o momento já criamos a estrutura de menu e incluímos os ícones. Agora é a vez de criarmos os primeiros componentes da nossa página inicial. Neste artigo vamos fazer a Header e o componente dos Stories.
Criando a Header
A Header é simples. Precisamos apenas incluir dois ícones e o nome do nosso App.
Para isso criamos o arquivo Header.js dentro da nossa pasta de componentes.
Em seguida importamos o React, alguns componentes do React Native e nossa biblioteca ícones.
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
Icon.loadFont();Em seguida exportamos o nosso componente desta forma.
export default () => (
<View>
<Icon name="camera" size={20} />
<Text>BiscoiGram</Text>
<Icon name="inbox" size={20} />
</View>
);Atribuímos o estilo da Header para que a mesma disponha nossos elementos em uma linha(row).
const styles = StyleSheet.create({
container: {
alignContent: 'center',
borderBottomColor: '#ccc',
borderBottomWidth: 0.5,
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
paddingBottom: 10,
},
title: {
fontSize: 18,
},
});Por fim, associe o estilo container para a tag View e o estilo title para a tag Text.
<View style={styles.container}>
<Icon name="camera" size={20} />
<Text style={styles.title}>BiscoiGram</Text>
<Icon name="inbox" size={20} />
</View>Agora possuímos nossa Header. Mas você deve ter notado que os ícones ficaram muito próximo à borda do aparelho.
Neste caso criaremos um componente de caixa de layout para utilizarmos em qualquer outro componente. Desta forma conseguimos um harmonização entre todo o layout.
Crie um arquivo Box.js dentro da pasta components e escreva.
import React from 'react';
import { StyleSheet, View} from 'react-native';
import {horizontalPaddingBase} from '../constants/layout';
export default ({children, style}) => (
<View style={{...styles.box, ...style}}>
{ children }
</View>
);
const styles = StyleSheet.create({
box: {
paddingHorizontal: 20,
},
});Neste arquivo recebemos a propriedade children e style via desestruturação por meio da sintaxe ({children, style}). O que aconteceu?
Todo componente React recebe propriedades (props). Que é um objeto que contém sempre um atributo children e qualquer parâmetro que enviamos dentro dele. Isso quer dizer que sempre que escrevemos, por exemplo:
<Box style={styles.container}>
<Icon name="camera" size={20} />
<Text style={styles.title}>BiscoiGram</Text>
<Icon name="inbox" size={20} />
</Box>Enviamos para nosso componente Box o parâmetro style.
Já children são os filhos de Box, ou no nosso caso, os componentes Icon e Text.
Nosso componentes recebe os atributos da seguinte forma:
export default (props)…
E acessaríamos os valores que queremos assim: props.style e props.children.Utilizando a desestruturação, fazemos com que nosso componente Box saiba exatamente o que esperamos receber e o que de fato utilizamos. Deixando nosso código mais limpo e melhor de ler.
Daqui pra frente utilizaremos este padrão.
Agora que temos o componente de layout Box, apenas precisamos substituir nossa View do componente Header pela Box recém criada.
...
import Box from './Box';
...
<Box style={styles.container}>
<Icon name="camera" size={20} />
<Text style={styles.title}>BiscoiGram</Text>
<Icon name="inbox" size={20} />
</Box>Agora temos nosso componente de Header, basta apenas importá-lo dentro da nossa screens/Home.js
...
import Header from '../components/Header';
...
<SafeAreaView>
<Header />
</SafeAreaView>Criando os Stories
Para criarmos os stories primeiro vamos focar no menor elemento, que são os containers dos avatares.
Este pequeno elemento:
Para isso criamos o componente Avatar.js dentro da pasta components.
Se você observar o app do instagram verá que ele usa o avatar em vários locais, no stories, nos comentários, no seu perfil, na descrição de posts… apenas modificando o tamanho.
Desta forma, nosso componente Avatar é genérico, recebendo e exibindo a imagem.
import React from 'react';
import {Image, StyleSheet} from 'react-native';
export default ({uri, size = 8}) => (
<Image source={{uri: uri}}
style={{...styles.image,
height: size * 8,
width: size * 8 }}
/>
);
const styles = StyleSheet.create({
image: {
borderColor: 'purple',
borderRadius: 50,
borderWidth: 2.5,
},
});O atributo size tem o padrão 8, mas pode variar de acordo com o tamanho que queremos atingir.
Agora criamos o arquivo StoryThumb.js na pasta de components.
import React from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
import Avatar from './Avatar';
export default ({imageUrl, profile}) => (
<View style={styles.view}>
<Avatar uri={imageUrl} />
<Text style={styles.text}>{profile.profileName}</Text>
</View>
);
const styles = StyleSheet.create({
text: {
fontSize: 11,
paddingVertical: 4
},
view: {
alignItems: "center",
display: "flex",
marginTop: 8,
marginRight: 8
}
});Nosso componente recebe apenas a Uri da imagem e o perfil do usuário, que esperamos existir um profileName.
Agora podemos exibir nossos stories através dos componentes que criamos.
Mas de onde vêm os dados?
Inicialmente criamos um arquivo de fakedata, mas posteriormente usaremos o firebase para trazer dinamicidade ao nosso app.
Copie nossos dados falsos e salve em mocks/fakeData.js:
Já na nossa Home:
...
import {SafeAreaView, ScrollView, StyleSheet} from 'react-native';
import fakeData from '../mocks/fakeData';
...<Header />
<ScrollView style={styles.stories} horizontal showsHorizontalScrollIndicator={false}>
{
fakeData.stories.map(story => (
<StoryThumb key={story.profile.imageUrl} imageUrl=
{story.profile.imageUrl} profile={story.profile}/>
))
}
</ScrollView>const styles = StyleSheet.create({
stories: {
borderBottomColor: '#ccc',
borderBottomWidth: 0.5,
backgroundColor: '#ececec',
paddingHorizontal: 8
},
});
ScrollView é um componente do React-native utilizado para permitir que tenhamos o efeito de rolagem. Ele pode ser horizontal ou vertical (que é o padrão).
showsHorizontalScrollIndicator fará com que o nossa scroolView exiba ou não a barra de rolagem quando a quantidade de thumbs ultrapassar as bordas do aparelho.
Agora temos nossos stories e nossa header.
Se tudo ocorrer bem seu app agora se parece com isso.
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.
