Olá Rocketz, hoje estarei apresentando para vocês uma maneira fácil de utilizar componentes visuais nativos comuns como: Menus, botões e cards no react native, que dará para os seus apps um upgrade visual por meio dos guidelines padrões do mundo mobile como o material design. Então vamos lá! 👨‍💻
(obs: É novo no react native? Siga esse tutorial do Facebook para se familiarizar com as ferramentas).

Mas o que é o Native Base?

O Native Base é uma biblioteca open source de componentes visuais, que nos disponibiliza rapidamente componentes comuns e reusáveis como os botões, textos e menus que vemos nos apps nativos de forma rápida e fácil. O mais legal é que a comunidade é bem grande e ativa. Regularmente  eles realizam updates fresquinhos que podem ser encontrados na documentação.

Sem mais papo furado, vamos ao que interessa 😎

Instalação

Para iniciar, você vai precisar ter o gerenciador de pacote npm instalado em sua máquina, se você seguiu o tutorial acima do Facebook para instalação do react native, tudo deve funcionar bem :).

O próximo passo é iniciarmos o nosso projeto, então vá para o seu diretório favorito de projetos e rode o seguinte comando:

react-native init fantasticProject
cd fantasticProject

Agora que já iniciamos o nosso projeto, podemos instalar o Native Base:

npm install native-base --save

O que iremos construir

Agora que já fizemos o setup do nosso projeto, vamos por a mão na massa e desenvolver um app que incrementa um contador simples, no clique de um botão, iremos utilizar alguns componentes como navbar, button, toast e text, para ver a utilização dessa lib na prática.

Plugue o seu celular ou inicie o seu emulador e rode o comando abaixo para visualizar como está o seu app agora:

react-native run-android

Ou

react-native run-ios

Você deve obter um resultado parecido com esse:

Tela de Welcome React Native

Vamos começar a modificar essa tela, para isso abra o arquivo App.js no seu editor favorito (por aqui utilizamos o Visual Code.). O App.js é o nosso arquivo de entrada, que é chamado assim que iniciamos o nosso app, vamos começar removendo o que não precisaremos utilizar e importando o native base:

import React, {Component} from 'react';
import { View } from 'react-native';
import { Container, Header, Left, Body, Right, Title, Button, Toast , Text } from 'native-base'

export default class App extends Component {
  render() {
    return (
      <Container>
      </Container>
    );
  }
}

Perceba que importamos os componentes do Native Base que utilizaremos como o nosso Header, o Text e o Toast para exibir a mensagem de atualização do contador.

Nosso próximo passo é adicionar os componentes de cabeçalho, texto e o botão em nossa interface:

import React, {Component} from 'react';
import { View } from 'react-native';
import { Root, Container, Header, Left, Body, Right, Title, Button, Toast , Text } from 'native-base'

export default class App extends Component {
  render() {
    return (
      <Container>
         <Header>
          <Left/>
          <Body>
            <Title>Fantastic Project</Title>
          </Body>
          <Right />
        </Header>
        <View style={{flex: 1, justifyContent: "center", alignItems:"center"}}>
          <Text>0</Text>
          <Button style={{alignSelf: "center", marginTop: 20}} rounded>
            <Text>Incrementar!</Text>
          </Button>
        </View>
      </Container>
    );
  }
}

Adicionamos alguns estilos para alinhas os componentes no centro da tela, quando visualizar o seu app agora ele deve estar assim:

Deve ter percebido que não acontece nada ao clicar no botão, é o que faremos a seguir, vamos adicionar a lógica para que ao clicar no botão, haja o incremento do número e um aviso de que adicionamos um número, vamos ao código:

O primeiro passo é definir o nosso estado para o contador, então vamos criar um estado que será atualizado ao clicarmos no botão:

export default class App extends Component {

  state = {
    counter: 0
  }

O próximo passo é criarmos o nosso método que irá incrementar o valor do counter e exibir uma mensagem através do componente Toast (Personalize a mensagem como quiser):

export default class App extends Component {

  state = {
    counter: 0
  }

  incrementNumber = () => {
      this.setState({ counter: this.state.counter + 1 });
      Toast.show({
        text: "Número atualizado!",
        position: "bottom",
        duration: 2000
      })
  }

Por fim iremos adicionar um listener no nosso botão para que quando for clicado chame o nosso método incrementNumber, e modificar o nosso texto central para receber o valor do estado, assim quando o nosso estado counter for atualizado, o nosso texto também será:

 <Container>
         <Header>
           <Left/>
           <Body>
            <Title>Fantastic Project</Title>
           </Body>
           <Right />
         </Header>
         <View style={{flex: 1, justifyContent: "center", alignItems:"center"}}>
           <Text>{this.state.counter}</Text>
           <Button onPress={this.incrementNumber} style={{alignSelf: "center", marginTop: 20}} rounded>
           <Text>Incrementar!</Text>
           </Button>
         </View>
 </Container>

É isso ai! O nosso código final fica com essa cara:

import React, {Component} from 'react';
import { View } from 'react-native';
import { Root, Container, Header, Left, Body, Right, Title, Button, Toast , Text } from 'native-base'

export default class App extends Component {

  state = {
    counter: 0
  }

  incrementNumber = () => {
      this.setState({ counter: this.state.counter + 1 });
      Toast.show({
        text: "Número atualizado!",
        position: "bottom",
        duration: 2000
      })
  }

  render() {
    return (
      <Root>
       <Container>
         <Header>
          <Left/>
          <Body>
            <Title>Fantastic Project</Title>
          </Body>
          <Right />
        </Header>
        <View style={{flex: 1, justifyContent: "center", alignItems:"center"}}>
          <Text>{this.state.counter}</Text>
          <Button onPress={this.incrementNumber} style={{alignSelf: "center", marginTop: 20}} rounded>
            <Text>Incrementar!</Text>
          </Button>
        </View>
       </Container>
      </Root>
    );
  }
}

Quando rodar o seu projeto agora deverá obter o seguinte resultado:

YES! Com isso você deu os seus primeiros passos com o Native Base, há muito mais componentes para serem usados e explorados, acessando esta página! Continue e utilize um desses componentes para modificar o nosso projeto, o limite está na sua imaginação :). Sinta-se livre para comentar e sugerir novos tutoriais, e até a próxima! 👋

Encontre o código completo do projeto aqui.