Usar Styled Components em seus apps

Por que usar Styled Components?

Com ele conseguimos estilizar nossas aplicações usando o CSS em javascript. Os styled components permitem que você escreva CSS simples em seus componentes sem se preocupar com colisões de nome de classe. Ele ajuda a escrever CSS com escopo para um único componente e não vaza para nenhum outro elemento na página.

O React Native tende a seguir uma determinada convenção quando se trata de estilizar seu aplicativo. Tal como todos os nomes de propriedade CSS devem estar em camelCasetal como background-color no React Native é:

backgroundColor: 'red'

Vamos ver na pratica como ele funciona:

Vamos criar um novo app:

react-native init styleapp

Para instalar o Styled Components usamos o comando abaixo:

• lembre-se de estar no cmd dentro da pasta do seu projeto criado.

npm install styled-components

Agora já podemos rodar nosso projeto normalmente .

• Vamos abrir nosso arquivo App.js

E ao inves de usarmos View trazendo do import do react-native vamos usar atraves do styled-components:

import React, {Component} from 'react';
import styled from 'styled-components';

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

        <Titulo>Meu Aplicativo</Titulo>

        <Botao onPress={()=> alert('Clicou!')}>
          <BotaoTexto>Entrar</BotaoTexto>
        </Botao>

      </Container>
    );
  }
}

/*Container que criamos que é uma View e já passando o estilo respectivo dele.*/
const Container = styled.View`
  flex:1;
  background-color: #0b3b80;
  justify-content: center;
  align-items: center;
`;

/*Titulo que é uma Text e já passando o estilo respectivo dele.*/
const Titulo = styled.Text`
  font-size: 35px;
  font-weight: bold;
  color: #FFF;
`;

/*Botao que criamos sendo um TouchableOpacity*/
const Botao = styled.TouchableOpacity`
  width: 300px;
  height: 50px;
  border-radius: 5px;
  background-color: #FFF;
  justify-content: center;
  align-items: center;
  margin-top: 10px
`;

const BotaoTexto = styled.Text`
  font-size: 25px;
  color: #0b3b80;
  text-align: center;
`;

Claro que no exemplo acima criamos tudo no mesmo arquivo apenas para mostrarmos de uma forma mais facil, mas sim você pode separar os estilos em um arquivo separado, exemplo style.js e depois importar ele onde for usar e ai usar os componentes criados 🙂

Aqui o link da biblioteca caso queira ver a documentação: Acessar Documentação