Utilizando NativeBase no React Native

Padronizando o Layout com NativeBase no React Native

Utilizando NativeBase no React Native

Se existe uma coisa que faz muitos Apps React Native pecarem é a falta de organização e padrão no Layout. Isso porque apps construídos com ele requerem um mínimo de estilização e métricas, que as vezes é complicado compreender.

Se te incomoda cuidar desses detalhes existe algumas bibliotecas focadas nisso, e sua atenção se volta apenas ao negócio da aplicação.

Hoje neste post mostraremos uma biblioteca muito simples e robusta, o NativeBase, que cuidará disso sem problemas. Com ele você terá uma gama de componentes construídos para se comportarem como nativos em Android e iOS.

Como funciona?

O NativeBase servirá apenas para cuidar do Layout da aplicação, nada mais é do que as estilizações em cima de componentes. Com ele teremos componentes como Header, TabsList, ButtonCard e entre outros prontos para usarmos, precisando apenas de organizarmos os mesmos.

Com isso o Layout será ajustado tanto para Android quanto iOS, cada um seguindo seu Design padrão:

React Native com NativeBase Android vs iOS

Observe que o componente utilizado é o mesmo, ListItem, entretanto o Design permaneceu nativo de cada plataforma, essa é a grande sacada do NativeBase.

Instalação

Como na maioria das bibliotecas, não há segredos para sua instalação. Primeiro criaremos um projeto:

react-native init rocketapp

Umas vez com ele criado, instalaremos o NativeBase:

yarn add native-base
// ou npm install native-base

Por depender de outras bibliotecas, como o caso da fonte de ícones, e ela por sua vez altera a estrutura nativa, usaremos o link fazer isso:

react-native link native-base

Pronto!! Já temos tudo configurado para utilizamos essa biblioteca fantástica. Basta rodamos nossa aplicação.

react-native run-android
// ou react-native run-ios

Aplicação like a boss

E é lógico que vamos vamos fazer algo juntos, somos a Rocketseat!!!!

Dividirei os códigos por partes, assim ficará mais fácil entender!!

Por estar tudo num arquivo só, importaremos um caminhão de componentes, então no App.js:

Alguns dados para utilizamos no nosso App:

Agora vamos criar a base do nosso App, onde haverá um Header, TabBar e uma pequena estilização:

Observe que com poucos códigos já temos a cara do App definida. No Header adicionamos a propriedade androidStatusBarColor para forçar a cor que queremos no StatusBar do Android. No iOS ele pega a cor do Header.

No código coloquei Home, Notification e Message como componentes null para fazermos em seguida. Teremos algo parecido com isso:

React Native com NativeBase layout principal

Tab Home

Agora definiremos o conteúdo da nossa Tab Home, que será a apresentação de dois post do blog em forma de uma lista de Cards. Substituiremos o null pelo código abaixo:

Precisamos notar a organização e o que cada componente representa com suas respectivas propriedades. Mais detalhes sobre Card.

React Native com NativeBase TabHome

Tab Messages

O conteúdo desse Tab será uma lista de mensagens de usuários e mais uma vez o NativeBase disponibiliza tudo pronto, precisamos apenas saber organizar os componentes.

Neste TabMessages colocaremos um FAB (Floating Action Button) para “adicionarmos” mais usuários na conversa. Dale código:

É como se cada componente falasse por si só!! Mais sobre List.

React Native com NativeBase TabMessages content

Tab Notification

Poderíamos fazer esse componente juntos, mas que tal você mostrar o que aprendeu e fazê-lo? Esse é o meu desafio para você!! Não esquece de postar lá na comunidade hehe.

React Native com NativeBase App final

Não é adeus, é até logo!!!

Então, fala que não é simples?? E como é comum na comunidade existem outras alternativas, mas hoje ficaremos com essa biblioteca *—*.

Se há alguma dúvida sobre o React Native e algumas funcionalidades do ES6+, não deixa de se inscrever no nosso curso gratuito sobre React Native e ES6+.

Ah é!! Não esqueça de compartilhar com seus amigos Devs e podes deixar também um comentário maroto ali embaixo :P.

Código no github: https://github.com/Rocketseat/blog-native-base

See you later!!

AdonisJS + ReactJS + React Native
A seguir:

Utilizando o ModalRoute e fazendo upload de imagens

Utilizando o ModalRoute e fazendo upload de imagens