Aplicando um Componente no React Native
Tags: reactnative, mobile, android
Published: 2023-04-19 18:56:20

No React Native, podemos usar componentes para encurtar nosso código e dividi-lo em pequenos componentes que são chamados posteriormente no App.js(ou App.tsx se estiver utilizando typeScript). No artigo de hoje iremos relembrar o que são componentes no React Native e seu uso numa aplicação real.

**Relembrando o que são Componentes**

Os componentes no React Native incluem elementos fundamentais, como View, Text e Image, bem como componentes mais complexos, como ScrollView, ListView e FlatList. É  possível criar seus próprios componentes personalizados para atender às necessidades específicas do aplicativo.

Os componentes no React Native são escritos em JavaScript e incorporam estilos CSS para definir a aparência e o layout dos elementos na tela. Esses estilos usam uma sintaxe semelhante ao CSS, mas com algumas diferenças importantes. Esse é também chamado JSX(uma maneira de estruturar a renderização de componentes usando a sintaxe familiar para muitos desenvolvedores comumente usados ​​no React).

**Aplicando componentes num projeto real -**

Agora iremos ver o uso e criação de componentes na prática e como os códigos ficam muito mais curtos e organizados quando eles são utilizados. Para se ambientar, nós estamos criando uma aplicação onde as pessoas vão se reunir para jogar podendo o separar por várias "turmas". Iremos chamar essa aplicação de Teams:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rtjvbwqyxxsoclqjck8p.png)

Acima conseguimos ver todas as pastas que utilizaremos: Header,Groups e o arquivo App.tsx

Seguindo o estado atual da aplicação,ela não tem nada demais:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nhjv19sf04uunah5xely.png)

Nosso objetivo é colocar um Header em seu topo e que apareça em toda aplicação, vamos começar:

```
import styled from 'styled-components/native';

export const Container = styled.View`
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: center;
`; 
export const Logo = styled.Image`
  width: 46px;
  height: 55px;
`;
```

Na pasta Header,criamos um arquivo `style.ts` onde a estilização do componente vai ser mostrado. Fazemos uma exportação de uma variável que é aplicada na tela da aplicação contendo alinhamento de no seu centro e também seu tipo de estilização é baseada no View

_Alerta importante: nesta aplicação, estamos fazendo uso passivo de styled-components, logo partes como estilização estarão com diversas importações desta biblioteca, assim como mostrado já no início do código._

E também exportamos outra variável que guarda a altura e largura do Header que será visualizado. 


Feito isso, num arquivo `index.tsx` nós iremos criar que irá importar essas configurações antes vistas e também a imagem de Header:

```
import { Container,Logo } from './style';
import logoImg from '@assets/logo.png'

export function Header(){
    return(
        <Container>
            <Logo source={logoImg}/>
        </Container>
    )
}
```
Neste código conseguimos ver em ação um componente em ação, pois ele nada mais é que a importação de uma "peça de código" , vimos a importação das Const criadas no arquivo `style.ts` sendo importadas. Dentro de Export function Header, em seu return temos ali `<Container></Container>` que é um componente com aquelas configurações já criadas, e dentro dele temos o <Logo/> que é outro componente que puxa as configurações das consts criadas no arquivo .ts, mas percebemos algo interessante: dentro dele estamos chamando um `source`que é de onde que pegaremos a imagem. Nessa hora, voltamos na parte de importações e vemos a importação dessa "logoImg" da pasta `assets, lá guardamos nossa imagem de header.

Concluíndo e entendendo o código acima, além de como foi separado os componentes podemos prosseguir, pois criamos o arquivo com o raciocínio do Header, mas ainda falta aplicar ele numa tela. Vejamos a seguir:

Entramos na pasta screens/ Groups(caso não tenha criado, crie a pasta screens e pasta Groups) e nela fazemos mais uma estilização de tela de fundo,que será toda a tela. Dentro da pasta Groups criamos uma `style.ts` e um `index.tsx`


```
import styled from "styled-components/native";
export const Container = styled.View `
    flex: 1;
    background-color: ${({ theme }) => theme.COLORS.GRAY_600};
    align-items: center;
    justify-content: center;
`;
```


Feito isso, vamos para o arquivo `index.tsx` e fazemos o seguinte:

```
import { Header } from '@components/Header';
import { Container } from './styles';

export function Groups() {
  return(
    <Container>
      <Header/>
    </Container>
  );
}
```

No código acima, fizemos a importação via Path Mapping do componente anteriomente criado, Header. Também fazemos a importação do último container que acabamos de fazer no arquivo `style.ts`.


Estamos próximos da finalização do artigo e também deste projeto. Agora basta importar o componente `Groups` para o App.tsx:

```
import { StatusBar } from 'react-native';
import {ThemeProvider} from 'styled-components'
import { useFonts, Roboto_400Regular, Roboto_700Bold } from '@expo-google-fonts/roboto';

import { Groups } from '@screens/Groups';
import theme from './src/theme';
import { Loading } from '@components/Loading';

export default function App() {

  const [fontsLoaded] = useFonts({ Roboto_400Regular,Roboto_700Bold });

  return(
    <ThemeProvider theme={theme}>
      <StatusBar 
      barStyle= "default" 
      backgroundColor= "transparent"
      translucent
      />

      { fontsLoaded ? <Groups/> : <Loading/>}
    </ThemeProvider>
  );
}
```


Outras configurações estão dentro deste código, mas conseguimos criar um tipo raciocínio onde dentro `ThemeProvider`, as fontes que estamos importando neste app irão aparecer junto da tela que guarda o componente `Groups`, caso contrário outro componente que se chama `Loading`entrará em ação e irá apresentar uma tela de carregamento. O resultado final, executando essa aplicação será:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/thjdyw2d9667kfv1od62.png)


Em resumo, os componentes no React Native são a base da construção de interfaces de usuário em aplicativos móveis. Eles fornecem uma maneira fácil de criar elementos personalizados e reutilizáveis que podem ser estilizados de forma dinâmica para fornecer uma experiência de usuário aprimorada. Com o React Native, os desenvolvedores podem criar aplicativos móveis nativos rapidamente e com mais facilidade, reduzindo o tempo e o custo de desenvolvimento.