Complete React Native: Zero to Mastery
Course Guide + Code
For more courses, resources and workshop, visit https//zerotomastery.io
Building With React Native: FocusTime App
So we’re finally going to get coding! In the following section you will learn how to make expo
snacks and build your very first React Native App. The purpose of this section is to show-case
how to utilize expo snacks and to get familiar with some of the React Native Syntax.
This section is code-along and assumes prior knowledge, understanding and familiarity with
React and Javascript. Make sure you are comfortable with both at a good level.
In this section you will follow along as we code the FocusTime application, this section focuses
less on granular understanding and more on creating your very first application. In this section I
take the approach of build-first.
The purpose of taking this approach is to show the student a real-world scenario, think of it like
pair-programming. First we will build all of the features, after that we will address any linting
issues and errors that may be there.
If you find yourself struggling with the concepts or speed you may need a bit more practice and
experience. In that case try out our React course or Complete Web-developer course!
Introduction to Expo
- Expo https//expo.io/
- Register Your Account https//expo.io/signup
Getting Ready To Hit The Ground Running!
- Register Your Account https//expo.io/signup
- Make a Snack https//snack.expo.io
- What Is A Snack? https//github.com/expo/snack
- FocusTime Demo https//snack.expo.io/@mobinni/focustime-demo
How To Avoid The Notch
- Solution Changes: https://github.com/mobinni/FocusTime/pull/2/files
- Solution Code: https://github.com/mobinni/FocusTime/tree/2.0-avoid-notch
- SafeAreaView: https://reactnative.dev/docs/safeareaview
How To Avoid The StatusBar
- Solution Changes: https://github.com/mobinni/FocusTime/pull/3/files
- Solution Code: https://github.com/mobinni/FocusTime/tree/2.1-avoid-statusbar
- StatusBar: https://reactnative.dev/docs/statusbar
- Platform: https://reactnative.dev/docs/platform
Styling The Background
- Solution Changes: https://github.com/mobinni/FocusTime/pull/4/files
- Solution Code: https://github.com/mobinni/FocusTime/tree/2.2-styling-background
Setting Up Our Focus Feature
- Solution Changes: https://github.com/mobinni/FocusTime/pull/5
- Solution Code: https://github.com/mobinni/FocusTime/tree/2.3-setup-focus-feature
Adding Text Input
- Solution Changes: https://github.com/mobinni/FocusTime/pull/6/files
- Solution Code: https://github.com/mobinni/FocusTime/tree/2.4-text-input
- TextInput: https://callstack.github.io/react-native-paper/text-input.html
Storing A Subject
- Solution Changes: https://github.com/mobinni/FocusTime/pull/7
- Solution Code: https://github.com/mobinni/FocusTime/tree/2.5-storing-subject
- useState: https://reactjs.org/docs/hooks-state.html
Adding A Button
- Rounded Button: https://github.com/mobinni/FocusTime/pull/8/files
- Solution Changes: https://github.com/mobinni/FocusTime/pull/9/files
- Solution Code: https://github.com/mobinni/FocusTime/tree/2.6-adding-a-button
Making The App Reactive
- Solution Changes: https://github.com/mobinni/FocusTime/pull/10/files
- Solution Code: https://github.com/mobinni/FocusTime/tree/2.7
Cleaning Up Spacing
- Solution Changes: https://github.com/mobinni/FocusTime/pull/11/files
- Solution Code: https://github.com/mobinni/FocusTime/tree/2.8
Adding A Countdown Component
- Solution Changes: https://github.com/mobinni/FocusTime/pull/12/files
- Solution Code: https://github.com/mobinni/FocusTime/tree/countdown
Adding The Timer Feature
- Solution Changes: https://github.com/mobinni/FocusTime/pull/13/files
- Solution Code: https://github.com/mobinni/FocusTime/tree/3.0
Hooking Up Our Countdown
- Solution Changes: https://github.com/mobinni/FocusTime/pull/14/files
- Solution Code: https://github.com/mobinni/FocusTime/tree/3.1
Adding The Focus Subject
- Solution Changes: https://github.com/mobinni/FocusTime/pull/15/files
- Solution Code: https://github.com/mobinni/FocusTime/tree/3.2
Hooking Up The Progress Bar
- Solution Changes: https://github.com/mobinni/FocusTime/pull/16/files
- Solution Code: https://github.com/mobinni/FocusTime/tree/3.3
Vibrating When The Timer Ends
- Solution Changes: https://github.com/mobinni/FocusTime/pull/17/files
- Solution Code: https://github.com/mobinni/FocusTime/tree/3.4
Adding Timer Controls
- Solution Changes: https://github.com/mobinni/FocusTime/pull/18/files
- Solution Code: https://github.com/mobinni/FocusTime/tree/3.5
Resetting The Timer
- Solution Changes: https://github.com/mobinni/FocusTime/pull/19/files
- Solution Code: https://github.com/mobinni/FocusTime/tree/3.6
Keeping The App Awake
- Solution Changes: https://github.com/mobinni/FocusTime/pull/20/files
- Solution Code: https://github.com/mobinni/FocusTime/tree/3.7
Focus History Feature Setup
- Solution Changes: https://github.com/mobinni/FocusTime/pull/21/files
- Solution Code: https://github.com/mobinni/FocusTime/tree/3.8
Designing Our Focus List
- Solution Changes: https://github.com/mobinni/FocusTime/pull/22/files
- Solution Code: https://github.com/mobinni/FocusTime/tree/3.9
Populating The Focus History
- Solution Changes: https://github.com/mobinni/FocusTime/pull/23/files
- Solution Code: https://github.com/mobinni/FocusTime/tree/4.0
Mobile Development Professional Local Setup
MAC Installing GIT
- Git Simplified https//thenewstack.io/tutorial-git-for-absolutely-everyone/
MAC Installing Node And Yarn
- NodeJS https//nodejs.org/en/
- Yarn https//yarnpkg.com/
MAC Installing Android Studio
- Android Studio https//developer.android.com/studio
MAC Installing VSCode
- VSCode https//code.visualstudio.com/download
WINDOWS Installing GIT And VSCode
- VSCode https//code.visualstudio.com/download
- GIT https//git-scm.com/
WINDOWS Installing Android Studio
- Android Studio https//developer.android.com/studio
WINDOWS Installing Node and Yarn
- NodeJS https//nodejs.org/en/
- Yarn https//yarnpkg.com/
What If I'm Still Running Into Issues?
- Expo Repository https//github.com/expo/expo/issues
Master Project: MealsToGo
In this section we start building our master project! Don’t worry the pace slows down, as now
we’ll be focusing on building out more complex UI and state management!
In this section you will find that we utilize React Context as the state management of choice, this
is not because Redux is bad, rather we want to have the course focus as much as possible on
how to utilize React Native to build the UI’s that you’ll love!
Another thing to note is that along the way you will find places where Android will break!
Don’t panic! This is completely normal. Along the way (usually the following video) we
address why it’s breaking and what exactly is happening!
React Native is a tricky subject to learn and it can be daunting and difficult to master, if you
apply yourself to the material and take things slow you will be successful!
Time For Yoga!
- Yoga https//yogalayout.com/
Let's Do Some Yoga!
- Yoga Playground https//yogalayout.com/playground
Exercise App Layout
- SafeAreaView https//reactnative.dev/docs/safeareaview
- View https//reactnative.dev/docs/view
- Flex https//reactnative.dev/docs/flexbox#flex
Solution App Layout
- Solution Repo https//github.com/mobinni/MealsToGo/tree/1-app-layout
- Solution Changes https//github.com/mobinni/MealsToGo/pull/1/files
Android StatusBar Issue
- StatusBar https//reactnative.dev/docs/statusbar
Keeping Up With The Code Step By Step
- Solution Repo https//github.com/mobinni/MealsToGo/tree/1-app-layout
- Solution Changes https//github.com/mobinni/MealsToGo/pull/1/files
Using Eslint
- Solution Repo https//github.com/mobinni/MealsToGo/tree/2-eslint-config
- Solution Changes https//github.com/mobinni/MealsToGo/pull/2/files
Optimizing Eslint
- Solution Repo https//github.com/mobinni/MealsToGo/tree/2-eslint-config
- Solution Changes https//github.com/mobinni/MealsToGo/pull/2/files
Setting Up Prettier
- Solution Repo https//github.com/mobinni/MealsToGo/tree/2-eslint-config
- Solution Changes https//github.com/mobinni/MealsToGo/pull/2/files
Exercise SearchBar
- Searchbar https//callstack.github.io/react-native-paper/searchbar.html
Solution SearchBar
- Solution Repo https//github.com/mobinni/MealsToGo/tree/3-paper-searchbar
- Solution Changes https//github.com/mobinni/MealsToGo/pull/3/files
Restaurant Info Setup Part 1
- Solution Repo https//github.com/mobinni/MealsToGo/tree/5-feature-setup-restaurant-info
- Solution Changes https//github.com/mobinni/MealsToGo/pull/4/files
Restaurant Info Setup Part 2
- Solution Repo
https//github.com/mobinni/MealsToGo/tree/5-feature-setup-restaurant-info-part-2
- Solution Changes https//github.com/mobinni/MealsToGo/pull/5/files
Exercise Restaurant Info Card
- Card https//callstack.github.io/react-native-paper/card.html
- Food Photo
https//www.foodiesfeed.com/wp-content/uploads/2019/06/top-view-for-box-of-2-burgers-
home-made-600x899.jpg
Solution Restaurant Info Card
- Solution Repo https//github.com/mobinni/MealsToGo/tree/6-restaurant-info-card
- Solution Changes https//github.com/mobinni/MealsToGo/pull/6/files
Reflection Time Restaurant Info
- Solution Repo https//github.com/mobinni/MealsToGo/tree/6-restaurant-info-card
- Solution Changes https//github.com/mobinni/MealsToGo/pull/6/files
The Way We Are Styling Feels Wrong
- Styled Components https//styled-components.com/docs/basics#react-native
Trying Out Styled Components
- Test it out https//snack.expo.io/tvbTkkv-N
Installing And Using Styled Component
- Solution Repo https//github.com/mobinni/MealsToGo/tree/7-styled-components
- Solution Changes https//github.com/mobinni/MealsToGo/pull/7/files
Solution Migrating To Styled Components
- Solution Repo https//github.com/mobinni/MealsToGo/tree/8-migrating-styled-components
- Solution Changes https//github.com/mobinni/MealsToGo/pull/8/files
- css-to-react-native https//github.com/styled-components/css-to-react-native
Uhoh We Have An IOS Error
- Solution Repo https//github.com/mobinni/MealsToGo/tree/11-ios-error
- Solution Changes https//github.com/mobinni/MealsToGo/pull/11/files
How Do We Make Things Consistent?
- Theme https//styled-components.com/docs/advanced
- Context https//reactjs.org/docs/context.html
Setting Up Our Theme
- Our theme https//github.com/mobinni/MealsToGo/pull/9/files
Theme Code https//github.com/mobinni/MealsToGo/tree/9-theme
Solution Theme Cleanup
- Solution Repo https//github.com/mobinni/MealsToGo/tree/10-theme-cleanup
- Solution Changes https//github.com/mobinni/MealsToGo/pull/10/files
Loading Custom Fonts
- Expo Google Fonts https//github.com/expo/google-fonts
- Lato https//fonts.google.com/specimen/Lato?query=lato
- Oswald https//fonts.google.com/specimen/Oswald
- Solution Repo https//github.com/mobinni/MealsToGo/tree/12-custom-fonts
- Solution Changes https//github.com/mobinni/MealsToGo/pull/12/files
Adding The Address
- Solution Repo https//github.com/mobinni/MealsToGo/tree/13-address
- Solution Changes https//github.com/mobinni/MealsToGo/pull/13/files
Using SVG With Rating
- SVG Star
https//github.com/mobinni/MealsToGo/blob/194708f4b5078112dfa48dc7e12fea6bc623ad
03/assets/star.js
- Solution Repo https//github.com/mobinni/MealsToGo/tree/14-rating
- Solution Changes https//github.com/mobinni/MealsToGo/pull/14/files
Exercise Adding Open Now SVG
- SVG Open
https//github.com/mobinni/MealsToGo/blob/17a94a3cfb5fdf7388d46450e49a391318b5c
032/assets/open.js
Solution Finishing Our Restaurant Card
- Solution Repo https//github.com/mobinni/MealsToGo/tree/15-finishing-card
- Solution Changes https//github.com/mobinni/MealsToGo/pull/15/files
Building a Spacer Component
- Solution Repo https//github.com/mobinni/MealsToGo/tree/16-spacer-component
- Solution Changes https//github.com/mobinni/MealsToGo/pull/16/files
Optimizing The Spacer Component
- Solution Repo https//github.com/mobinni/MealsToGo/tree/17-spacer-optimization
- Solution Changeshttps//github.com/mobinni/MealsToGo/pull/21/files
Wait A Second It Won't Render On Android
- Solution Repo
https//github.com/mobinni/MealsToGo/tree/17-spacer-optimization-android
- Solution Changeshttps//github.com/mobinni/MealsToGo/pull/58/files
Creating A Typography Component And Cleanup
- Solution Repo https//github.com/mobinni/MealsToGo/tree/18-typography-text
- Solution Changeshttps//github.com/mobinni/MealsToGo/pull/22/files
Solution Code Cleanup
- Solution Repo https//github.com/mobinni/MealsToGo/tree/19-cleanup
- Solution Changeshttps//github.com/mobinni/MealsToGo/pull/23/files
List it!
- Lists and Keys https//reactjs.org/docs/lists-and-keys.html
- FlatList https//reactnative.dev/docs/flatlist
- ScrollView https//reactnative.dev/docs/scrollview
- Solution Repo https//github.com/mobinni/MealsToGo/tree/20-flatlist
- Solution Changes https//github.com/mobinni/MealsToGo/pull/24/files
No Inline Styles!
- Solution Repo https//github.com/mobinni/MealsToGo/tree/21-flatlist-style
- Solution Changes https//github.com/mobinni/MealsToGo/pull/25/files
Navigation Installation
- Navigation Docs https//reactnavigation.org/docs/getting-started
- Demo App https//expo.io/@react-navigation/projects/react-navigation-example
- Demo App Code https//github.com/react-navigation/react-navigation/tree/main/example
- Solution Changes https//github.com/mobinni/MealsToGo/pull/26/files
- Solution Repo https//github.com/mobinni/MealsToGo/tree/22-navigation-installation
Exercise Tab Navigation
- Tab Navigation Snack Expo Snack
- Tab Navigation Docs https//reactnavigation.org/docs/tab-based-navigation
- Solution Changes https//github.com/mobinni/MealsToGo/pull/27/files
- Solution Repo https//github.com/mobinni/MealsToGo/tree/23-tab-navigation
Solution Tab Navigation
- Solution Changes https//github.com/mobinni/MealsToGo/pull/28/files
- Solution Repo https//github.com/mobinni/MealsToGo/tree/24-tab-navigation-setup
Exercise Tab Bar Icons
- Tab Bar Icons Example https//reactnavigation.org/docs/tab-based-navigation
Vector Icon Options https//icons.expo.fyi/
Vector Icon Documentation https//docs.expo.io/guides/icons/#expovector-icons
Solution Tab Bar Icons
- Solution Changes https//github.com/mobinni/MealsToGo/pull/29/files
Solution Repo https//github.com/mobinni/MealsToGo/tree/25-tab-icons
Simplifying Tab Icon Logic
- Solution Changes https//github.com/mobinni/MealsToGo/pull/30/files
- Solution Repo https//github.com/mobinni/MealsToGo/tree/26-tab-icon-simplified
Feature Overview: Adding Data!
- React Context https//reactjs.org/docs/context.html
- Solution Changes https//github.com/mobinni/MealsToGo/pull/31/files
Solution Repo https//github.com/mobinni/MealsToGo/tree/27-restaurant-data
- Data See video resources for data file
Fake An API Request
- Solution Changes https//github.com/mobinni/MealsToGo/pull/32/files
- Solution Repo https//github.com/mobinni/MealsToGo/tree/28-fake-api-request
Let's Transform The Data!
- Camelize https//www.npmjs.com/package/camelize
- Solution Changes https//github.com/mobinni/MealsToGo/pull/33/files
- Solution Repo https//github.com/mobinni/MealsToGo/tree/29-transform-response
Let's Transform The Data Part 2
- Solution Repo https//github.com/mobinni/MealsToGo/tree/29-transform-response-2
- Solution Changes https//github.com/mobinni/MealsToGo/pull/34/files
Setting Up RestaurantContext
- Solution Repo https//github.com/mobinni/MealsToGo/tree/30-restaurant-context-part-1
- Solution Changes https//github.com/mobinni/MealsToGo/pull/35/files
Hooking Up Our Context
- Solution Repo https//github.com/mobinni/MealsToGo/tree/30-restaurant-context-part-2
- Solution Changes https//github.com/mobinni/MealsToGo/pull/36/files
Exercise Activity Indicator
- Activity Indicator https//callstack.github.io/react-native-paper/activity-indicator.html
Solution Activity Indicator
- Solution Repo https//github.com/mobinni/MealsToGo/tree/31-activity-indicator
- Solution Changes https//github.com/mobinni/MealsToGo/pull/37/files
Setting Up Our Geocoding Service
- Solution Repo https//github.com/mobinni/MealsToGo/tree/32-search
- Solution Changes https//github.com/mobinni/MealsToGo/pull/40/files
Setting Up Our Geocoding Context
- Solution Repo https//github.com/mobinni/MealsToGo/tree/32-search-context
- Solution Changes https//github.com/mobinni/MealsToGo/pull/41/files
Hooking Up The Searchbar
- Solution Repo https//github.com/mobinni/MealsToGo/tree/33-searchbar
- Solution Changes https//github.com/mobinni/MealsToGo/pull/42/files
Searching For Restaurants
- Solution Repo https//github.com/mobinni/MealsToGo/tree/34-restaurant-search
- Solution Changes https//github.com/mobinni/MealsToGo/pull/43/files
Oh No A Bug Solution!
- Solution Repo https//github.com/mobinni/MealsToGo/tree/35-restaurant-bug
- Solution Changes https//github.com/mobinni/MealsToGo/pull/44/files
Key Warnings
- Key Warnings https//reactjs.org/docs/lists-and-keys.html
- Solution Repo https//github.com/mobinni/MealsToGo/tree/39-key-warning
- Solution Changes https//github.com/mobinni/MealsToGo/pull/48/files
Oh No An Anti-Pattern
- Solution Repo https//github.com/mobinni/MealsToGo/tree/41-anti-pattern
- Solution Changes https//github.com/mobinni/MealsToGo/pull/51/files
Building Navigation Infrastructure For Scale
Solution Repo https//github.com/mobinni/MealsToGo/tree/36-navigation-infrastructure
Solution Changes https//github.com/mobinni/MealsToGo/pull/45/files
Restructuring Navigation
Solution Repo https//github.com/mobinni/MealsToGo/tree/37-restructuring-navigation
Solution Changes https//github.com/mobinni/MealsToGo/pull/46/files
Setting Up Stack Navigation
Solution Repo https//github.com/mobinni/MealsToGo/tree/38-stack-navigation
Solution Changes https//github.com/mobinni/MealsToGo/pull/47/files
Setting Up Restaurant Detail Navigation
- Stack Navigator https//reactnavigation.org/docs/hello-react-navigation
- Pressable API https//reactnative.dev/docs/pressable
- Solution Repo https//github.com/mobinni/MealsToGo/tree/40-restaurant-detail-navigation
- Solution Changes https//github.com/mobinni/MealsToGo/pull/49/files
Modals And Touch Feedback
- TouchableOpacity https//reactnative.dev/docs/touchableopacity
- Solution Repo
https//github.com/mobinni/MealsToGo/tree/40-restaurant-detail-navigation-2
- Solution Changes https//github.com/mobinni/MealsToGo/pull/50/files
Exercise Rendering The Card
- Route Parameters https//reactnavigation.org/docs/params
Solution Rendering The Card
- Solution Repo https//github.com/mobinni/MealsToGo/tree/42-detail-sreen-card
- Solution Changes https//github.com/mobinni/MealsToGo/pull/56/files
Exercise Menu List
- List Accordion https//callstack.github.io/react-native-paper/list-accordion.html
Solution Menu List
- Solution Repo https//github.com/mobinni/MealsToGo/tree/43-detail-sreen-complete
- Solution Changes https//github.com/mobinni/MealsToGo/pull/57/files
Installing React Native Maps
- Expo MapView https//docs.expo.io/versions/latest/sdk/map-view/
- Solution Repo https//github.com/mobinni/MealsToGo/tree/44-react-native-maps
- Solution Changes https//github.com/mobinni/MealsToGo/pull/59/files
Map Screen And Search
- Solution Repo https//github.com/mobinni/MealsToGo/tree/45-map-screen-and-search
- Solution Changes https//github.com/mobinni/MealsToGo/pull/60/files
Setting The Map Region
- Solution Repo https//github.com/mobinni/MealsToGo/tree/46-map-region
- Solution Changes https//github.com/mobinni/MealsToGo/pull/61/files
Rendering Map Markers
- Solution Repo https//github.com/mobinni/MealsToGo/tree/47-map-markers
- Solution Changes https//github.com/mobinni/MealsToGo/pull/62/files
Custom Map Callout Exercise
- Solution Repo https//github.com/mobinni/MealsToGo/tree/48-map-callout
- Solution Changes https//github.com/mobinni/MealsToGo/pull/63/files
Custom Map Callout Solution
- Solution Repo https//github.com/mobinni/MealsToGo/tree/49-map-callout-solution
- Solution Changes https//github.com/mobinni/MealsToGo/pull/64/files
- Expo WebView https//docs.expo.io/versions/latest/sdk/webview/
Linking A Callout To Details
- Solution Repo https//github.com/mobinni/MealsToGo/tree/50-map-callout-details
- Solution Changes https//github.com/mobinni/MealsToGo/pull/65/files
Favourites Context
- Async Storage https//react-native-async-storage.github.io/async-storage/docs/usage/
- Solution Repo https//github.com/mobinni/MealsToGo/tree/51-favourites-service
- Solution Changes https//github.com/mobinni/MealsToGo/pull/68/files
Hooking Up Favourites Part 1
- Solution Repo https//github.com/mobinni/MealsToGo/tree/52-favourites-part-1
- Solution Changes https//github.com/mobinni/MealsToGo/pull/69/files
Hooking Up Favourites Part 2
- Solution Repo https//github.com/mobinni/MealsToGo/tree/52-favourites-part-2
- Solution Changes https//github.com/mobinni/MealsToGo/pull/70/files
Building A Favourites Bar Part 1
- Solution Repo https//github.com/mobinni/MealsToGo/tree/53-favourites-bar-part-1
- Solution Changes https//github.com/mobinni/MealsToGo/pull/71/files
Building A Favourites Bar Part 2
- Solution Repo https//github.com/mobinni/MealsToGo/tree/53-favourites-bar-part-2
- Solution Changes https//github.com/mobinni/MealsToGo/pull/72/files
Storing Favourites
- Solution Repo https//github.com/mobinni/MealsToGo/tree/54-storing-favourites
- Solution Changes https//github.com/mobinni/MealsToGo/pull/73/files
Uh Oh An Android Bug
- Solution Repo
https//github.com/mobinni/MealsToGo/tree/54-storing-favourites-android-bug
- Solution Changes https//github.com/mobinni/MealsToGo/pull/74/files
Feature Overview Firebase And Authentication
- Firebase https://firebase.google.com/
-
Firebase Installation
- Firebase Expo https//docs.expo.io/guides/using-firebase/
- Solution Repo https//github.com/mobinni/MealsToGo/tree/55-firebase-installation
- Solution Changes https//github.com/mobinni/MealsToGo/pull/75/files
Let's Test Authentication
- Solution Repo https//github.com/mobinni/MealsToGo/tree/56-authentication-test
- Solution Changes https//github.com/mobinni/MealsToGo/pull/76/files
Authentication Service And Context
- Solution Repo
https//github.com/mobinni/MealsToGo/tree/57-authentication-service-context
- Solution Changes https//github.com/mobinni/MealsToGo/pull/77/files
Account And Authentication Navigation
- Solution Repo https//github.com/mobinni/MealsToGo/tree/58-authentication-navigation
- Solution Changes https//github.com/mobinni/MealsToGo/pull/78/files
Image Background Exercise
- Solution Repo
https//github.com/mobinni/MealsToGo/tree/59-image-background-exercise
- Solution Changes https//github.com/mobinni/MealsToGo/pull/79/files
- Background Image Download from resources home_bg
Image Background Solution
- Solution Repo https//github.com/mobinni/MealsToGo/tree/59-image-background-solution
- Solution Changes https//github.com/mobinni/MealsToGo/pull/80/files
Lighten Up The Background
- Solution Repo https//github.com/mobinni/MealsToGo/tree/60-lighten-up-background
- Solution Changes https//github.com/mobinni/MealsToGo/pull/82/files
Account Screen Buttons
- Solution Repo https//github.com/mobinni/MealsToGo/tree/61-account-button
- Solution Changes https//github.com/mobinni/MealsToGo/pull/81/files
Exercise Login Screen
- Solution Repo https//github.com/mobinni/MealsToGo/tree/62-login-screen-exercise
- Solution Changes https//github.com/mobinni/MealsToGo/pull/83/files
Solution Login Screen
- Solution Repo https//github.com/mobinni/MealsToGo/tree/62-login-screen-solution
- Solution Changes https//github.com/mobinni/MealsToGo/pull/84/files
Tying Up Some Loose Ends
- Solution Repo https//github.com/mobinni/MealsToGo/tree/63-loose-ends
- Solution Changes https//github.com/mobinni/MealsToGo/pull/85/files
Feature Overview: Registration
- Solution Repo https//github.com/mobinni/MealsToGo/tree/64-registration
- Solution Changes https//github.com/mobinni/MealsToGo/pull/86/files
Activity Indicators
- Solution Repo https//github.com/mobinni/MealsToGo/tree/65-activity-indicators
- Solution Changes https//github.com/mobinni/MealsToGo/pull/87/files
Favourites Is Broken Part 1
- Solution Repo https//github.com/mobinni/MealsToGo/tree/66-favourites-multiuser-part-1
- Solution Changes https//github.com/mobinni/MealsToGo/pull/89/files
Favourites Is Broken Part 2
- Solution Repo https//github.com/mobinni/MealsToGo/tree/66-favourites-multiuser-part-2
- Solution Changes https//github.com/mobinni/MealsToGo/pull/90/files
Adding A Watermelon Animation
- Solution Repo https//github.com/mobinni/MealsToGo/tree/67-watermelon-animation
- Solution Changes https//github.com/mobinni/MealsToGo/pull/91/files
Building The Settings Feature Part 2
- Solution Repo https//github.com/mobinni/MealsToGo/tree/68-settings-feature
- Solution Changes https//github.com/mobinni/MealsToGo/pull/92/files
Making The Settings Screen Look Nice
- Solution Repo https//github.com/mobinni/MealsToGo/tree/69-settings-feature-part-2
- Solution Changes https//github.com/mobinni/MealsToGo/pull/93/files
Favourites Screen Exercise
- Solution Repo https//github.com/mobinni/MealsToGo/tree/70-favourites-screen
- Solution Changes https//github.com/mobinni/MealsToGo/pull/94/files
Favourites Screen Solution
- Solution Repo https//github.com/mobinni/MealsToGo/tree/70-favourites-screen-solution
- Solution Changes https//github.com/mobinni/MealsToGo/pull/95/files
Animations And Polish
- Animations https//reactnative.dev/docs/animations
- Solution Repo https//github.com/mobinni/MealsToGo/tree/71-fade-animation
- Solution Changes https//github.com/mobinni/MealsToGo/pull/96/files
App Icons
- Solution Repo https//github.com/mobinni/MealsToGo/tree/72-icons
- Solution Changes https//github.com/mobinni/MealsToGo/pull/97/files
- Icons are available on the video resources
Expo Publish
- Expo Publish https//docs.expo.io/workflow/publishing/
Bonus: Mobile Camera Module
Setting Up The Infrastructure
- Expo Camera: https://docs.expo.io/versions/latest/sdk/camera/
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/bonus-camera-1
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/113
Exercise Expo Camera
- Expo Camera: https://docs.expo.io/versions/latest/sdk/camera/
Solution Expo Camera
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/bonus-camera-2
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/114
Taking A Picture
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/bonus-camera-3
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/115
Storing And Retrieving The Picture
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/bonus-camera-4
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/116
Bonus: Google Maps Integration
Important Note On This Section!
- Firebase pricing: https://firebase.google.com/pricing
- Google Places Pricing: https://developers.google.com/places/web-service/usage-and-billing
- Geocoding Pricing:
https://developers.google.com/maps/documentation/geocoding/usage-and-billing
Setting Up Your Payment Information For Firebase
- Billing Accounts: https://console.cloud.google.com/billing
Setting Up Firebase CLI
- Get Started: https://firebase.google.com/docs/functions/get-started
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/fb-google-integration-1
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/99/files
Running Firebase Functions Locally
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/fb-google-integration-2
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/100/files
Moving Location Mock Part 1
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/fb-google-integration-3
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/101/files
Moving Location Mock Part 2
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/fb-google-integration-4
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/102/files
Moving Restaurants Mock
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/fb-google-integration-5
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/103/files
Switching Between Local And Deployed Functions
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/fb-google-integration-6
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/104/files
A Cautionary Tale
- Google Maps Article: https://joemorrison.substack.com/p/google-maps-moat-is-evaporating
Setting Up Google Node SDK
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/fb-google-integration-7
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/105/files
Firebase Environment
- Firebase environment: https://firebase.google.com/docs/functions/config-env
Integrating Geocoding API
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/fb-google-integration-8
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/106/files
Integrating Places API
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/fb-google-integration-9
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/107/files
Integrating Places Photos
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/fb-google-integration-10
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/108/files
Minor Optimizations
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/fb-google-minor-optim
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/110/files
- Solution Changes 2: https://github.com/mobinni/MealsToGo/pull/112
Error Management
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/fb-google-error-states
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/111/files
- Passing navigation solution:
https://github.com/mobinni/MealsToGo/tree/fb-google-error-states-2
- Passing navigation changes: https://github.com/mobinni/MealsToGo/pull/119
Bonus: Mobile Payments With Stripe
Signing Up For Stripe
- Stripe: https://stripe.com
React Native Stripe Client
- Stripe Client: https://github.com/expo/stripe-expo#readme
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/stripe-integration-1
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/120/files
Setting Up Our Checkout
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/stripe-integration-2
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/121/files
Our Credit Card Input
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/stripe-integration-3
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/122/files
Getting Our First Stripe Token
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/stripe-integration-4
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/123/files
Hooking Up Our Credit Card Form
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/stripe-integration-5
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/124/files
Building The Cart Context
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/stripe-integration-6
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/125/files
Integrating Our Cart
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/stripe-integration-7
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/126/files
Oh No! A Cart Bug
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/stripe-integration-8
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/127/files
An Empty Cart
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/stripe-integration-9
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/128/files
Adding The Checkout UI
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/stripe-integration-10
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/129/files
Getting The Payee Name
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/stripe-integration-11
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/130/files
Setting Up For Payment
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/stripe-integration-12
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/131/files
Building Our Payment Gateway
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/stripe-integration-13
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/132/files
- Payment Intents: https://stripe.com/docs/api/payment_intents
Payment Request Part 1
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/stripe-integration-15
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/133/files
- Payment Intents: https://stripe.com/docs/api/payment_intents
Payment Request Part 2
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/stripe-integration-16
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/134/files
Payment Request Part 3
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/stripe-integration-17
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/135/files
Adding Loading State
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/stripe-integration-18
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/136/files
Handling Error States
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/stripe-integration-19
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/137/files
- Testing: https://stripe.com/docs/testing
Solution Cart Persistence
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/stripe-integration-20
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/138/files
Bonus: Releasing To The App Stores
Before We Get Started!
- Expo App Distribution: https://docs.expo.io/distribution/introduction/
Building Standalone Apps
- Building Standalone Apps:
https://docs.expo.io/distribution/building-standalone-apps/#1-install-expo-cli
Running Our APK On The Emulator
- Integration MapView For Production:
https://docs.expo.io/versions/latest/sdk/map-view/?redirected
Creating A Play Store Account
- Play Store Signup: https://play.google.com/console/u/0/signup
- Full Release Procedure: https://docs.expo.io/distribution/uploading-apps/
Building iOS With Expo
- App Store Signup: https://developer.apple.com/programs/enroll/
Testing Your iOS Build
- Running on iOS:
https://docs.expo.io/distribution/building-standalone-apps/#if-you-choose-to-build-for-ios
- Full Release Procedure: https://docs.expo.io/distribution/uploading-apps/
Bonus: App Polish + Customizing MealsToGo
Adapting The Theme Colors
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/polish-1
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/139/files
Improving The Settings Screen
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/polish-2
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/140/files
Improving Restaurant Detail Screen
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/polish-3
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/141/files
The Favourites Bar
- Solution Repo: https://github.com/mobinni/MealsToGo/tree/polish-4
- Solution Changes: https://github.com/mobinni/MealsToGo/pull/142/files
