Aplicando um Componente no React Native

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:

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:

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 que é outro componente que puxa as configurações das consts criadas no arquivo .ts, mas percebemos algo interessante: dentro dele estamos chamando um sourceque é 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(



);
}
`

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(

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 Loadingentrará em ação e irá apresentar uma tela de carregamento. O resultado final, executando essa aplicação será:

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.