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
