Criando variantes de botões com Styled Components e React Native

Nesse artigo, quero mostrar um dos poderes de se utilizar styled components em suas aplicações irei mostrar como criar variações de estilos aos seus botões usando React Native e styled components.

Primeiro criaremos nosso componente Button, com os arquivos index.tsx e styles.ts

Em nosso styles, primeiro criaremos uma tipagem chamada de “ButtonVariant” onde passaremos os nomes das variantes e adicionamos esse export pois aproveitaremos essa tipagem para usar mais a frente em nosso index.tsx, após isso criaremos mais duas tipagem uma chamada de ButtonContainerProps e outra de ColorTextProps as duas vão ser responsáveis de passar a prop variant para os nossos estilos.

export type ButtonVariant = 'primary' | 'secondary' | 'outline';

type ButtonContainerProps = {
  variant: ButtonVariant
}

type ColorTextProps = {
  variant: ButtonVariant
}

Logo após isso criaremos dois objetos o “backgroundVariant” e a “textVariant” esses dois objetos irão receber as cores de cada variação sendo que o “backgroundVariant” mudará a cor de fundo e o “textVariant” mudará a cor do texto do nosso botão.

const backgroundVariant = {
  primary: '#16003B',
  secondary: '#006E7F',
  outline: 'tranparent',
}
const textVariant = {
  primary: '#fcda3c',
  secondary: '#fff',
  outline: '#000',
}

Vamos no nosso index.tsx, adicionaremos uma nova tipagem chamada de ButtonProps ela vai receber uma “variant” do tipo ButtonVariant que é aquela mesma que criamos em nosso style, por isso colocamos aquele export nela para ser possível fazermos o import da mesma aqui no index.tsx. Dentro da função de Button devemos passar como parâmetro a variant vinda do ButtonProps, além disso eu coloquei como default a variante “primary” para caso o button não receba uma “variant” o botão inicie com as cores de “primary”.

As tags ButtonContainer e Title vão vir dos nossos styles, é importante que passamos para essas tags o variant para que a mudança de cor ocorra com sucesso.

import { ButtonContainer, ButtonVariant, Title } from './styles';

type ButtonProps = {
  variant: ButtonVariant;
};

export function Button({ variant = 'primary' }: ButtonProps) {
  return (
    <ButtonContainer variant={variant}>
      <Title variant={variant}>Enviar</Title>
    </ButtonContainer>
  );
}

Agora voltando em nosso styles.ts, iremos estilar nosso botão e capturar os valores das nossas variantes.

A sintaxe do styled components tem essa cara como podemos ver abaixo, primeiro dizemos que elemento que queremos é um TouchableOpacity do react native e passamos a nossa tipagem de ButtonConatainerProps para ele também. Para saber qual variante foi passada para o botão é que veem uma das vantagens de usar o styled components, utilizando “${}” podemos escrever javascript e assim acessar nossas props, nesse exemplo para definir o background-color utilizei o o objeto de backgroundVariant que criamos anteriormente para pegar o valor hexadecimal da cor. Somado isso, com a utilização de javascript podemos fazer condições que estamos acostumados e assim definir novas propriedades para cada variação, no exemplo usei o operador ternário para definir a cor do border do botão para cada variante.

export const ButtonContainer = styled.TouchableOpacity<ButtonContainerProps>`
 width: 80%;
 border-radius:5px;
 padding: 18px;
 margin-top: 50px;

 ${props => {
 return css`
    background-color:${backgroundVariant[props.variant]};

    border: solid 1px ${props.variant === 'primary' ?
    backgroundVariant[props.variant] : props.variant === 'secondary' ?
          '#006E7F' : '#000'};
`
  }}
`;

Para definir a cor do texto segue os mesmos princípios e funcionamentos citados anteriormente, a diferença é que aqui usaremos a tipagem de ColorTextProps e o objeto que passamos é o textVariant.

export const Title = styled.Text<ColorTextProps>`
  text-align: center;
  font-size: 14px;
  font-weight: 700;

  ${props => {
    return css`color:${textVariant[props.variant]};`
  }}

`;

Por fim podemos usar nossos Buttons passando qual variação queremos, aqui está o resultado final:

Conclusão

Sendo assim, vimos um pouco dos poderes e benefícios da utilização do Styled Components em conjunto com React Native, e como as duas ferramentas são aliadas na construção de interfaces escaláveis e reutilizáveis. Espero que tenham gostado valeu e fui.