Criando variantes de botões com Styled Components e React Native
Tags: reactnative, styledcomponents, variant, javascript
Published: 2022-09-13 12:17:20

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


![Pastas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5a7a3en5jrw8njqe4epl.png)

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.

```jsx
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.

```jsx
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.

```jsx
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. 

```css
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.  

```css
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:



![Função App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hwropa5avwkv3oxa6z8b.png)


![Botões em tela](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y52133das97ulm0vqlxh.png)

##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.