👋 Introdução

Neste post vamos mostrar como desenvolver um app no React Native para trabalhar com Mapas e Geolocalização.

Já falamos sobre a atualização do SDK 38 do Expo e como ele melhorou a criação de aplicativos com React Native.

Vamos usar o create-react-native-app para criar nossos projetos e obter os benefícios de ter as libs do expo com as unimodules.

📝 Pré-requisitos

Sempre queremos entregar a melhor experiência para nossa audiência.

Para uma melhor experiência com a leitura, você precisa entender o básico de:

Como fazer requisições à API;

React & React Native;

TypeScript

CSS in JS — estilização com React Native

🔰 Iniciando o Projeto

Instale o create-react-native-app ou utilize o npx, o mais recomendado no geral.

Para criar um projeto execute o comando:

npx create-react-native-app blog-react-native-maps

🚀 Configurando o TypeScript no projeto

Adicione as libs:

yarn add --dev typescript @types/jest @types/react @types/react-native @types/react-test-renderer

Crie o arquivo tsconfig.json na raiz do projeto:

{ "compilerOptions": { "allowJs": true, "allowSyntheticDefaultImports": true, "esModuleInterop": true, "isolatedModules": true, "jsx": "react", "lib": ["es6"], "moduleResolution": "node", "noEmit": true, "strict": true, "target": "esnext" }, "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"] }

Renomeie o arquivo App.js para App.tsx.

Isso porque todos os arquivos que você criar precisam ter essa extensão .tsx.