React Native - freeCodeCamp.org

Como integrar mapas no React Native usando react-native-maps

Sabrina — Mon, 24 Jun 2024 21:00:00 +0000

Artigo original: How to integrate maps in React Native using react-native-maps

Escrito por: Mukhamed Khasanza

Hoje em dia, quase todas as aplicações para dispositivos móveis têm um recurso de mapas. Eu tive que integrar o Google Maps à minha aplicação para o React Native, e a única opção era o react-native-maps da Airbnb (é o único ainda suportado pela comunidade do React Native).

Encontrei vários tutoriais sobre como configurar essa biblioteca, mas nenhum funcionou totalmente para mim. Isso porque eu tinha que rodar em plataformas iOS e Android, além de dar suporte ao Google Maps para iOS.

Vamos criar uma aplicação do React Native do zero usando react-native-cli para mostrar, passo a passo, como tudo é instalado. Se você quiser integrar o react-native-maps à sua aplicação existente, pule a Etapa 1.

Etapa 1: instalar e configurar a aplicação do React Native

Se você não instalou a interface de linha de comando do React Native, execute: npm install -g react-native-cli. Agora, você pode criar seu projeto, simplesmente usando: react-native init ReactNativeMaps

Aqui estão as versões de dependência no momento da construção deste projeto:

"react": "16.6.1"
"react-native": "0.57.5"
"react-native-maps": "0.22.1" — instalaremos este mais tarde.

Nota da tradução: mantivemos as versões constantes no artigo original, mas, na data da tradução, as versões são 18.2.0 e 1.15.6, respectivamente.

Tente executar sua aplicação, react-native run-ios ou react-native run-android. Normalmente, isso funciona sem problemas.

Etapa 2: adicionar e vincular o pacote react-native-maps

Agora, vamos instalar o react-native-maps: npm install --save react-native-maps. Depois de instalar o pacote, você deve vinculá-lo às suas aplicações nativas: react-native link react-native-maps.

Se você recebeu uma tela semelhante a essa, podemos continuar.

Etapa 3: configurar o Apple Maps (iOS)

Será mais fácil se os configurarmos separadamente por plataforma. Então, vamos primeiro fazer isso no iOS. Antes de integrar o Google Maps, verificaremos se o Apple Maps funciona corretamente. Adicione o seguinte código ao seu componente de renderização atual, onde você deseja renderizar seu MapView.

import MapView from 'react-native-maps'

export default class App extends Component {
  render() {
    return ();
  }
}

Você pode testar qualquer local que quiser. Basta especificar a latitude e a longitude apropriadas. Como você pode ver, eu habilitei a localização do usuário simplesmente adicionando a prop showUserLocation ao componente MapView. Se você estiver executando no dispositivo real, verá sua localização atual.

Então, como você pode ver, por padrão, o Apple Maps já está funcionando. Mais do que isso, se você vinculou tudo corretamente e habilitou a localização do usuário, ele realmente fez muitas coisas para nós (a permissão do usuário para a localização com uma mensagem padrão). Se você veio do desenvolvimento nativo do iOS, então, provavelmente, sabe o que é um arquivo info.plist.

Etapa 4: instalar o Cocoapods e o pacote "GoogleMaps" (iOS)

O Apple Maps foi fácil, certo? Concordo — então, vamos ver o que o Google Maps tem para nós. Temos que instalar o Google Maps SDK para iOS. Usaremos o Cocoapods. Se você não o usou antes, execute sudo gem install cocoapods.

Agora, você tem que criar um Podfile, onde você especificará as dependências da sua aplicação para o iOS. Navegue até sua pasta iOS/ na sua aplicação do React Native e execute: pod init ou você pode usar touch Podfile. Você deve ter algo similar a isto:

# platform :ios, '9.0'

target 'ReactNativeMaps' do

# Pods for ReactNativeMaps

pod 'GoogleMaps'

end

Como você pode ver, adicionei o pod GoogleMaps e agora temos que instalá-lo. Se você ainda estiver na pasta iOS/, execute: pod install . Se você tentar executá-lo agora, provavelmente receberá um erro:

Ok, vamos fazer o que ele quer. Agora, devemos abrir o espaço de trabalho do xCode.

Navegue até a pasta AirGoogleMaps em node_modules/

Arraste-a para o topo do seu projeto do xCode

Tente construir seu projeto do xCode, se estiver falhando.

Você deve adicionar HAVE_GOOGLE_MAPS=1 Preprocessor Macro para Build Settings

Etapa 5: obter a chave da api do Google Maps e executar a aplicação do iOS com o Google Maps

Agora, temos que gerar uma Google Maps API key.

Copie sua chave de API e adicione-a ao arquivo AppDelegate.m.

#import

[GMSServices provideAPIKey:@"SUA_CHAVE_DE_API"]

Informe ao seu componente MapView que está pronto para usar o Google Maps.

Ah, sim. Não se esqueça de executar sua aplicação do iOS. Agora, você já terá o Google Maps à disposição.

Eu espero.

Etapa 6: vamos tentar no Android agora

Ok. Agora, podemos sair do xCode e vamos apenas tentar react-native run-android. Se você estiver recebendo o mesmo que isto:

verifique seu arquivo android/app/build.gradle e substitua compile project(':react-native-maps') por isto:

implementation(project(':react-native-maps')){        exclude group: 'com.google.android.gms', module: 'play-services-base'        exclude group: 'com.google.android.gms', module: 'play-services-maps'    }implementation 'com.google.android.gms:play-services-base:12.0.0'implementation 'com.google.android.gms:play-services-maps:12.0.0'

Não se esqueça de adicionar a API_KEY ao arquivo AndroidManifest.xml.

Sim, agora sua aplicação está rodando em ambas as plataformas. Verifique o repositório do react-native-maps para mais coisas divertidas que você pode fazer com seu componente MapView.

Conclusão

Espero que meu primeiro artigo tenha sido útil para você.

Como estruturar seu projeto e gerenciar recursos estáticos no React Native

Daniel Rosa — Tue, 11 Jul 2023 18:00:00 +0000

Artigo original: How to structure your project and manage static resources in React Native

Escrito por: Khoa Pham

React e React Native são apenas frameworks, e não ditam como devemos estruturar nossos projetos. Tudo depende do seu gosto pessoal e do projeto em que você está trabalhando.

Neste post, vamos abordar como estruturar um projeto e como gerenciar ativos locais. Isso, claro, não está escrito em pedra, e você é livre para aplicar apenas as peças que lhe convierem. Espero que você aprenda alguma coisa.

Para um projeto inicializado com react-native-init, obtemos apenas a estrutura básica (texto em inglês).

Há a pasta ios para projetos do Xcode, a pasta android para projetos para o Android e arquivos index.js e App.js para o ponto de partida do React Native.

ios/
android/
index.js
App.js

Por já ter trabalhado com arquivos nativos no Windows Phone, no iOS e no Android, penso que estruturar um projeto se resume a separar arquivos por tipo ou por recurso.

Tipo x recurso

Separar por tipo significa organizarmos os arquivos por seu tipo. Se o tipo for um componente, haverá arquivos de contêiner e arquivos de apresentação. Se for do Redux, haverá arquivos de ação, reducers e arquivos de armazenamento. Se for uma view, haverá arquivos JavaScript, HTML e CSS.

Agrupar por tipo

redux
  actions
  store
  reducers
components
  container
  presentational
view
  javascript
  html
  css

Desse modo, podemos ver o tipo de cada arquivo e executar facilmente um script para determinado tipo de arquivo. Isso vale para todos os projetos, mas não responde à pergunta "Qual é o objetivo deste projeto?" É uma aplicação de notícias? É uma aplicação de fidelização? É um acompanhamento nutricional?

Organizar arquivos por tipo é útil para máquinas, mas não para humanos. Muitas vezes, trabalhamos em recursos. Encontrar arquivos para corrigir em diversos diretórios é muito cansativo. Também é um incômodo quando planejamos fazer a estrutura de nosso projeto, já que os arquivos estão espalhados por muitos lugares.

Agrupar por recurso

Uma solução mais razoável é organizar arquivos por recurso. Os arquivos relacionados a um recurso devem ser colocados juntos. Os arquivos de teste devem ficar próximos aos arquivos de origem. Confira este artigo (texto em inglês) para saber mais.

Um recurso pode estar relacionado ao login, inscrição, integração ou ao perfil de um usuário. Um recurso pode conter sub-recursos, desde que pertençam ao mesmo fluxo. Se quiséssemos mover o sub-recurso, seria fácil, pois todos os arquivos relacionados já estariam agrupados.

Minha estrutura típica de projeto baseada em recursos tem a seguinte aparência:

index.js
App.js
ios/
android/
src
  screens
    login
      LoginScreen.js
      LoginNavigator.js
    onboarding
      OnboardingNavigator    
      welcome 
        WelcomeScreen.js
      term
        TermScreen.js
      notification
        NotificationScreen.js
    main
      MainNavigator.js
      news
        NewsScreen.js
      profile
        ProfileScreen.js
      search
        SearchScreen.js
  library
    package.json
    components
      ImageButton.js
      RoundImage.js
    utils
      moveToBottom.js
      safeArea.js
    networking
      API.js
      Auth.js
  res
    package.json
    strings.js
    colors.js
    palette.js
    fonts.js
    images.js
    images
      logo@2x.png
      logo@3x.png
      button@2x.png
      button@3x.png
scripts
  images.js
  clear.js

Além dos arquivos App.js e index.js e das pastas ios1 e android tradicionais, coloquei todos os arquivos de origem na pasta src. Dentro de src, tenho res, para recursos (do inglês, resources), library, para arquivos comuns usados em mais de um recurso, e screens, para a tela de conteúdo.

O menor número de dependências possível

Como o React Native é fortemente dependente de uma infinidade de dependências, tento tomar muito cuidado ao adicionar mais dependências. No meu projeto, uso apenas react-navigation para navegação. Não sou um fã do redux. Acho que ele adiciona uma complexidade desnecessária. Só adicione uma dependência quando você realmente precisar dela. Caso contrário, você está apenas se preparando para ter mais problemas.

O que eu gosto no React são os componentes. Um componente é onde definimos visão, estilo e comportamento. O React tem estilo em linha — é como usar JavaScript para definir scripts, HTML e CSS. Isso se encaixa na abordagem de recursos que estamos buscando. É por isso que eu não uso o styled-components. Como os estilos são apenas objetos JavaScript, podemos simplesmente compartilhar estilos de comentário em library.

src

Gosto muito do Android. Por isso, coloco os nomes src e res para corresponder às convenções de pasta do sistema.

O react-native init configura o babel para nós. Porém, em um projeto em JavaScript típico, é bom organizar os arquivos na pasta src. Na minha aplicação IconGenerator, que usa o electron.js, coloquei os arquivos de origem dentro da pasta src. Isso não só ajuda em termos de organização, mas também ajuda o babel a transpilar toda a pasta de uma só vez. Basta um comando e eu tenho os arquivos de src transpilados para dist em um piscar de olhos.

babel ./src --out-dir ./dist --copy-files

Screen

O React é baseado em componentes. Sim. Existem componentes de contêiner e de apresentação (texto em inglês), mas podemos compor componentes para criar componentes mais complexos. Eles, geralmente, terminam aparecendo em tela cheia. Chama-se Page no Windows Phone, ViewController no iOS e Activity no Android. O guia do React Native menciona a tela (em inglês, screen) com muita frequência como algo que cobre todo o espaço:

As aplicações para dispositivos móveis raramente são compostas de uma única tela. O gerenciamento da apresentação e da transição entre várias telas normalmente é manipulado pelo que é conhecido como navegador.

Usar ou não usar o index.js?

Cada tela é considerada o ponto de entrada para um recurso. Você pode renomear LoginScreen.js como index.js para aproveitar o recurso de módulos do Node:

find-me node_modules index.js require('find-me') index.js

Assim, em vez de import LoginScreen from './screens/LoginScreen', podemos simplesmente usar import LoginScreen from './screens'.

Usar o index.js resulta em encapsulamento e fornece uma interface pública para o recurso. Isso tudo se baseia em gosto pessoal. Eu mesmo prefiro nomear explicitamente um arquivo – daí o nome LoginScreen.js.

Navigator

O react-navigation parece ser a escolha mais popular para lidar com a navegação em uma aplicação do React Native. Para um recurso como a integração (do inglês, onboarding), provavelmente, existem muitas telas gerenciadas por uma navegação pela pilha. Assim, temos o OnboardingNavigator.

Pense no Navigator como algo que agrupe subtelas ou recursos. Como estamos agrupando por recurso, é natural colocarmos o navegador dentro da pasta de recursos. A aparência, basicamente, é esta:

import { createStackNavigator } from 'react-navigation'
import Welcome from './Welcome'
import Term from './Term'

const routeConfig = {
  Welcome: {
    screen: Welcome
  },
  Term: {
    screen: Term
  }
}

const navigatorConfig = {
  navigationOptions: {
    header: null
  }
}

export default OnboardingNavigator = createStackNavigator(routeConfig, navigatorConfig)

library

Esta é a parte mais polêmica da estruturação de um projeto. Se você não gosta do nome library, pode chamá-la de utilities, common, citadel, ou o que quer que seja...

Essa pasta não é destinada a arquivos sem outro lugar para ficar, mas é onde colocamos utilitários e componentes comuns, que são usados por muitos recursos. Coisas como componentes atômicos, wrappers, função de correções rápidas, coisas relacionadas à rede e informações de login são muito usadas, sendo difícil movê-las para uma pasta de recursos específica. Às vezes, só precisamos ser práticos e fazer o trabalho.

No React Native, muitas vezes, precisamos implementar um botão com uma imagem de fundo em muitas telas. Aqui está um botão simples, colocado em library/components/ImageButton.js. A pasta components é para componentes reutilizáveis, às vezes chamados de componentes atômicos. De acordo com as convenções de nomenclatura do React, a primeira letra deve ser maiúscula.

import React from 'react'
import { TouchableOpacity, View, Image, Text, StyleSheet } from 'react-native'
import images from 'res/images'
import colors from 'res/colors'

export default class ImageButton extends React.Component {
  render() {
    return (
      
        
          {this.props.title}
        
        
      
    )
  }
}

const styles = StyleSheet.create({
  view: {
    position: 'absolute',
    backgroundColor: 'transparent'
  },
  image: {
  
},
  touchable: {
    alignItems: 'center',
    justifyContent: 'center'
  },
  text: {
    color: colors.button,
    fontSize: 18,
    textAlign: 'center'
  }
})

Se quisermos colocar o botão na parte inferior, usamos uma função utilitária para evitar a duplicação de código. Aqui temos a library/utils/moveToBottom.js:

import React from 'react'
import { View, StyleSheet } from 'react-native'

function moveToBottom(component) {
  return (
    
      {component}
    
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-end',
    marginBottom: 36
  }
})

export default moveToBottom

Usando o package.json para evitar caminhos relativos

Em algum ponto de src/screens/onboarding/term/Term.js, podemos importar usando caminhos relativos:

import moveToBottom from '../../../../library/utils/move'
import ImageButton from '../../../../library/components/ImageButton'

Aqui, temos um problema bem visível. A chance de cometermos erros é muito grande, pois precisamos calcular de quantos .. precisamos. Se movermos o recurso para outro lugar, todos esses caminhos precisarão ser recalculados.

Como library é para ser usado em muitos lugares, é bom referenciá-la como um caminho absoluto. Em JavaScript, geralmente, existem milhares de bibliotecas para um único problema. Uma rápida pesquisa no Google revela centenas de bibliotecas para resolver esse problema. Porém, não precisamos de outra dependência, pois isso é extremamente fácil de corrigir.

A solução é transformar library em um módulo module para que o node consiga encontrá-la. Adicionar o package.json a qualquer pasta a torna um módulo no Node. Adicionamos o package.json dentro da pasta library com este conteúdo simples:

{
  "name": "library",
  "version": "0.0.1"
}

Agora, em Term.js, podemos importar as coisas de library facilmente, pois, agora, a pasta se tornou um módulo:

import React from 'react'
import { View, StyleSheet, Image, Text, Button } from 'react-native'
import strings from 'res/strings'
import palette from 'res/palette'
import images from 'res/images'
import ImageButton from 'library/components/ImageButton'
import moveToBottom from 'library/utils/moveToBottom'

export default class Term extends React.Component {
  render() {
    return (
      
        {strings.onboarding.term.heading.toUpperCase()}
        {
          moveToBottom(
            
          )
        }
      
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center'
  },
  heading: {...palette.heading, ...{
    marginTop: 72
  }}
})

res

Você pode estar se perguntando o que são res/colors, res/strings, res/images e res/fonts nos exemplos acima. Bem, para projetos de front-end, geralmente temos componentes e os estilizamos usando fontes, strings com localização (traduzidas), cores, imagens e estilos propriamente ditos. O JavaScript é uma linguagem muito dinâmica, sendo fácil usar tipos em formato string em qualquer lugar. Podemos ter várias definições do tipo color: #00B75D; em vários arquivos, ou fontFamily: Fira; em vários componentes do tipo Text. Isso também leva a erros e é difícil de refatorar.

Vamos encapsular o uso dos recursos na pasta res com objetos mais seguros. Veja a aparência disso nos exemplos a seguir:

res/colors

const colors = {
  title: '#00B75D',
  text: '#0C222B',
  button: '#036675'
}

export default colors

res/strings

const strings = {
  onboarding: {
    welcome: {
      heading: 'Welcome',
      text1: "What you don't know is what you haven't learn",
      text2: 'Visit my GitHub at https://github.com/onmyway133',
      button: 'Log in'
    },
    term: {
      heading: 'Terms and conditions',
      button: 'Read'
    }
  }
}

export default strings

res/fonts

const fonts = {
  title: 'Arial',
  text: 'SanFrancisco',
  code: 'Fira'
}

export default fonts

res/images

const images = {
  button: require('./images/button.png'),
  logo: require('./images/logo.png'),
  placeholder: require('./images/placeholder.png')
}

export default images

Assim como em library, os arquivos de res podem ser acessados de qualquer lugar. Assim, vamos tornar a pasta res um módulo. Adicione o package.json à pasta res:

{
  "name": "res",
  "version": "0.0.1"
}

Desse modo, podemos acessar a pasta de recursos como se fosse um módulo normal:

import strings from 'res/strings'
import palette from 'res/palette'
import images from 'res/images'

Agrupar cores, imagens e fontes com uma paleta

O design da aplicação deve ser consistente. Certos elementos devem ter a mesma aparência para não confundir o usuário. Por exemplo, os títulos do componente Text devem usar uma cor, fonte e tamanho de fonte iguais. O componente Image deve usar a mesma imagem placeholder. No React Native, já usamos o nome styles em const styles = StyleSheet.create({}). Então, vamos usar o nome palette (em português, paleta).

Abaixo, vemos minha paleta simplificada. Ela define estilos comuns para os títulos e para Text:

res/palette

import colors from './colors'

const palette = {
  heading: {
    color: colors.title,
    fontSize: 20,
    textAlign: 'center'
  },
  text: {
    color: colors.text,
    fontSize: 17,
    textAlign: 'center'
  }
}

export default palette

Também podemos usá-los em nossa tela:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center'
  },
  heading: {...palette.heading, ...{
    marginTop: 72
  }}
})

Aqui, usamos o operador spread em um objeto para unir palette.heading e nosso objeto de estilo personalizado. Isso quer dizer que usamos estilos de palette.heading, mas também especificamos outras propriedades.

Se fôssemos remodelar a aplicação para diversas marcas, poderíamos ter diversas paletas. Esse é um padrão muito útil.

Geração de imagens

Podemos ver que, em /src/res/images.js, temos propriedades para cada imagem na pasta src/res/images:

const images = {
  button: require('./images/button.png'),
  logo: require('./images/logo.png'),
  placeholder: require('./images/placeholder.png')
}

export default images

É um tédio fazer isso manualmente. Teríamos que atualizar se houvesse mudanças na convenção de nomenclatura de imagem. Em vez disso, podemos adicionar um script para gerar images.js com base nas imagens que temos. Adicione um arquivo /scripts/images.js na raiz do projeto:

const fs = require('fs')

const imageFileNames = () => {
  const array = fs
    .readdirSync('src/res/images')
    .filter((file) => {
      return file.endsWith('.png')
    })
    .map((file) => {
      return file.replace('@2x.png', '').replace('@3x.png', '')
    })
    
return Array.from(new Set(array))
}

const generate = () => {
  let properties = imageFileNames()
    .map((name) => {
      return `${name}: require('./images/${name}.png')`
    })
    .join(',\n  ')
    
const string = `const images = {
  ${properties}
}

export default images
`

fs.writeFileSync('src/res/images.js', string, 'utf8')
}

generate()

No Node, temos um recurso interessante que é o acesso ao módulo fs, muito útil no processamento de arquivos. Aqui, simplesmente percorremos as imagens e atualizamos /src/res/images.js conforme o caso.

Sempre que adicionarmos ou alterarmos imagens, podemos executar:

node scripts/images.js

Também podemos declarar o script dentro de nosso package.json principal:

"scripts": {
  "start": "node node_modules/react-native/local-cli/cli.js start",
  "test": "jest",
  "lint": "eslint *.js **/*.js",
  "images": "node scripts/images.js"
}

Agora, basta executar npm run images e obtemos o arquivo de recurso images.js atualizado.

Fontes personalizadas

O React Native tem algumas fontes personalizadas (texto em inglês) que podem ser boas o suficiente para seu projeto. Você também pode usar fontes personalizadas.

Uma coisa que se deve perceber é que o Android usa o nome do arquivo de fonte, mas o iOS usa o nome completo. Você pode ver o nome completo na aplicação Font Book ou inspecionando na aplicação em execução

for (NSString* family in [UIFont familyNames]) {
  NSLog(@"%@", family);
  
for (NSString* name in [UIFont fontNamesForFamilyName: family]) {
    NSLog(@"Family name:  %@", name);
  }
}

Para fontes personalizadas a serem registradas no iOS, precisamos declarar UIAppFonts em Info.plist usando o nome do arquivo das fontes. Para o Android, as fontes precisam ser colocadas em app/src/main/assets/fonts.

É uma boa prática nomear o arquivo de fonte da mesma forma que o nome completo. Diz-se que o React Native carrega dinamicamente fontes personalizadas, mas, no caso de você obter um "Unrecognized font family" (família de fontes não reconhecidas), basta adicionar essas fontes ao destino dentro do Xcode.

Fazer isso a mão leva tempo. Por sorte, temos o rnpm, que pode ser útil. Primeiro, adicione todas as fontes na pasta res/fonts. Depois, basta declarar o rnpm no package.json e executar react-native link. Isso deverá declarar o UIAppFonts no iOS e mover todas as fontes para app/src/main/assets/fonts para o Android.

"rnpm": {
  "assets": [
    "./src/res/fonts/"
  ]
}

Acessar fontes pelo nome é propenso a erros. Podemos criar um script semelhante ao que fizemos com as imagens para gerar um acesso mais seguro. Adicione fonts.js à nossa pasta scripts:

const fs = require('fs')

const fontFileNames = () => {
  const array = fs
    .readdirSync('src/res/fonts')
    .map((file) => {
      return file.replace('.ttf', '')
    })
    
return Array.from(new Set(array))
}

const generate = () => {
  const properties = fontFileNames()
    .map((name) => {
      const key = name.replace(/\s/g, '')
      return `${key}: '${name}'`
    })
    .join(',\n  ')
    
const string = `const fonts = {
  ${properties}
}

export default fonts
`

fs.writeFileSync('src/res/fonts.js', string, 'utf8')
}

generate()

Agora, você pode usar as fontes personalizadas por meio do namespace R.

import R from 'res/R'

const styles = StyleSheet.create({
  text: {
    fontFamily: R.fonts.FireCodeNormal
  }
})

**O namespace R**

Essa etapa depende do gosto pessoal, mas acho mais organizada se introduzirmos o namespace R, assim como o Android faz para ativos com a classe R gerada.

Ao externalizar os recursos da sua aplicação, você pode acessá-los usando os IDs dos recursos gerados na classe R do seu projeto. Esse documento mostra como agrupar seus recursos no seu projeto para Android e fornece recursos alternativos para configurações de dispositivos específicos, além de mostrar como acessá-los a partir do código de sua aplicação ou de outros arquivos XML.

Desse modo, vamos criar um arquivo chamado R.js em src/res:

import strings from './strings'
import images from './images'
import colors from './colors'
import palette from './palette'

const R = {
  strings,
  images,
  colors,
  palette
}

export default R

Depois, vamos acessá-lo na tela:

import R from 'res/R'

render() {
  return (
    
      
      
      {R.strings.onboarding.welcome.title.toUpperCase()}
  )
}

Substituímos strings por R.strings, colors por R.colors e images por R.images. Com a anotação de R, fica claro que estamos acessando ativos estáticos a partir do pacote da aplicação.

Isso também corresponde à convenção da Airbnb para os singletons, já que nosso R agora é uma constante global.

23.8 Use PascalCase ao exportar um construtor/classe/singleton/função/biblioteca/objeto puro.

const AirbnbStyleGuide = {
  es6: {
  },
}

export default AirbnbStyleGuide

O que mais podemos ver?

Neste artigo, busquei mostrar como penso que deve ser a estruturação de pastas e arquivos em um projeto do React Native. Também aprendemos a gerenciar recursos e a acessá-los de maneira mais segura. Espero que você tenha achado este artigo útil. Aqui estão mais alguns recursos para explorar mais (textos em inglês):

Já que você está aqui, que tal dar uma olhada em outros artigos que escrevi (textos em inglês)?

Se gostou deste artigo, dê uma olhada também em outros artigos de minha autoria e nas minhas aplicações. Obrigado!

Componentes funcionais x componentes de classe no React Native

Carlos Silva. — Tue, 30 May 2023 21:00:00 +0000

Artigo original: Functional vs Class Components in React Native

No React Native, há dois tipos principais de componentes que compõem uma aplicação: componentes funcionais e componentes de classe. Eles são estruturados do mesmo modo que seriam em uma aplicação para a web normal do React.

Componentes de classe

Os componentes de classe são classes do JavaScript ES2015 que estendem uma classe base do React chamada Component.

class App extends Component {
    render () {
        return (
            Hello World!
        )
    }
}

Isso dá para a classe App acesso aos métodos do ciclo de vida do React, como render, bem como às funcionalidades de state/props dos componentes pai.

Componentes funcionais

Os componentes funcionais são mais simples. Eles não gerenciam seu próprio state nem têm acesso aos métodos de ciclo de vida fornecidos pelo React Native. Eles são, literalmente, funções do JavaScript antigas e simples – às vezes, chamados de componentes sem estado (do inglês, stateless).

const PageOne = () => {
    return (
        Page One
    );
}

Sumário

Os componentes de classe são usados como componentes de contêiner para lidar com o gerenciamento do state e para integrar componentes secundários.

Os componentes funcionais geralmente são usados apenas para fins de exibição – esses componentes chamam funções dos componentes pai para lidar com interações do usuário ou atualizações do state.

Mais informações sobre o estado do componente

Estado do componente

Nos componentes Class, há uma maneira de armazenar e gerenciar o state criado no React Native.

class App extends Component {
  constructor () {
    super();
    this.state = {
      counter: 0
    };
  }
  incrementCount () {
    this.setState({
      counter: this.state.counter + 1
    });
  }
  decrementCount () {
    this.setState({
      counter: this.state.counter - 1
    });
  }
  render () {
    return (
      
        Count: {this.state.counter}
        
        
      
    );
  }
}

O state é semelhante às props, mas é privado e totalmente controlado pelo componente. Aqui, o método constructor() chama o construtor da classe pai com super(); – Component é a classe pai do App, pois estamos usando a palavra-chave extends. O método constructor() também inicializa o objeto de state do componente:

this.state = {
  counter: 0
};

O state pode ser exibido dentro do componente:

{this.state.counter}

Ele também pode ser atualizado pela chamada:

this.setState({});

Observação: após a criação inicial no método constructor() do componente, você nunca deve modificar diretamente o state do componente com this.state =. Você deve usar this.setState, como pode ser visto nas funções incrementCount e decrementCount acima.

A contagem é ampliada e reduzida ao chamar as funções passadas para os manipuladores onPress do mesmo modo que seriam se você chamasse um manipulador de clique do JavaScript na web.

Adendo: no primeiro exemplo,

Como configurar o login do Google no React Native com Firebase

Renato Almeida — Mon, 05 Dec 2022 21:00:00 +0000

Artigo original: How to Set Up Google Login in React Native & Firebase

O login do Google é um ótimo recurso de login a ser oferecido aos usuários de sua aplicação. Ele facilita para os usuários a criação de uma conta e o login.

Melhor do que isso, o Firebase torna extremamente fácil para os desenvolvedores adicionar suporte ao login do Google. Configurar o ambiente do React Native, no entanto, pode criar alguns desafios, os quais são totalmente tratados neste tutorial.

O React Native e o SDK do Firebase tornam a implementação do login do Google bastante simples. Vamos construir uma aplicação simples que tem apenas um único botão de login do Google. Uma vez que o usuário faça login no Google com sucesso, exibiremos as informações do usuário recuperadas de sua conta do Google, bem como um botão de logout.

Você também pode adicionar o login do Facebook à aplicação se estiver interessado em fornecer ainda mais opções de login para seus usuários. Você pode conferir este guia para login do Facebook no React Native com Firebase (texto em inglês) se quiser aprender mais sobre como configurar o login no Facebook.

Usar o Google ou outras aplicações de terceiros pode fazer o seu processo de autenticação descomplicado e amigável. Os usuários não precisam perder tempo no processo de registro, o que melhorará tremendamente suas taxas de registro e retenção.
É seguro e protegido.
Os usuários confiam mais no Google ou no Facebook do que em um portal ou aplicação desconhecida da internet.
Ele fornece uma boa experiência ao usuário. Como usuário, temos pouca paciência para qualquer ação ou trabalho que precisemos fazer, especialmente em uma aplicação bastante desconhecida que estamos testando pela primeira vez.

Sem mais delongas, vamos pular diretamente para a parte de desenvolvimento de aplicações deste tutorial.

Configurando o projeto do Firebase

Vá até o console do Firebase e crie um projeto do Firebase:

Cria um projeto do Firebase

Aqui, precisaremos configurar o nome do projeto do Firebase e o identificador da aplicação. Então, vamos primeiro criar a aplicação do React Native.

Criando o projeto do React Native

Primeiro, precisamos criar um projeto do React Native usando o seguinte comando:

react-native init instamobile-google-login-demo

Aqui, demos ao projeto o nome instamobile-google-login-demo. Agora, precisamos instalar o pacote react-native-google-signin usando o seguinte comando:

yarn add react-native-google-singin

O pacote react-native-google-signin é usado para implementar as funções de autenticação do Google na aplicação do React Native. Agora, precisamos importar os módulos e componentes necessários do respectivo pacote, conforme mostrado no trecho de código abaixo:

import {
GoogleSignin,
GoogleSigninButton,
statusCodes,
} from 'react-native-google-signin';

Importa o componente de login do google

Em seguida, precisamos criar os estados para lidar com o estado de autenticação e as informações do usuário. Para isso, utilizamos o módulo useState, conforme mostrado no trecho de código abaixo:

const [loggedIn, setloggedIn] = useState(false);
const [userInfo, setuserInfo] = useState([]);

Adiciona os estados

Agora, precisamos criar uma função de login para lidar com a autenticação, conforme mostrado no trecho de código abaixo:

_signIn = async () => {
  try {
    await GoogleSignin.hasPlayServices();
    const {accessToken, idToken} = await GoogleSignin.signIn();
    setloggedIn(true);
  } catch (error) {
    if (error.code === statusCodes.SIGN_IN_CANCELLED) {
      // usuário cancelou o fluxo de login
      alert('Cancel');
    } else if (error.code === statusCodes.IN_PROGRESS) {
      alert('Signin in progress');
      // operação (por exemplo, o login) já está em andamento
    } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
      alert('PLAY_SERVICES_NOT_AVAILABLE');
      // serviços de execução não disponível ou desatualizado
    } else {
      // algum outro erro ocorreu
    }
  }
};

Adiciona a função do google sign-in

A seguir, precisamos inicializar a configuração do objeto de login do Google, fazendo uso da função useEffect:

useEffect(() => {
   GoogleSignin.configure({
     scopes: ['email'], // qual API você quer acessar em nome do usuário; o padrão é o email e o perfil
     webClientId:
       '418977770929-g9ou7r9eva1u78a3anassxxxxxxx.apps.googleusercontent.com', // o ID do client do tipo WEB para seu servidor (necessário para verificar o ID do usuário e o acesso off-line)
     offlineAccess: true, // se você deseja acessar a API do Google API em nome do usuário DE SEU SERVIDOR
   });
 }, []);

Por fim, precisamos de uma função que lide com a ação de logout. Para isso, vamos implementar o método signOut, conforme mostrado no trecho de código abaixo:

signOut = async () => {
    try {
      await GoogleSignin.revokeAccess();
      await GoogleSignin.signOut();
      setloggedIn(false);
      setuserInfo([]);
    } catch (error) {
      console.error(error);
    }
  };

Adiciona a função de sign-out do Google

Agora, precisamos apresentar os componentes na tela também. Para isso, vamos fazer uso de vários componentes como View e Button:

return (
    <>
      
      
        
          

          
            
              
            
            
              {!loggedIn && You are currently logged out}
              {loggedIn && (
                
              )}
            
          
        
      
    
  );

Código da IU

Agora, se nós executarmos nosso projeto no emulador, teremos os seguintes resultados:

Bem legal, certo? Concluímos a implementação (tanto da interface do usuário quanto da lógica de negócios) a nível do React Native em nosso projeto.

Como você pode ver, temos um botão "Sign in with Google" (Fazer login com o Google, em português) que se converte em um botão de logout assim que a operação de login é concluída com sucesso.

Agora, vamos configurar o pacote do Google SignIn e a aplicação do Firebase.

Configurando os projetos nativos do iOS e do Android

Existem algumas etapas de configuração que precisamos seguir antes que o projeto esteja totalmente funcionando. Elas estão relacionadas principalmente ao verdadeiro lado nativo da aplicação.

Para iOS

No VSCode (ou em qualquer Terminal), basta executar cd ios && pod install. Em seguida, abra o arquivo .xcworkspace no Xcode (da pasta ios) e verifique se os Pods estão incluídos:

Instala a biblioteca google login no xcode

Para Android

1. Primeiro, precisamos vincular o módulo nativo.

Se RN >= 0.60, você não precisa fazer nada, graças à vinculação automática.
Se RN < 0.60, execute react-native link react-native-google-signin.

2. Atualize o android/build.gradle com a seguinte configuração:

buildscript {
    ext {
        buildToolsVersion = "27.0.3"
        minSdkVersion = 16
        compileSdkVersion = 27
        targetSdkVersion = 26
        supportLibVersion = "27.1.1"
        googlePlayServicesAuthVersion = "16.0.1" // <--- use esta versão ou uma mais recente
    }
...
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.2' // <--- use esta versão ou uma mais recente
        classpath 'com.google.gms:google-services:4.1.0' // <--- use esta versão ou uma mais recente
    }
...
allprojects {
    repositories {
        mavenLocal()
        google() // <--- certifique-se de que isto está incluído
        jcenter()
        maven {
            // Todo o React Native (JS, fontes do Obj-C, binários do Android) é instalado a partir do npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

3. Atualize o android/app/build.gradle com a seguinte configuração:

...
dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.android.support:appcompat-v7:23.0.1"
    implementation "com.facebook.react:react-native:+"
    implementation(project(":react-native-community_google-signin")) // <--- adicione esta dependência
}

Confira se o react-native link vinculou o módulo nativo – porém, apenas se você usou o react-native link!

Em android/settings.gradle, devemos ter as seguintes configurações:

...
include ':react-native-google-signin', ':app'
project(':react-native-google-signin').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/google-signin/android')

Configura o google login para android em setting.gradle

Em seguida, em MainApplication.java , devemos ter o pacote do Google adicionado, conforme o trecho de código a seguir:

import co.apptailor.googlesignin.RNGoogleSigninPackage;  // <--- importar

public class MainApplication extends Application implements ReactApplication {

  ......

  @Override
    protected List getPackages() {
      return Arrays.asList(
          new MainReactPackage(),
          new RNGoogleSigninPackage() // <-- isto precisa estar na lista
      );
    }
  ......

}

Configura o google login para android em MainApplication.java

Configurando o Firebase

Para iOS

Agora, precisamos começar a configuração do Firebase. No Firebase, precisamos configurar uma aplicação em nuvem do Google. Quando configuramos o método de autenticação no Firebase, no entanto, isso também cria uma aplicação em nuvem do Google.

Primeiro, precisamos criar a aplicação do iOS do Firebase para obter o GoogleServiceinfo.plist, como mostrado na captura de tela abaixo:

Adiciona novo nome de aplicação do Firebase

Em seguida, copiamos o arquivo GoogleService-info.plist para o projeto do Xcode, como mostrado na captura de tela abaixo:

Adiciona o serviço do google plist ao xcode

Agora, precisamos adicionar o ID do client invertido que está presente no arquivo GoogleService-info.plist aos tipos de URL, tal como mostrado na captura de tela abaixo:

Obtém o id do client invertido do xcode

O próximo passo é ir até Info → URL Types e preencher o URL Schemes como mostrado na captura de tela abaixo:

Adiciona o url scheme ao xcode

Para Android

Primeiro, precisamos criar uma aplicação do Android no Firebase. Para isso, precisamos de um nome de pacote e certificado SHA-1 da nossa aplicação. Em seguida, podemos registrar a aplicação do Firebase, conforme mostrado abaixo:

Cria uma nova aplicação do Android do Firebase

Podemos obter o nome do pacote em MainApplication.java do nosso projeto, conforme destacado no trecho de código abaixo:

Descobre o nome do pacote na aplicação do Android

Em seguida, podemos obter a chave SHA-1 no arquivo Keystore. No diretório android/app, podemos executar o comando:

cd android/app ; 
keytool -exportcert -keystore debug.keystore -list -v

Gera sha-1

Então, a chave SHA-1 aparecerá, conforme mostrado na captura de tela abaixo:

Gera sha1 para registrar a aplicação do Android no Firebase

Após criar a aplicação de configuração do Firebase com sucesso, precisamos baixar o arquivo google-services.json e copiá-lo para o diretório, conforme mostrado na captura de tela abaixo:

Adiciona google service json à pasta da aplicação do android

Agora, a etapa final é configurar um componente de login do Google no Android.

Instalando o pacote do Firebase do React Native

Para instalar o pacote react-native-firebase, versão 6, precisamos executar o seguinte comando no prompt de comando do nosso projeto:

# Using npm 
npm install --save @react-native-firebase/app 
# Using Yarn 
yarn add @react-native-firebase/app

Instala o componente principal react-native-firebase

O módulo @react-native-firebase/app deve ser instalado antes de usar qualquer outro serviço do Firebase.

Para iOS

Já adicionamos GoogleService-Info.plist ao Xcode. O que resta é permitir que o Firebase no iOS use as credenciais. O SDK do Firebase para iOS deve ser configurado durante a fase de inicialização da aplicação.

Para fazer isso, precisamos abrir nosso arquivo /ios/{projectName}/AppDelegate.m, e adicionar o seguinte:

Na parte superior do arquivo, precisamos importar o SDK do Firebase:

#import

Inclui o Firebase

Dentro do método didFinishLaunchingWithOptions existente, precisamos adicionar o seguinte ao topo do método:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  // Adicione-me --- \/
  if ([FIRApp defaultApp] == nil) {
    [FIRApp configure];
  }
  // Adicione-me --- /\
  // ...
}

Firebase React Native

Por fim, precisamos executar o seguinte comando para finalizar a instalação do pacote CocoaPods:

cd ios ; pod install

instala CocoaPods

É isso. Concluímos a instalação do pacote principal do Firebase no iOS.

Para Android

Precisamos configurar o Firebase com as credenciais do Android. Para permitir que o Firebase no Android use as credenciais, o plugin google-services deve estar ativado no projeto. Isso requer a modificação em dois arquivos no diretório Android.

Primeiro, adicione o plug-in google-services como uma dependência dentro do arquivo android/build.gradle:

buildscript {
  dependencies {
    // ... outras dependências
    classpath 'com.google.gms:google-services:4.2.0'
    // Adicione-me --- /\
  }
}
// Por fim, execute o plug-in adicionando o seguinte ao final do arquivo /android/app/build.gradle:

apply plugin: 'com.google.gms.google-services'

Adiciona o serviço google

Módulo de autenticação do React Native Firebase

Após a conclusão da instalação, precisamos configurar o pacote pai do Firebase. Em seguida, precisamos instalar o módulo filho para autenticação. Para isso, precisamos abrir um terminal e executar o seguinte comando:

yarn add @react-native-firebase/auth

install react native firebase auth

Para iOS

Precisamos instalar os pods novamente na linha de comando:

cd ios/ && pod install

Instala o cacao pod

Para Android

Você pode seguir as instruções na documentação oficial, a qual é necessária somente se você estiver usando o React Native <= 0.59 ou se precisar integrar manualmente a biblioteca.

Precisamos ir ao console do Firebase. Em seguida, na seção Authentication (Autenticação, em português), precisamos clicar em Google, conforme mostrado na captura de tela abaixo:

Método de autenticação no Firebase

Em seguida, precisamos habilitar a configuração e salvá-la conforme mostrado na captura de tela abaixo:

Ativa o e-mail de suporte do projeto

No App.js, precisamos importar o auth do pacote Firebase, como mostrado no trecho de código abaixo:

import auth from '@react-native-firebase/auth';

Importa o auth do pacote firebase

Em seguida, precisamos integrar a configuração de autenticação à função de login. Após um login bem-sucedido, armazenamos o accessToken e o idToken no Firebase. Agora, podemos tentar fazer login com o Google em nossa aplicação do React Native de demonstração.

_signIn = async () => {
    try {
      await GoogleSignin.hasPlayServices();
      const {accessToken, idToken} = await GoogleSignin.signIn();
      setloggedIn(true);
      const credential = auth.GoogleAuthProvider.credential(
        idToken,
        accessToken,
      );
      await auth().signInWithCredential(credential);
    } catch (error) {

Função de Login do Firebase

Agora, concluímos com sucesso a integração do Login do Google em nossa aplicação do React Native:

Resultado do login do Google com o React Native

Podemos ver novos dados que são adicionados ao console do Firebase:

Console de autenticação do firebase

Rastreando o status do usuário

Para verificar o status do login do usuário, usamos o Firebase Auth. Para isso, precisamos adicionar o método onAuthStateChanged ao useEffect para que ele seja executado em cada chamada do evento componentDidMount.

Além disso, precisamos passar um retorno de chamada para a função denominada onAuthStateChanged como um argumento, conforme mostrado no trecho de código abaixo:

useEffect(() => {
    .............
    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber; // remover a inscrição ao desmontar
  }, []);

Subscreve ao estado da autenticação

Na função onAuthStateChanged, tratamos os dados do estado local conforme mostrado no trecho de código abaixo:

function onAuthStateChanged(user) {
    setUser(user);
    console.log(user);
    if (user) setloggedIn(true);
  }

Define dados do usuário

Agora, precisamos armazenar os dados do usuário no estado. Em seguida, tentar exibir os dados do usuário após um login bem-sucedido. Para isso, precisamos usar o seguinte pedaço de código:

{!user && You are currently logged out}
{user && (
  
    Welcome {user.displayName}
    
  
)}

Código para exibir as informações do usuário

Teremos o seguinte resultado em nosso simulador:

Logout do auth do Firebase

Logout do Firebase

Para sair, precisamos remover todas as credenciais do usuário e revogar o token de login do Google.

Primeiro, precisamos aguardar o módulo GoogleSignin revogar o acesso e sair. Em seguida, chamamos o método signOut da autenticação do Firebase para fazer logout com êxito.

A implementação completa do código é fornecida no trecho de código abaixo:

signOut = async () => {
    try {
      await GoogleSignin.revokeAccess();
      await GoogleSignin.signOut();
      auth()
        .signOut()
        .then(() => alert('Your are signed out!'));
      setloggedIn(false);
      // setuserInfo([]);
    } catch (error) {
      console.error(error);
    }
  };

Função de logout do Firebase

Como resultado, agora podemos realizar operações de logout, conforme mostrado no trecho de código abaixo:

Logout do Firebase com React Native

Conclusão

Neste tutorial, aprendemos como configurar o Login do Google, além de armazenar um token de acesso, aproveitando o Firebase em nosso projeto React Native.

Primeiro, criamos o projeto do React Native com todos os componentes e configurações de funções necessários. Em seguida, aprendemos como configurar o Google Sign In e o Firebase para as plataformas do Android e do iOS. Por fim, configuramos o Firebase na aplicação do React Native usando um pacote do Firebase e exibimos os dados do usuário junto com o botão de logout.

Você pode baixar o código-fonte completo deste tutorial no Github.

A melhor parte é que o Firebase e o Google Auth são compatíveis com todas as linguagens de desenvolvimento para dispositivos móveis, tais como Flutter, Swift ou Kotlin. As etapas de configuração e a abordagem arquitetural são exatamente as mesmas.

Próximos passos

Agora que você aprendeu sobre como configurar o Login do Google com Firebase em aplicações do React Native, aqui estão alguns outros tópicos nos quais você pode dar uma olhada:

Como criar uma aplicação em React Native e integrá-la com Firebase
Firebase e React Native — Notificações push | Armazenamento do Firebase (textos em inglês)
Mais métodos de autenticação em React Native e Firebase — Login do Google | Login do Facebook | Autenticação OTP/SMS por telefone (textos em inglês)

Se você gostou deste tutorial do React Native, dê uma estrela no repositório do Github e compartilhe-o com sua comunidade. Você pode conferir ainda mais projetos do React Native gratuitos na Instamobile. Obrigado!

Como criar uma aplicação em React Native e integrá-la com Firebase

Ana Beatriz — Wed, 05 Oct 2022 09:34:00 +0000

Artigo original: How to Build a React Native App and Integrate It with Firebase

Neste tutorial, vamos construir uma aplicação em React Native integrada ao Firebase no back-end. A aplicação também terá suporte da React Native CLI e da Expo CLI.

Este tutorial de React Native com Firebase abrangerá as funcionalidades principais, como autenticação, registro e operações CRUD no banco de dados (Firestore).

Você também pode baixar o código completo no GitHub se quiser conferi-lo.

Este tutorial percorrerá os detalhes por meio das seguintes seções:

Criação de um projeto com o Firebase
Criação e configuração de uma aplicação em React Native
Configuração da estrutura de pastas, rotas e navegação
Implementação da interface para telas de login, registro e início
Registro com Firebase Auth
Login com Firebase Auth
Persistência de credenciais de login
Escrita e leitura de dados a partir do Firebase Firestore

Sem mais delongas, vamos começar a construir o projeto em React Native com Firebase. A aplicação final ficará assim:

1. Criação de um projeto com o Firebase

Visite Firebase.com e crie uma conta. Quando fizer login, você poderá criar um projeto no Firebase Console.

Crie uma conta no Firebase.com
Crie um projeto no Firebase Console
Habilite o método de autenticação com e-mail e senha em Firebase Console -> Authentication -> Sign-in method

Crie uma aplicação para o iOS, com o ID de aplicação com.reactnativefirebase

(Opcional) Crie uma aplicação do Android com o nome de pacote com.reactnativefirebase
Baixe no seu computador o arquivo de configuração gerado no próximo passo (GoogleService-Info.plist para iOS e google-services.json para Android)

O Firebase permite construir aplicações sem o back-end. É um produto que executa por dentro da Google Cloud e permite que os desenvolvedores construam aplicações para a web e dispositivos móveis sem precisarem de seus próprios servidores.

Isso faz você economizar muito tempo, por não haver a necessidade de escrever código para o back-end. Também é muito escalável, sendo sustentado pela infraestrutura do Google.

No Firebase, você poderá armazenar tudo que é necessário para sua aplicação – usuários, dados, arquivos, tokens para notificações por push, etc. Toda essa informação fica disponível nos clients para dispositivos móveis a partir dos SDKs do Firebase, que são compatíveis com o React Native. Isso significa que todas as interações com o back-end ficam abstraídas e encapsuladas no SDK. Então, os desenvolvedores para dispositivos móveis não precisam se preocupar com chamadas para API, análise de dados, gerenciamento de sockets e outros aspectos.

2. Criação e configuração de uma aplicação em React Native

Vamos deixar nossa aplicação do React Native com Firebase compatível com a Expo CLI e a React Native CLI.‌‌ Vamos usar o Expo por agora, pois facilita a visualização da aplicação. Não usaremos, no entanto, bibliotecas específicas do Expo. Assim, o código fonte será usado de maneira simples em qualquer aplicação do React Native, não importando no que ele está baseado. ‌‌Vamos usar o SDK Web do Firebase, que é compatível com o Expo e com a React Native CLI, além de ter suporte direto do Google.

Se você quiser usar react-native-firebase como alternativa, fique à vontade para instalar e configurar (o código permanecerá o mesmo). Saiba que não recomendamos isso por alguns motivos:

ele não possui suporte direto do Google, o que torna a manutenção mais difícil, dado que é uma camada extra que pode causar bugs e
ele não funciona com o Expo, o que pode ser um problema para muitos desenvolvedores.

Os passos a seguir também estão na documentação oficial do React Native, em Como configurar seu ambiente de desenvolvimento (em inglês).

Instale a Expo CLI

No seu terminal, execute

npm install -g expo-cli

Crie uma aplicação do React Native executando

expo init react-native-firebase

Para o template, escolha Managed Workflow — Blank

Inicie a aplicação executando

yarn ios
// ou
yarn android

O comando também fornecerá a você um QR Code que pode ser escaneado usando a aplicação de Camera, no iOS, ou o Expo, no Android.

Ótimo. Agora temos uma nova aplicação do React Native, executando no iOS e no Android. Vamos começar conectando-a ao nosso back-end usando o Firebase.

Adicione o SDK do Firebase no projeto React Native

yarn add firebase

Adicione a biblioteca React Native Navigation executando

yarn add @react-navigation/native && yarn add @react-navigation/stack && expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

Adicione vários componentes à interface e pacotes que serão usados no projeto

yarn add react-native-keyboard-aware-scroll-view base-64

Crie um arquivo de configuração para o Firebase

mkdir src src/firebase && touch src/firebase/config.js

Adicione a configuração do seu firebase em src/firebase/config.js:

import * as firebase from 'firebase';
import '@firebase/auth';
import '@firebase/firestore';

const firebaseConfig = {
  apiKey: 'YOUR_KEY_HERE_AIzaSyAOWH',
  authDomain: 'your-auth-domain-b1234.firebaseapp.com',
  databaseURL: 'https://your-database-name.firebaseio.com',
  projectId: 'your-project-id-1234',
  storageBucket: 'your-project-id-1234.appspot.com',
  messagingSenderId: '12345-insert-yourse',
  appId: 'insert yours: 1:1234:web:ee873bd1234c0deb7eba61ce',
};

if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);
}

export { firebase };

Você consegue toda a informação a partir do Firebase Console -> Project Settings

3. Configuração da estrutura de pastas, rotas e navegação

Crie a estrutura da pasta executando

mkdir src/screens src/screens/LoginScreen src/screens/RegistrationScreen src/screens/HomeScreen

Crie a estrutura de arquivos executando

touch src/screens/index.js src/screens/LoginScreen/LoginScreen.js src/screens/LoginScreen/styles.js src/screens/RegistrationScreen/RegistrationScreen.js src/screens/styles.js src/screens/HomeScreen/HomeScreen.js src/screens/HomeScreen/styles.js

Adicione este código a src/screens/index.js

export { default as LoginScreen } from './LoginScreen/LoginScreen'

export { default as HomeScreen } from './HomeScreen/HomeScreen'

export { default as RegistrationScreen } from './RegistrationScreen/RegistrationScreen'

Não se preocupe se o projeto apresentar erros! Tudo fará sentido daqui a pouco.

Configure as rotas e navegações

Sobrescreva o arquivo App.js com o seguinte código:

import 'react-native-gesture-handler';
import React, { useEffect, useState } from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import { LoginScreen, HomeScreen, RegistrationScreen } from './src/screens'
import {decode, encode} from 'base-64'
if (!global.btoa) {  global.btoa = encode }
if (!global.atob) { global.atob = decode }

const Stack = createStackNavigator();

export default function App() {

  const [loading, setLoading] = useState(true)
  const [user, setUser] = useState(null)

  return (
    
      
        { user ? (
          
            {props => }
          
        ) : (
          <>
            
            
          
        )}
      
    
  );
}

4. Implementação da interface

Agora que temos a base da aplicação, vamos continuar e implementar os componentes para a interface de todas as telas. Não falaremos sobre layout flexível, nem sobre estilização do React Native, visto que esses pontos estão fora do escopo deste tutorial. Vamos focar na integração entre React Native e Firebase.

Sobrescreva os arquivos a seguir:

src/LoginScreen/LoginScreen.js

import React, { useState } from 'react'
import { Image, Text, TextInput, TouchableOpacity, View } from 'react-native'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import styles from './styles';

export default function LoginScreen({navigation}) {
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')

    const onFooterLinkPress = () => {
        navigation.navigate('Registration')
    }

    const onLoginPress = () => {
    }

    return (
        
            
                
                 setEmail(text)}
                    value={email}
                    underlineColorAndroid="transparent"
                    autoCapitalize="none"
                />
                 setPassword(text)}
                    value={password}
                    underlineColorAndroid="transparent"
                    autoCapitalize="none"
                />
                 onLoginPress()}>
                    Log in
                
                
                    Don't have an account? Sign up
                
            
        
    )
}

src/LoginScreen/styles.js

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center'
    },
    title: {

    },
    logo: {
        flex: 1,
        height: 120,
        width: 90,
        alignSelf: "center",
        margin: 30
    },
    input: {
        height: 48,
        borderRadius: 5,
        overflow: 'hidden',
        backgroundColor: 'white',
        marginTop: 10,
        marginBottom: 10,
        marginLeft: 30,
        marginRight: 30,
        paddingLeft: 16
    },
    button: {
        backgroundColor: '#788eec',
        marginLeft: 30,
        marginRight: 30,
        marginTop: 20,
        height: 48,
        borderRadius: 5,
        alignItems: "center",
        justifyContent: 'center'
    },
    buttonTitle: {
        color: 'white',
        fontSize: 16,
        fontWeight: "bold"
    },
    footerView: {
        flex: 1,
        alignItems: "center",
        marginTop: 20
    },
    footerText: {
        fontSize: 16,
        color: '#2e2e2d'
    },
    footerLink: {
        color: "#788eec",
        fontWeight: "bold",
        fontSize: 16
    }
})

src/RegistrationScreen/RegistrationScreen.js

import React, { useState } from 'react'
import { Image, Text, TextInput, TouchableOpacity, View } from 'react-native'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import styles from './styles';

export default function RegistrationScreen({navigation}) {
    const [fullName, setFullName] = useState('')
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    const [confirmPassword, setConfirmPassword] = useState('')

    const onFooterLinkPress = () => {
        navigation.navigate('Login')
    }

    const onRegisterPress = () => {
    }

    return (
        
            
                
                 setFullName(text)}
                    value={fullName}
                    underlineColorAndroid="transparent"
                    autoCapitalize="none"
                />
                 setEmail(text)}
                    value={email}
                    underlineColorAndroid="transparent"
                    autoCapitalize="none"
                />
                 setPassword(text)}
                    value={password}
                    underlineColorAndroid="transparent"
                    autoCapitalize="none"
                />
                 setConfirmPassword(text)}
                    value={confirmPassword}
                    underlineColorAndroid="transparent"
                    autoCapitalize="none"
                />
                 onRegisterPress()}>
                    Create account
                
                
                    Already got an account? Log in
                
            
        
    )
}

src/RegistrationScreen/styles.js

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center'
    },
    title: {

    },
    logo: {
        flex: 1,
        height: 120,
        width: 90,
        alignSelf: "center",
        margin: 30
    },
    input: {
        height: 48,
        borderRadius: 5,
        overflow: 'hidden',
        backgroundColor: 'white',
        marginTop: 10,
        marginBottom: 10,
        marginLeft: 30,
        marginRight: 30,
        paddingLeft: 16
    },
    button: {
        backgroundColor: '#788eec',
        marginLeft: 30,
        marginRight: 30,
        marginTop: 20,
        height: 48,
        borderRadius: 5,
        alignItems: "center",
        justifyContent: 'center'
    },
    buttonTitle: {
        color: 'white',
        fontSize: 16,
        fontWeight: "bold"
    },
    footerView: {
        flex: 1,
        alignItems: "center",
        marginTop: 20
    },
    footerText: {
        fontSize: 16,
        color: '#2e2e2d'
    },
    footerLink: {
        color: "#788eec",
        fontWeight: "bold",
        fontSize: 16
    }
})

src/HomeScreen/HomeScreen.js

import React from 'react'
import { Text, View } from 'react-native'

export default function HomeScreen(props) {
    return (
        
            Home Screen
        
    )
}

src/HomeScreen/styles.js

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center'
    },
    input: {
        height: 48,
        borderRadius: 5,
        overflow: 'hidden',
        backgroundColor: 'white',
        marginTop: 10,
        marginBottom: 10,
        marginLeft: 30,
        marginRight: 30,
        paddingLeft: 16
    }
})

Até aqui, sua aplicação deve executar corretamente e mostrar as seguintes telas (interface apenas):

Você pode mudar entre as duas telas pressionando os links no rodapé.

Agora que temos uma interface bonita de login e registro, vamos ver como podemos integrar nossa aplicação do React Native (e Expo) com o Firebase.

5. React Native com Firebase — registro

Vamos começar criando uma conta com o Firebase Auth, pois o login acontece depois. Para isso, vamos adicionar a lógica do Firebase para criar uma conta com e-mail e senha em RegistrationScreen.js, implementando o método onRegisterPress, assim:

//...

import { firebase } from '../../firebase/config'

//...

export default function RegistrationScreen({navigation}) {
    //...

    const onRegisterPress = () => {
        if (password !== confirmPassword) {
            alert("Passwords don't match.")
            return
        }
        firebase
            .auth()
            .createUserWithEmailAndPassword(email, password)
            .then((response) => {
                const uid = response.user.uid
                const data = {
                    id: uid,
                    email,
                    fullName,
                };
                const usersRef = firebase.firestore().collection('users')
                usersRef
                    .doc(uid)
                    .set(data)
                    .then(() => {
                        navigation.navigate('Home', {user: data})
                    })
                    .catch((error) => {
                        alert(error)
                    });
            })
            .catch((error) => {
                alert(error)
        });
    }
    
    //...
}

No fluxo de criação de senha acima, fizemos algumas coisas importantes:

Chamamos a função createUserWithEmailAndPassword, da API do Firebase Auth (linha 13), que cria uma conta que será mostrada na tabela em Firebase Console -> Authentication.
Se o registro da conta foi feito com sucesso, também armazenamos os dados do usuário no Firebase Firestore (linha 24). Isso é necessário para armazenar informações adicionais do usuário, como nome completo, URL da foto de perfil e assim por diante, que não podem ser armazenadas na tabela de autenticação.
Se o registro foi feito com sucesso, vamos navegar para a tela de início, também passando os dados do usuário como objeto.
Se qualquer erro ocorrer, simplesmente mostramos um alerta mostrando o erro. Erros podem acontecer por causa de conexão de rede, senha muito curta, e-mail inválido e assim por diante.

Recarregue sua aplicação e teste o registro. Se você criou uma conta com sucesso, veja se ela aparece em Firebase Console -> Authentication:

Agora que conseguimos criar as contas, vamos implementar a funcionalidade de login. O SDK do Firebase cuida de todos os passos necessários para que o login tenha autorização e autenticação seguras.

Abra LoginScreen.js, importe o firebase e complete o método onLoginPress:

//...

import { firebase } from '../../firebase/config'

//...

export default function LoginScreen({navigation}) {

    //...

    const onLoginPress = () => {
        firebase
            .auth()
            .signInWithEmailAndPassword(email, password)
            .then((response) => {
                const uid = response.user.uid
                const usersRef = firebase.firestore().collection('users')
                usersRef
                    .doc(uid)
                    .get()
                    .then(firestoreDocument => {
                        if (!firestoreDocument.exists) {
                            alert("User does not exist anymore.")
                            return;
                        }
                        const user = firestoreDocument.data()
                        navigation.navigate('Home', {user})
                    })
                    .catch(error => {
                        alert(error)
                    });
            })
            .catch(error => {
                alert(error)
            })
    }

    //...

}

Recarregue sua aplicação e faça login com uma conta existente. A aplicação deverá enviar você para a tela de início se as credenciais estiverem corretas, ou mostrará um alerta com um erro, se algo der errado.

Você verá que, se sair da aplicação e abri-la novamente, ela mostrará a tela de login de novo. Para uma boa experiência do usuário, queremos redirecionar todos os usuários para a tela de início. Ninguém quer digitar suas credenciais de login toda vez que quiser usar a aplicação.

Isso também é conhecido como persistência de login. Felizmente, o SDK do Firebase cuida disso para nós, lidando com todas as questões de segurança. A persistência de login está habilitada por padrão no Firebase. Então, tudo que precisamos fazer é buscar pelo usuário atual que fez login.

Abra o arquivo App.js e vamos implementar a funcionalidade de persistência de login:

//...

import { firebase } from './src/firebase/config'

//...

export default function App() {

  //...

  if (loading) {	
    return (	
      <>	
    )	
  }

  useEffect(() => {
    const usersRef = firebase.firestore().collection('users');
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        usersRef
          .doc(user.uid)
          .get()
          .then((document) => {
            const userData = document.data()
            setLoading(false)
            setUser(userData)
          })
          .catch((error) => {
            setLoading(false)
          });
      } else {
        setLoading(false)
      }
    });
  }, []);

  //...

}

onAuthStateChanged retorna o usuário atual que fez login. Então, procuramos toda a informação adicional que armazenamos no Firebase e a indicamos no estado atual do componente. Isso renderizará a aplicação novamente, o que mostrará a tela de início.

Note que, como usamos a função pela primeira vez, a aplicação carregou utilizando o hook useEffect.

8. Escrita e leitura de dados a partir do Firebase Firestore

Já usamos o Firebase acima, para salvar informações adicionais sobre nossos usuários (o nome completo). Nesta seção, vamos ver como podemos escrever dados no Firebase e como podemos buscá-los.

Vamos compreender como observar (ouvir) mudanças na coleção do Firebase e refleti-las na tela, em tempo real. Isso pode ser muito útil em aplicações de tempo real, como o React Native Chat.

Para simplificar, vamos salvar alguns itens textuais na coleção do Firestore chamada "entities" (entidades). Pense nesses itens como se fossem tarefas, postagens, tweets, qualquer coisa. Vamos criar um arquivo simples, que adiciona uma nova entidade, e vamos também listar todas as entidades que pertencem ao usuário atual que fez login. Além disso, a lista será atualizada em tempo real.

Implemente HomeScreen.js reescrevendo-o com o código abaixo

import React, { useEffect, useState } from 'react'
import { FlatList, Keyboard, Text, TextInput, TouchableOpacity, View } from 'react-native'
import styles from './styles';
import { firebase } from '../../firebase/config'

export default function HomeScreen(props) {

    const [entityText, setEntityText] = useState('')
    const [entities, setEntities] = useState([])

    const entityRef = firebase.firestore().collection('entities')
    const userID = props.extraData.id

    useEffect(() => {
        entityRef
            .where("authorID", "==", userID)
            .orderBy('createdAt', 'desc')
            .onSnapshot(
                querySnapshot => {
                    const newEntities = []
                    querySnapshot.forEach(doc => {
                        const entity = doc.data()
                        entity.id = doc.id
                        newEntities.push(entity)
                    });
                    setEntities(newEntities)
                },
                error => {
                    console.log(error)
                }
            )
    }, [])

    const onAddButtonPress = () => {
        if (entityText && entityText.length > 0) {
            const timestamp = firebase.firestore.FieldValue.serverTimestamp();
            const data = {
                text: entityText,
                authorID: userID,
                createdAt: timestamp,
            };
            entityRef
                .add(data)
                .then(_doc => {
                    setEntityText('')
                    Keyboard.dismiss()
                })
                .catch((error) => {
                    alert(error)
                });
        }
    }

    const renderEntity = ({item, index}) => {
        return (
            
                
                    {index}. {item.text}
                
            
        )
    }

    return (
        
            
                 setEntityText(text)}
                    value={entityText}
                    underlineColorAndroid="transparent"
                    autoCapitalize="none"
                />
                
                    Add
                
            
            { entities && (
                
                     item.id}
                        removeClippedSubviews={true}
                    />
                
            )}
        
    )
}

Estilize a tela inicial, sobrescrevendo HomeScreen/styles.js com:

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center'
    },
    formContainer: {
        flexDirection: 'row',
        height: 80,
        marginTop: 40,
        marginBottom: 20,
        flex: 1,
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 30,
        paddingRight: 30,
        justifyContent: 'center',
        alignItems: 'center'
    },
    input: {
        height: 48,
        borderRadius: 5,
        overflow: 'hidden',
        backgroundColor: 'white',
        paddingLeft: 16,
        flex: 1,
        marginRight: 5
    },
    button: {
        height: 47,
        borderRadius: 5,
        backgroundColor: '#788eec',
        width: 80,
        alignItems: "center",
        justifyContent: 'center'
    },
    buttonText: {
        color: 'white',
        fontSize: 16
    },
    listContainer: {
        marginTop: 20,
        padding: 20,
    },
    entityContainer: {
        marginTop: 16,
        borderBottomColor: '#cccccc',
        borderBottomWidth: 1,
        paddingBottom: 16
    },
    entityText: {
        fontSize: 20,
        color: '#333333'
    }
})

Recarregue a aplicação e observe a nova tela inicial. Digite algo e pressione o botão Add.
Nada acontece.
Crie um índice nas entidades da coleção do Firestore

Você verá que a lista de entidades não foi renderizada. Se conferirmos os registros, veremos um aviso sobre "a busca precisar de um índice", seguido de um grande URL:

Isso nos informa que não podemos buscar tabelas de entidades pelo authorID e classificar os dados por createdAt em ordem decrescente, a menos que criemos um índice. Criar um índice é bem fácil, na verdade—simplesmente clique no URL e, então, clique no botão:

Recarregue a aplicação novamente

Agora, tudo funciona como o esperado:

A aplicação lista todas as entidades na coleção entities, em ordem decrescente de acordo com a criação
Adicionar uma nova entidade funciona
A lista atualiza em tempo real (tente apagar um registro diretamente do banco de dados ou adicionar um novo diretamente da aplicação)

Seu banco de dados do Firestore, agora, fica assim:

É assim que você lê e escreve no Firestore em React Native. Vamos para a última seção.

Brinque com a aplicação, adicionando novas entidades. Este é o projeto final:

Conclusão

O Firebase facilita o suporte para autenticação e banco de dados para qualquer aplicação em React Native. O SDK do Firebase é extremamente poderoso, suporta vários padrões de leitura e escrita em bancos de dados.

Além do React Native, o SDK do Firebase providencia suporte para várias outras linguagens, como Swift, Kotlin ou Flutter. Confira esses links para ver instruções para os iniciantes no Firebase em várias linguagens.

Mostramos o básico neste tutorial de React Native com Firebase. Nos próximos, vamos abranger mais funcionalidades avançadas, como Firebase Storage (carregamento de arquivos) e notificações por push.

Se você gostou deste tutorial, dê uma estrela no repositório do GitHub e compartilhe este artigo com sua comunidade. Você pode conferir muitos projetos gratuitos em React Native no Instamobile. Abraços!

Como fazer sua aplicação em React Native responder normalmente quando o teclado aparecer

Paula Flávia Pagotto Simionato — Thu, 08 Sep 2022 21:00:00 +0000

Artigo original: How to make your React Native app respond gracefully when the keyboard pops up

por Spencer Carli

Quando você está trabalhando com aplicações do React Native, um problema comum é que o teclado aparecerá e ocultará as entradas de texto quando você focar nelas. Algo assim:

Existem algumas maneiras de evitar isso. Algumas são simples, outras nem tanto. Algumas podem ser personalizadas. Outras, não. Hoje, vou mostrar três maneiras diferentes de evitar o teclado no React Native.

Eu coloquei todo o código-fonte para este tutorial no Github.

KeyboardAvoidingView

A solução mais simples e mais fácil de instalar é o KeyboardAvoidingView. É um componente central, mas também é bastante simples no que faz.

Você pode pegar o código de base, que tem o teclado cobrindo as entradas, e atualizá-lo para que as entradas não sejam mais cobertas. A primeira coisa que você precisa fazer é substituir o contêiner View pelo KeyboardAvoidingView e, em seguida, adicionar uma prop behavior a ele. Se você olhar a documentação, verá que ela aceita três valores diferentes – altura, preenchimento, posição. Descobri que o preenchimento funciona da maneira mais previsível. Então, é isso que eu vou usar.

Isso nos dá o resultado que se vê abaixo. Não é perfeito, mas pelo pouquíssimo trabalho que dá, é muito bom.

Uma coisa a ser notada é que, na linha 30, você verá uma View que tem uma altura definida como 60px. Descobri que a Key Avoiding View não funciona com o último elemento e a configuração de preenchimento e margem (padding e margin, em inglês) não funcionou. Então, eu adicionei um novo elemento para "aumentar" tudo em alguns pixels.

A imagem na parte superior é empurrada para fora da visualização ao usar essa implementação simples. Eu vou mostrar como você pode consertar isso no final.

Usuários do Android: descobri que essa é a melhor/única opção. Ao adicionar android:windowSoftInputMode="adjustResize" ao seu AndroidManifest.xml, o sistema operacional cuidará da maior parte do trabalho para você e o KeyboardAvoidingView cuidará do resto (exemplo de AndroidManifest.xml). O restante deste artigo provavelmente não se aplicará a você.

Keyboard Aware ScrollView

A próxima opção é a react-native-keyboard-aware-scroll-view, que oferece muito retorno pelo seu investimento. Nos bastidores, você estará usando ScrollView ou ListView para lidar com tudo (dependendo do componente que você escolher), o que torna a interação de rolagem bastante perfeita. O outro grande benefício desse pacote é que ele rolará para a entrada que está em foco, o que proporciona ao usuário uma experiência agradável.

O uso também é muito fácil — você só precisa trocar o contêiner View, começando novamente com o código de base, e definir algumas opções. Aqui está o código, então eu vou descrevê-lo.

Primeiro, você deve definir a backgroundColor do ScrollView. Dessa maneira (como se você fosse reativar a rolagem), a backgroundColor será sempre a mesma. Em seguida, você deve dizer ao componente onde está a posição padrão para que, uma vez que o teclado seja fechado, ele volte a esse ponto - omitindo esse suporte, a visualização deve ficar presa no topo depois de fechar o teclado, assim.

Após a prop resetScrollToCoords, você deve definir o contentContainerStyle - que, basicamente, substitui os estilos de exibição que você tinha antes. A última coisa que estou fazendo é desabilitar a ScrollView da interação do usuário. Isso pode nem sempre fazer sentido para sua UI (interface do usuário) – como no caso de uma interface em que um usuário edita muitos campos de perfil – mas, para esta, faz muito sentido. O que não faz sentido é permitir que o usuário role manualmente, pois não há para onde rolar.

Combinando essas props, você obtém o seguinte resultado, que funciona muito bem.

Keyboard Module

Esta é, de longe, a opção mais manual, mas é, também, a que dá mais controle. Você usará a biblioteca Animated para ajudar a proporcionar interações suaves, como você viu antes.

O módulo Keyboard, que não está documentado no site do React Native, permite que você escute eventos de teclado emitidos pelo dispositivo. Os eventos que você usará são keyboardWillShow e keyboardWillHide, que retornam o tempo de duração da animação e a posição final do teclado (entre outras informações).

Se você estiver no Android, convém usar keyboardDidShow e o keyboardDidHide.

Quando o evento keyboardWillShow for emitido, você definirá uma variável animated para a altura final do teclado e fará com que ela seja animada pela mesma duração da animação de rolagem do teclado. Em seguida, você usa esse valor de animated para definir o preenchimento na parte inferior do contêiner para aumentar todo o conteúdo.

Mostrarei o código em um momento, mas fazer o que descrevi acima nos deixa com a seguinte experiência.

Eu quero consertar essa imagem desta vez. Para isso, você usará um valor animado para gerenciar a altura da imagem, que você ajustará quando o teclado for aberto. Aqui está o código.

import React, { Component } from 'react';
import { View, TextInput, Image, Animated, Keyboard } from 'react-native';
import styles, { IMAGE_HEIGHT, IMAGE_HEIGHT_SMALL} from './styles';
import logo from './logo.png';

class Demo extends Component {
  constructor(props) {
    super(props);

    this.keyboardHeight = new Animated.Value(0);
    this.imageHeight = new Animated.Value(IMAGE_HEIGHT);
  }

  componentWillMount () {
    this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow);
    this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide);
  }

  componentWillUnmount() {
    this.keyboardWillShowSub.remove();
    this.keyboardWillHideSub.remove();
  }

  keyboardWillShow = (event) => {
    Animated.parallel([
      Animated.timing(this.keyboardHeight, {
        duration: event.duration,
        toValue: event.endCoordinates.height,
      }),
      Animated.timing(this.imageHeight, {
        duration: event.duration,
        toValue: IMAGE_HEIGHT_SMALL,
      }),
    ]).start();
  };

  keyboardWillHide = (event) => {
    Animated.parallel([
      Animated.timing(this.keyboardHeight, {
        duration: event.duration,
        toValue: 0,
      }),
      Animated.timing(this.imageHeight, {
        duration: event.duration,
        toValue: IMAGE_HEIGHT,
      }),
    ]).start();
  };

  render() {
    return (
      
        
        
        
        
        
      
    );
  }
};

export default Demo;

KeyboardModule.js

Certamente, há muito mais aqui do que nas outras soluções. Em vez de uma View ou Image, você está usando Animated.View e Animated.Image para que os valores de animated possam ser aproveitados. A parte divertida está realmente nas funções keyboardWillShow e keyboardWillHide, onde os valores de animated estão mudando.

O que está acontecendo é que os dois valores de animated estão mudando em paralelo, os quais estão sendo usados para orientar a interface do usuário. Isso deixa você com o resultado abaixo.

É uma quantidade razoável de código, mas fica muito bom. Você tem muitas opções para o que pode fazer e pode realmente personalizar a interação para o conteúdo do seu coração.

Combinando opções

Se você quiser diminuir um pouco o código, pode combinar algumas opções, que é o que costumo fazer. Por exemplo, combinando a primeira e a terceira opções, você precisa apenas se preocupar em gerenciar e animar a altura da imagem.

O código não é muito menor do que a fonte da terceira opção, mas à medida que uma interface do usuário cresce em complexidade, ele pode ajudá-lo um pouco mais.

import React, { Component } from 'react';
import { View, TextInput, Image, Animated, Keyboard, KeyboardAvoidingView } from 'react-native';
import styles, { IMAGE_HEIGHT, IMAGE_HEIGHT_SMALL } from './styles';
import logo from './logo.png';

class Demo extends Component {
  constructor(props) {
    super(props);

    this.imageHeight = new Animated.Value(IMAGE_HEIGHT);
  }

  componentWillMount () {
    this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow);
    this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide);
  }

  componentWillUnmount() {
    this.keyboardWillShowSub.remove();
    this.keyboardWillHideSub.remove();
  }

  keyboardWillShow = (event) => {
    Animated.timing(this.imageHeight, {
      duration: event.duration,
      toValue: IMAGE_HEIGHT_SMALL,
    }).start();
  };

  keyboardWillHide = (event) => {
    Animated.timing(this.imageHeight, {
      duration: event.duration,
      toValue: IMAGE_HEIGHT,
    }).start();
  };

  render() {
    return (
      
          
          
          
          
          
      
    );
  }
};

export default Demo;

Combo.js

Cada uma dessas implementações tem seus prós e contras – você terá que escolher a mais apropriada, de acordo com a experiência do usuário que deseja

Quer aprender mais sobre como usar o React Native para criar aplicações para dispositivos móveis de alta qualidade? Inscreva-se no curso de React Native gratuito do autor!

React Native - freeCodeCamp.org

Como integrar mapas no React Native usando react-native-maps

Etapa 1: instalar e configurar a aplicação do React Native

Etapa 2: adicionar e vincular o pacote react-native-maps

Etapa 3: configurar o Apple Maps (iOS)

Etapa 4: instalar o Cocoapods e o pacote "GoogleMaps" (iOS)

Etapa 5: obter a chave da api do Google Maps e executar a aplicação do iOS com o Google Maps

Etapa 6: vamos tentar no Android agora

Conclusão

Como estruturar seu projeto e gerenciar recursos estáticos no React Native

Tipo x recurso

Agrupar por tipo

Agrupar por recurso

O menor número de dependências possível

src

Screen

Usar ou não usar o index.js?

Navigator

library

Usando o package.json para evitar caminhos relativos

res

res/colors

res/strings

res/fonts

res/images

Agrupar cores, imagens e fontes com uma paleta

res/palette

Geração de imagens

Fontes personalizadas

O namespace R

O que mais podemos ver?

Componentes funcionais x componentes de classe no React Native

Componentes de classe

Componentes funcionais

Page One

Sumário

Mais informações sobre o estado do componente

Estado do componente

Mais informações sobre o React Native:

Como configurar o login do Google no React Native com Firebase

Por que usar um botão de login do Google em aplicações para dispositivos móveis?

Configurando o projeto do Firebase

Criando o projeto do React Native

Configurando os projetos nativos do iOS e do Android

Para iOS

Para Android

Configurando o Firebase

Para iOS

Para Android

Instalando o pacote do Firebase do React Native

Para iOS

Para Android

Módulo de autenticação do React Native Firebase

Para iOS

Para Android

Ativando o login do Google no Firebase

Rastreando o status do usuário

Logout do Firebase

Conclusão

Próximos passos

Como criar uma aplicação em React Native e integrá-la com Firebase

1. Criação de um projeto com o Firebase

2. Criação e configuração de uma aplicação em React Native

3. Configuração da estrutura de pastas, rotas e navegação

4. Implementação da interface

5. React Native com Firebase — registro

6. React Native com Firebase — login

7. Persistência de credenciais de login

8. Escrita e leitura de dados a partir do Firebase Firestore

Conclusão

Como fazer sua aplicação em React Native responder normalmente quando o teclado aparecer

KeyboardAvoidingView

Keyboard Aware ScrollView

Keyboard Module

Combinando opções

**O namespace R**