Scribd
Upload
43 views41 pages

Presentation

The document outlines the steps to build an Airbnb clone app using React Native. It will cover setting up a React Native project, navigation, UI components, integrating maps and places autocomplete, and connecting the UI to backend services using AWS Amplify. The document lists the technologies and libraries that will be used, such as React Navigation, React Native Maps, and React Native Google Places Autocomplete. It also provides snippets of code for setting up the project and individual components.

Uploaded by

juan caceres
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
43 views41 pages

Presentation

The document outlines the steps to build an Airbnb clone app using React Native. It will cover setting up a React Native project, navigation, UI components, integrating maps and places autocomplete, and connecting the UI to backend services using AWS Amplify. The document lists the technologies and libraries that will be used, such as React Navigation, React Native Maps, and React Native Google Places Autocomplete. It also provides snippets of code for setting up the project and individual components.

Uploaded by

juan caceres
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 41

We are going to build

We are going to build


We are going to build
We are going to build
Navigation

- React Navigation v5
- Stack Navigation
- Tab Navigation
Front-end technologies
You will learn

- How to setup a React Native project


You will learn

- How to setup a React Native project


- Render built-in elements/components
You will learn

- How to setup a React Native project


- Render built-in elements/components
- Create your own components
You will learn

- How to setup a React Native project


- Render built-in elements/components
- Create your own components
- Functional components
You will learn

- How to setup a React Native project


- Render built-in elements/components
- Create your own components
- Functional components
- Props
You will learn

- How to setup a React Native project


- Render built-in elements/components
- Create your own components
- Functional components
- Props
- State
You will learn

- How to setup a React Native project


- Render built-in elements/components
- Create your own components
- Functional components
- Props
- State
- Navigation
Who am I

- Full stack developer for >7yrs


- CTO @Fitenium
- ex Amazon SDE
- Passionate about coding and building
impactful startups.
Let’s get started

Initialise the expo project:


$ npx react-native init Airbnb
Run the development server
$ yarn start
Run the app on iOS

$ yarn iOS
Run the app on android
$ yarn android
Vector icons

Install vector icons


$ yarn add react-native-vector-icons
IOS: Add UIAppFonts to Info.plist

Android: Add to the android/app/build.gradle


apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Install pods (iOS only)


$npx pod-install iOS
Home Screen

- Search button
- Background Image
- Page title
- Explore button
Post Component

The component that will display a single


item in the list
Post Component Props

Get data from Props to make the


component reusable
List of posts

Display posts in a FlatList


Location Search Page
Guests Page
Guests Page: State

Use state to store the values of the fields


Navigation

Install React-Navigation Library:

$ yarn add @react-navigation/native @react-navigation/bottom-


tabs @react-navigation/stack
Installing Dependecies

$ yarn add react-native-reanimated react-native-gesture-


handler react-native-screens react-native-safe-area-context
@react-native-community/masked-view
Install the pods (for Mac and IOS only)

$ npx pod-install ios


Import Gesture handler

Import ‘react-native-gesture-handler’
DEMO
Q&A
Advanced UI
We are going to build

Places autocomplete
Powered by google
We are going to build

Places autocomplete Maps View


Powered by google With custom markers
We are going to build

Places autocomplete Maps View Carousel List


Powered by google With custom markers Connected with the map
DEMO
Who am I

- Full stack developer for >7yrs


- CTO @Fitenium
- ex Amazon SDE
- Passionate about coding and building
impactful startups.
Finish Navigation

1. Stack Navigator for the Explore Tab


2. Tab bar navigator for the Search Result Page

$ yarn add @react-navigation/material-top-tabs react-native-tab-view


Places Autocomplete

Library: React Native Google Places Autocomplete

https://www.npmjs.com/package/react-native-google-places-
autocomplete

1. install library
2. Enable google API
3. Make sure billing is enabled
4. Get API Key
Maps

Library: React Native Maps


https://www.npmjs.com/package/react-native-maps

1. install library
2. Enable google API
3. Make sure billing is enabled
4. Get API Key
Place Carousel Item component
Carousel Flatlist

1. Render the Flatlist


2. Snap Effect (Carousel)
3. Sync with the Map
DEMO
Next week
Back end integration using AWS Amplify
Authentication, GraphQL API, Storage and more
Q&A

You might also like