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.
Top comments (0)