INTRODUÇÃO

Ambiente desenvolvimento e básico de

React-native

Prof. Mr. Fabio Abrantes Diniz

fabio.abrantes.diniz@gmail.com
React native
 React native
• Site do React Native
▪ https://reactnative.dev/
✓Documentação
✓API
✓Comunidades

• Github do facebook
▪ https://github.com/facebook/react-native
 React native
• Comunidades
▪ Stack Overflow
✓ Fazer uma pergunta
▪ Twitter
✓ https://twitter.com/reactnative
▪ Blog
✓ https://reactnative.dev/blog
▪ Reactiflux Discord
✓ https://discord.com/invite/JuTwWB8rsy
▪ DevTo Community
✓ https://dev.to/t/reactnative
 Alguns comandos do NPM

• Comandos mais utilizados

▪ npm install npm@latest –g. Atualiza o npm na versão mais
estável
▪ npm init -y. Permite iniciar um pacote, criando o arquivo
package.json
▪ npm –v. Exibe a versão atual do npm
▪ npm install nome_do_módulo [-D]. instala um módulo no
projeto. D é opcional indica que é uma dependência de
desenvolvimento.
▪ npm list. Lista todos os módulos existentes no projeto.
▪ npm remove nome_do_módulo. desinstala um módulo do
projeto.

Fonte: https://docs.npmjs.com/cli/v6/commands/npm-run-script
 Como funciona
desenvolvimento mobile?
1. Ter as ferramentas necessárias
2. Programar
3. Testar o aplicativo:
1. Emulador
2. No seu celular
3. Expo
4. Exportar seu aplicativo
5. Publicar o App (playStore) ou
6. Instalar diretamente em qualquer
celular
Dois caminhos para desenvolver
usando RN.
• Caminho 1:
▪ Mais fácil;
▪ Mais rápido
▪ Exige menos computador
▪ Negativos: não ter os 100% dos recurso nativos
▪ Uso do software Expo
• Caminho 2:
▪ Exige mais de computador(android studio, Xcode)
▪ Exige mais configuração (SDK e emulatores)
▪ Tem os 100% dos recursos nativos
Ambiente de desenvolvimento
• Configurações no link abaixo:
✓ https://react-native.rocketseat.dev/
Criando projetos React Native

Sdk do android
React native com Expo
Introdução
 Expo React native
• Documentação instalação e CLI
▪ https://docs.expo.io/get-started/installation/
▪ https://docs.expo.dev/workflow/expo-cli/
• Portanto
▪ É um framework com o objetivo de gerenciar o
ambiente de desenvolvimento
✓ resolve todo o processo de configuração de
ambiente
▪ link da documentação do expo
✓ https://docs.expo.dev/versions/latest/
 Usando o Expo
• Projeto com Expo
▪ requisitos para funcionamento do expo
✓ Node.js LTS release, Git, Watchman for macOS users
▪ ferramentas recomendadas
✓ VSCode Editor, Yarn e Windows users: PowerShell
▪ Instalação do expo (version do nodejs entre 12 e 17)
✓ npm install --global expo-cli
▪ Verificar se a instalação foi sucesso
✓ expo -- version
✓ Ou expo whoami

▪ Em versões do nodejs 18.0 acima ou Expo CLI (SDK 46 acima)

não precisa instalar globalmente o expo.
✓ Nestas versões o expo já vem com o nodejs
 Expo Managed x Bare workflow
• Expo Managed
▪ Não temos acesso a pasta android e nem a pasta ios
✓ só vamos conseguir usar a api disponível da documentação
do expo.
▪ quando é legal usar projeto com expo managed?
✓ quando são projetos simples. Ou seja, não usa muitas api
nativas
• Expo Bare workflow
▪ Tem as pastas android e ios
✓ O desenvolvedor tem controle total sobre o código nativo
– Pode usar o Expo SDK e Sdk Nativo (libs que o expo
não dar suporte)
– Pode fazer configurações nativas quando necessário
https://docs.expo.dev/introduction/managed-vs-bare/
 Projeto Expo Managed
• Usando o Expo
1. Com o expo instalado criar nosso projeto.
✓ expo init nomeProjeto (nas versões do Nodejs entre
12 a 17 e Expo SDK versões menores que 46
✓ npx create-expo-app --template (nodejs 18 acima e
expo sdk 46 acima)
2. Escolher o projeto blank typescript e dar enter
3. Dar o nome do projeto
4. Rodando o projeto
✓ Entrar na pasta do projeto criado e rodar o projeto
– npx expo start

https://docs.expo.dev/get-started/create-a-new-app/
 Criando o Projeto Expo
Bare workflow
1. Com o expo instalado criar nosso projeto.
✓ expo init nomeProjeto (nas versões do Nodejs
entre 12 a 17 e Expo SDK versões menores que46
✓ npx create-expo-app --template (nodejs 18
acima e expo sdk 46 acima)
2. Escolhe a opção minimal do Bare (Blank)
3. Acessar a pasta do projeto e abrir no visual code
4. Depois criar um arquivo tsconfig.json e mudar a
extensão do App.js para App.tsx
5. Executar npx expo start
a) Vai identificar que tem um arquivo tsconfig.json e
vai perguntar se quer usar typescript.
– responde Y
 Projeto usando CLI do RN
• Usando o emulador android ou IOS
1. Configurando o ambiente
✓ https://reactnative.dev/docs/environment-setup
2. Criando um projeto sem typescript
▪ npx react-native init nomeProjeto
3. Criando o projeto com typescript
✓ npx react-native init AwesomeTSProject --template
react-native-template-typescript
4. Preparando dispositivo físico Android
✓ https://reactnative.dev/docs/running-on-device
5. Emulador
✓ https://reactnative.dev/docs/environment-setup
 Entendendo o Básico
• Componentização
▪ Nativos
✓ <Text></Text>

▪ Personalizados
✓ Criado pelo programador
 Entendendo o Básico
• Componentização:

A peça do quebra cabeça é planejada

No lego tem peças que podem
para ocupar uma posição específica
ser reaproveitadas e colocadas
numa posição específicas
 Entendendo o Básico
• Componentização
 Entendendo o Básico
• Componentização
 Entendendo o Básico
• Componentização
 Entendendo o Básico
• Componentização
▪ props
✓ são as propriedades que podemos passar de um
componente para outro podendo ser utilizada
internamente,
– seja para exibir ou aplicar alguma lógica própria
do componente.
✓ https://reactnative.dev/docs/typescript
✓ https://devsamurai.com.br/react-native-
basics-props-states/
✓ https://reactnative.dev/docs/props
▪ Ver exemplos no visual studio
 Entendendo o Básico
• props
▪ Propriedades
são somente
leituras

▪ Ver exemplos
 Entendendo o Básico
• Componentização
▪ children
✓ Permite que o componente X aceite incluir filhos
(outros componentes) dentro dele.
– Durante a instanciação de X
✓ https://www.carlrippon.com/react-children-with-
typescript/
✓ https://medium.com/@martin_hotell/react-children-
composition-patterns-with-typescript-56dfc8923c64
 Entendendo o Básico

• Prop children
▪ Exemplos:
Hooks no React native

https://reactjs.org/docs/hooks-intro.html
 Hooks no React native
• Regra de nomenclatura
▪ use
▪ Nome do Hook usar Camel case

https://reactjs.org/docs/hooks-intro.html
 Estados no React native
• É todo dado que varia com o tempo.
• São assíncronos
• É uma propriedade do componente onde
colocamos dados que, quando mudados,
▪ devem causar uma nova renderização.

▪ O ‘state’ é utilizado para valores dinâmicos

✓ props são utilizadas para passar valores entre
componentes.

https://reactnative.dev/docs/tutorial#state
https://devsamurai.com.br/react-native-basics-props-states/
 Estados no React native
• Segue o princípio da imutabilidade
▪ O estado não pode ter seu formato alterado
diretamente. Somente de leitura
✓ (adição, edição)
✓ Evitar métodos que altera diretamente o estado
– Ex: método push() do array

▪ É necessário recriar o estado por completo com as

alterações
✓ Ex: criar um novo array com a nova informação e atribuir
ao estado
 Estados no React native
• O princípio da imutabilidade
▪ Geralmente há duas maneiras de alterar dados
 Estados no React native
• O princípio da imutabilidade
▪ Detectar Mudanças no Objeto
 Estados no React native
• O princípio da imutabilidade
▪ Dados imutáveis podem determinar facilmente se
ocorreram alterações
✓ Isso ajuda quando um componente deve ser renderizado
novamente
 Estados no React native
• Utilizando o Hook useStates()
 Estados no React native
• Utilizando o Hook useStates()
 Entendendo o Render
• Antes dos seus componentes serem
exibidos na tela, devem ser
renderizados pelo React
Entendendo o Render
Entendendo o Render
Entendendo o Render
Entendendo o Render
Entendendo o Render
Entendendo o Render
 Entendendo o Básico
• Comunicação direta: usa as props que passa
do componente pai => filho
▪ Pois o componente pai tem acesso direto ao componente
filho. Tem uma instância do componente filho dentro do pai
 Entendendo o Básico
• Comunicação indireta
▪ passa o dado do componente filho =>
pai
 Entendendo o Básico
• Uso da comunicação direta e indireta com:
▪ Ênfase na separação de componentes
✓Reuso de componentes em várias partes do
projeto
✓Quando os componentes são grandes
▪ Exemplo Contador
✓Ver no visual studio
 Estilização
• Usando a propriedade style dos componentes
• Estilização com StyleSheet
 Styled Components
• Colocar css-in-js
▪ Fazer estilização do css usando a sintaxe do Javascript
▪ Separa a lógica da estrutura do componente
▪ Ajuda na legibilidade dos componentes
• Utilizando template literals do Javascript
▪ Com o poder do css
 Styled Components
• Link
▪ https://styled-components.com/
▪ https://github.com/styled-components/styled-
components
▪ https://styled-components.com/docs/basics

• Instalação
▪ npm install styled-componentes@5.3.10
✓ npm install @types/styled-components -D
▪ Versão 6.08 atual. Já estão tipados
✓ npm install styled-componentes
 Estilização
• StyledComponent
▪ Utilizando extensão para utilizar a sintaxe do highlights do css
 Estilização
• StyledComponent
 Estilização
• StyledComponent com props
▪ Colocar atributos nos componentes estilizados
 Estilização
• Design System e Style Guide
 Estilização
• Design System e Style Guide
 Estilização
• Design System e Style Guide
 Estilização
• Design System e Style Guide
 Estilos globais
• Criei uma pasta
chamada global dentro
de src
▪ Dentro adicionamos uma
pasta styles contendo:
✓ Um arquivo theme.ts
 StyledComponent
• Gestão de temas
▪ conseguimos criar temas para estilizar nossa
aplicação
✓ Usando Javascript
▪ Componentes usado do style-componentes
✓ ThemeProvider
– Possui a propriedade theme que atribui:
» o arquivo o theme.ts
– Deixa cores, fontes e outros acessível por todas
páginas
 Estilos globais
• Depois importar um componente do styled-
componentes e instanciá-lo
 StyledComponent
• Gestão de temas
▪ Acessando o theme na estilização
✓ Por meio da propriedade
 Estilos globais
• Em projetos typescripts é necessário tipar
essa propriedade theme do styled-
componentes
▪ A fim de entender qual o tipo de objeto passado
• Criamos um arquivo styled.d.ts na pasta @types
 Estilos globais
• Depois de tipar, o autocomplete do vscode vai
funcionar, baseado nos tokens do nosso tema.
 Fontes personalizadas
• É muito importante usar fontes externas para
deixar o App mais estilizado e usável
• Para usar um fonte é necessário
▪ Instalar uma fonte que deseja

✓ Ex: usar uma fonte poppins do google

– expo install expo-font @expo-google-fonts/poppins

• Fontes:
▪ https://fonts.google.com/
▪ https://docs.expo.dev/guides/using-custom-fonts/
 Fontes personalizadas
• Depois importar no App.tsx
▪ por que aqui toda aplicação inicia

O Hook useFonts vai carregar as fontes

 Fontes personalizadas
• Depois importar no App.tsx
▪ Fazer o carregamento das fontes usando o Hook useFonts()

▪ Se não for carregado mostra um Spinner (giratório)

▪ https://reactnative.dev/docs/activityindicator
 Fontes personalizadas
• Depois incluímos as fontes no theme.ts
▪ adicionando uma propriedade fonts contendo as
fontes

• Depois usar nos estilos dos componentes

criados
 Ícones
• Biblioteca do expo
▪ Fontes:
✓ https://icons.expo.fyi/
✓ https://docs.expo.dev/guides/icons/
 Ícones
• Biblioteca Phosphor
▪ Fontes:
✓ https://phosphoricons.com/
✓ https://github.com/duongdev/phosphor-react-native
▪ Instalação
✓ npm install phosphor-react-native
– npx expo install react-native-svg
 Ícones
• Biblioteca Phosphor
▪ Usando com styled-components
Densidade de Pixel
 Densidade de Pixel
• Existem celulares com diferentes densidades de
pixels
 Densidade de Pixel
• Android usa a unidade DPI e Iphone usa points
(PPI)
Densidade de Pixel
 Independência de densidade
• Android usa a unidade DPI e Iphone usa Points (PPI)
▪ Por isso no styleSheet a gente não coloca as unidades de medidas.
 Utilizando proporções
de medidas (1)
• Logo, em celulares com densidades distintas:

▪ No styled-componentes usa unidade de medida (px,%,...)

✓ Implicando os componentes há não ficarem na mesma
proporção

▪ E o StyleSheet mesmo sem usar unidade de medida

✓ Os componentes não ficam 100% na mesma proporção
 Utilizando proporções
de medidas (2)
• Portanto, em celulares com densidades distintas.
▪ Deixar o tamanho das fontes responsíveis.
✓ Não trabalhar com medidas absolutas
✓ E sim com proporções de medidas que muda dinamicamente o
tamanhos dos componentes em proporcional a densidade dos pixels

• Utilizando a biblioteca
▪ yarn add react-native-responsive-fontsize
✓ https://www.npmjs.com/package/react-native-responsive-fontsize

▪ Biblioteca para trabalhar em proporção

▪ Tem duas funções:

✓ RFPercentage
✓ RFValue
 Entendendo o Básico
• Flexbox no react-native
▪ Propriedade para fazer o layout dos filhos do componente no
app.
✓ Posicionamento, organização,...
– https://reactnative.dev/docs/flexbox
– https://reactnative.dev/docs/layout-props#flex
https://blog.reactnativecoach.com/understanding-flex-
in-react-native-b34dfb4b16d1

▪ Normalmente, você usará uma combinação:

✓ flexDirection, alignItems e justifyContent
– Flex-wrap, align-self
Entendendo o Básico
 Entendendo o Básico
• Flexbox no react-native
▪ Ver exemplos no visual studio
 Entendendo o Básico
• Condicional de exibição
▪ Exibição de algum item baseado em uma condição
específica
✓ Uso de states
 Renderizando Listas
• Pode ser usando o componente ScrollView
ou FlatList
 Renderizando Listas
• Pode ser usando o componente ScrollView
ou FlatList
 Renderizando Listas
• Usando o componente ScrollView
 Renderizando Listas
• Usando o componente FlatList
 Debug no React Native
• LogBox (alerta contendo um aviso)
▪ Duas formas de exibição:
✓ Erros que não quebram a interface
– lançam um alerta amarelo de aviso.
» Não abre em tela cheia
 Debug no React Native
• LogBox (alerta contendo o erro)
✓ Erros que quebram a interface
– abrem um alerta vermelho em tela cheia
 Debug no React Native
• Usan o breakpoints
▪ Aperta tecla M para abrir o devtoolls (android)
 Debug no React Native
• Debugando o App
▪ abrir o devtools ⇒ inspecionar ⇒ aba Sources
✓ vai mostrar os arquivos do projeto
 Debug no React Native
• Inspector e Perf Monitor
▪ ctlr + m ⇒ escolhe toggle inspector
✓ Mostra as características visuais dos componentes