├── .env.example
├── .expo-shared
├── README.md
└── assets.json
├── .gitignore
├── @types
├── env.d.ts
└── navigation.d.ts
├── App.tsx
├── README.md
├── _prints
├── demo.gif
├── print01.jpeg
├── print02.jpeg
├── print03.jpeg
├── print04.jpeg
├── print05.jpeg
└── print06.jpeg
├── app.json
├── assets
├── adaptive-icon.png
├── favicon.png
├── icon.png
├── images
│ ├── marker.png
│ ├── marker@2x.png
│ ├── marker@3x.png
│ ├── markercircle.png
│ ├── markercircle@2x.png
│ └── markercircle@3x.png
├── login_background.png
└── splash.png
├── babel.config.js
├── package-lock.json
├── package.json
├── src
├── apis
│ └── index.ts
├── components
│ ├── Chip
│ │ └── index.tsx
│ ├── Divider
│ │ └── index.tsx
│ ├── LocationCard
│ │ └── index.tsx
│ ├── Map
│ │ └── index.js
│ ├── MapDirections
│ │ └── index.tsx
│ ├── NavFavourites
│ │ └── index.tsx
│ ├── NavOptions
│ │ └── index.tsx
│ ├── PlaceAutoComplete
│ │ └── index.tsx
│ ├── Separator
│ │ └── index.tsx
│ └── UberLogo
│ │ └── index.tsx
├── models
│ ├── Coordinates.ts
│ ├── Direction.ts
│ ├── MatrixDistance.ts
│ ├── Place.ts
│ ├── TravelTime.ts
│ └── User.ts
├── routes
│ ├── index.tsx
│ └── options.ts
├── screens
│ ├── EatsScreen.tsx
│ ├── HomeScreen.tsx
│ ├── LoginScreen.tsx
│ ├── MapScreen.tsx
│ ├── NavigateCardScreen.tsx
│ └── RideOptionsCardScreen.tsx
├── services
│ ├── DirectionsService.ts
│ ├── GeocodingService.ts
│ └── MatrixService.ts
├── stores
│ ├── DirectionsStore.ts
│ └── UserStore.ts
└── utils
│ ├── ellipsisText.ts
│ ├── pixelsSize.ts
│ └── timeCalculator.ts
└── tsconfig.json
/.env.example:
--------------------------------------------------------------------------------
1 | MAPBOX_APIKEY=pk.YOUR_MAPBOX_PUBLIC_KEY
--------------------------------------------------------------------------------
/.expo-shared/README.md:
--------------------------------------------------------------------------------
1 | > Why do I have a folder named ".expo-shared" in my project?
2 |
3 | The ".expo-shared" folder is created when running commands that produce state that is intended to be shared with all developers on the project. For example, "npx expo-optimize".
4 |
5 | > What does the "assets.json" file contain?
6 |
7 | The "assets.json" file describes the assets that have been optimized through "expo-optimize" and do not need to be processed again.
8 |
9 | > Should I commit the ".expo-shared" folder?
10 |
11 | Yes, you should share the ".expo-shared" folder with your collaborators.
12 |
--------------------------------------------------------------------------------
/.expo-shared/assets.json:
--------------------------------------------------------------------------------
1 | {}
2 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .expo/
3 | dist/
4 | npm-debug.*
5 | *.jks
6 | *.p8
7 | *.p12
8 | *.key
9 | *.mobileprovision
10 | *.orig.*
11 | .env
12 | web-build/
13 |
14 | # macOS
15 | .DS_Store
16 |
--------------------------------------------------------------------------------
/@types/env.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'react-native-dotenv' {
2 | export const MAPBOX_APIKEY: string;
3 | export const ENV: 'dev' | 'prod';
4 | }
--------------------------------------------------------------------------------
/@types/navigation.d.ts:
--------------------------------------------------------------------------------
1 | import { RootStackParamList } from '../src/routes';
2 |
3 | declare global {
4 | namespace ReactNavigation {
5 | interface RootParamList extends RootStackParamList {}
6 | }
7 | }
--------------------------------------------------------------------------------
/App.tsx:
--------------------------------------------------------------------------------
1 | import { StyleSheet, Text, View } from 'react-native';
2 | import { SafeAreaProvider } from 'react-native-safe-area-context';
3 | import { KeyboardAvoidingView, Platform } from 'react-native';
4 | import { Routes } from './src/routes';
5 |
6 | export default function App() {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 | );
14 | }
15 |
16 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Uber Clone TypeScript
2 | Clone da aplicação Uber utilizando as tecnologias:
3 |
4 | React Native | Tailwind | Zustand | Mapbox API | Maps | Navigation | Directions
5 |
6 | ## Destaques Implementados:
7 | - Zero custo para utilizar as API, direfente do Google Maps onde é necessário utilizar o cartão de crédito 0️⃣.
8 | - Tailwind com React Native 🍀.
9 | - Zustand para gerenciamento de estado das cooredenas de origem e destino 🐻.
10 | - Navegação entre rotas com React Navigation 🛣️.
11 | - Matrix API para calcular tempo de viagem e preço.
12 | - Directions API para traçar uma rota de ponto origem e destino.
13 | - Os locais de busca são de acordo com a localização atual do GPS do usuário 📍.
14 | - Técnica de debounce para buscar as rotas conforme o usuário digita.
15 | - Poline para desenhar a linha das rotas de origem e destino.
16 |
17 | ## Instalação
18 | 1) Instale o Expo ```npm install --global expo-cli```
19 | 2) Registre sua conta no ```Mapbox (é gratuito!)``` e copie a ```public key```;
20 | 2) Copie o .env.example para .env e cole sua chave pública do Mapbox;
21 | 3) Rode o comando ```npm install``` para instalar as dependências;
22 | 4) Execute o Expo com comando ```npm run start``` (certifique-se de ter o aplicativo do Expo instalado e os SDKs Android ou IOS);
23 |
24 |
25 | ## Images
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
36 |
37 |
38 |
39 |