Taxi App in React Native

Name: Taxi App in React Native
Rating: 4.4 (172 reviews)

Make a basic taxi app in React Native!

Created byStefan Hyltoft

Last updated 4/2020

English

What you'll learn

How to get device location in React Native
How to make a passenger app and driver communicate via. Sockets
How to install react-native-maps for both iOS and Android
How to use Google Maps Places API for places autosuggestions
How to use Google Maps Routes API for route directions
How to draw polyline directions on the map
How to send drivers location in background to passenger app
How to create JWT authentication with Nodejs
How to create a simple Socket-io backend

Course content

4 sections • 19 lectures • 7h 47m total length

Why build a chat app - I thought we're making a taxi app?0:20
If you have this issue...0:51
Building a simple chat app in React Native and Socket.io30:48
Build a simple chat app in React Native using Socket.IO to push messages in real time and learn web sockets and client-server communication.
Nice job!0:11

Installing react-native-maps on Android13:02
Install and configure react-native-maps on Android for a taxi app, including manual linking, Gradle configuration, Android manifest API key, and building and testing the map view.
Getting location in React Native7:19
Learn to obtain the device location in React Native on Android by updating the manifest for location permission, then call navigator.geolocation.getCurrentPosition to set latitude and longitude.
Installing react-native-maps on iOS17:49
Install and configure react-native-maps on iOS using Apple Maps, compare performance with Google Maps on the iOS simulator, and display a marker for the current location with navigator.getCurrentPosition.

Using Places Autocomplete API20:47
Master Google Places autocomplete API in a React Native taxi app to show location suggestions on a map, secure an API key with radius, and debounce requests with Lodash.
Using Google Directions API and drawing route27:20
Learn to fetch routes with the Google Directions API, convert the overview polyline to coordinates, and render a dynamic route with a polyline and marker in a React Native map.

Backend starting point0:29
Requesting a ride from passenger to taxi49:35
Demonstrates connecting a passenger to a driver via a socket.io backend, transmitting passenger location, and using Google directions to route in a React Native taxi app.
Sending location in background1:09:23
Learn to send the driver's location in real time from the driver app to the passenger app, including background location updates, socket communication, and live map updates.
Creating mock route and loading mock route in simulator20:57
Fixes include switching from get current position to watch position, updating latitude and longitude, using initial region, and loading GPX/cheapX mock routes into Android and iOS simulators.
Using Higher Order Components46:43
Refactor shared get round directions and watch position into a higher order component, lifting state to a generic container for passenger and driver.
Creating a REST API for login with Nodejs Express27:58
Build a REST API backend with Node.js and Express to manage users in MongoDB via Mongoose, exposing get /user and post /users endpoints.
Express Router & Controller for User creation30:19
Refactor a node express API by modularizing config, routes, and controllers, centralize the MongoDB connection string, and secure user creation with bcrypt password hashing and login.
Creating and using JWT for authentication in Nodejs Express26:53
Implement jwt authentication in a node.js express API by issuing a server-generated token on login and using it in the authorization header for protected requests.
Creating Login form in React Native50:31
Learn to build a login and sign-up flow in a React Native taxi app by consuming a REST API with JWT authentication, handling errors, and auto-signing in after account creation.
Passenger/Driver selection screen and token state26:05
Learn to authenticate users with a token, lift it to a parent, then route to driver or passenger screens, sharing the token for API requests.

Requirements

Basic JavaScript ES6
Basic knowledge of React Native

Description

Please note that this is not a "full taxi app", it's definitely lacks some functionality before you can either sell it or deploy it to a app store. It doesn't have any fare monitoring or payment functionality. I see this sort of a "early access" version of the course, and I intend on updating it based on my students requests in the future. First of all, I'm excited to see how my students take in the hours of content there already is.

That being said, I hope you will enjoy this course, and if you have any questions or request, don't hesitate to message me or use Udemy's Q&A. Thank you!

Hello and welcome to my little course!

In this course you will learn how to make a very basic taxi app in React Native. You will learn how to make a side both for the driver and passenger, and how to make the two devices communicate with each other.

You'll learn how to install and use react-native-maps, how to use Google Maps API's to get places suggestions and routes.

You'll learn how to send a request from a passenger to a driver, and updating the passenger with the driver location.

Who this course is for:

Developers familiar with React who wants to get a headstart at making a taxi app

Taxi App in React Native

What you'll learn

Explore related topics

Course content

Introduction to Socket.io - building a simple chat app in 30 mins4 lectures • 32min

Installing react-native-maps3 lectures • 38min

Using Google Maps API's2 lectures • 48min

Taxi App and Socket.io10 lectures • 5hr 49min

Requirements

Description

Who this course is for: