- 20 Sections
- 351 Lessons
- 8 Weeks
Expand all sectionsCollapse all sections
- Getting Started16
- 1.1Welcome!
- 1.2What is React Native?
- 1.3Join our Online Learning Community
- 1.4Expo vs React Native CLI
- 1.5How React Native Works
- 1.6Node.js Download
- 1.7Creating Our First React Native App
- 1.8Working on Our First App
- 1.9React Native Apps Are Hard Work!
- 1.10React Native Alternatives
- 1.11Course Requirements
- 1.12Course Requirement Refreshers
- 1.13Running the App on an Android Emulator
- 1.14Course Outline
- 1.15How to get the Most out of This Course
- 1.16Useful Resources & Links
- JavaScript Refresher14
- 2.1Module Introduction
- 2.2JavaScript – A Summary
- 2.3Project Setup
- 2.4Core Syntax Refresher
- 2.5let & const
- 2.6Arrow Functions
- 2.7Objects: Properties & Methods
- 2.8Arrays & Array Methods
- 2.9Arrays, Objects & Reference Types
- 2.10Spread Operator & Rest Parameters
- 2.11Destructuring
- 2.12Async Code & Promises
- 2.13Wrap Up
- 2.14Module Resources
- React.js Refresher15
- 3.1Module Introduction
- 3.2What is React
- 3.3A Starting Project
- 3.4Understanding JSX
- 3.5Understanding Components
- 3.6Working with Multiple Components
- 3.7Working with Props
- 3.8Rendering Lists of Data
- 3.9Handling Events
- 3.10Parent-Child Communication
- 3.11Managing State
- 3.12More on State
- 3.13User Input & Two-Way Binding
- 3.14Wrap Up
- 3.15Module Resources
- Diving into the Basics [COURSE GOALS APP]26
- 4.1Module Introduction
- 4.2How to work with React Native Components
- 4.3Setting Up A New Project
- 4.4Planning the App
- 4.5Working with Core Components
- 4.6Getting Started with Styles
- 4.7Flexbox & Layouts (Intro)
- 4.8React Native Flexbox Deep Dive
- 4.9Inline Styles & StyleSheet Objects
- 4.10Components, Styles, Layouts
- 4.11Working with State & Events
- 4.12Outputting a List of Items
- 4.13Styling List Items
- 4.14Making it Scrollable with ScrollView!
- 4.15A Better List: FlatList
- 4.16More Components & Lists
- 4.17Splitting the App Into Components
- 4.18Passing Data Between Components
- 4.19Working with Touchable Components
- 4.20Deleting Items
- 4.21Adding a Modal Overlay
- 4.22More Flexbox Styling
- 4.23Closing the Modal & Clearing Input
- 4.24Finishing the Modal Styling
- 4.25Wrap Up
- 4.26Useful Resources & Links
- Debugging React Native Apps10
- 5.1Module Introduction
- 5.2What To Debug & How To Debug?
- 5.3Running the App on a Real Device & Debugging
- 5.4Handling Error Messages
- 5.5Understanding Code Flow with console.log()
- 5.6Using the Remote Debugger & Breakpoints
- 5.7Working with the Device DevTools Overlay
- 5.8Debugging the UI & Using React Native Debugger
- 5.9Wrap Up
- 5.10Useful Resources & Links
- Components, Styling, Layouts - Building Real Apps [GUESS A NUMBER APP]39
- 6.1Module Introduction
- 6.2Setup & App Planning
- 6.3Adding a Custom Header Component
- 6.4Adding a Screen Component
- 6.5Working on the Layout
- 6.6Styling a View as a “Card” Container (with Drop Shadows & Rounded Corners)
- 6.7React Native Styling vs CSS Styling
- 6.8Extracting a Card Component (Presentational Component)
- 6.9Components & Styling
- 6.10Color Theming with Constants
- 6.11Configuring & Styling a TextInput
- 6.12Cleaning User Input & Controlling the Soft Keyboard
- 6.13Resetting & Confirming User Input
- 6.14Configuring Components
- 6.15Showing an Alert
- 6.16Time to Finish the “Confirmation Box”
- 6.17Adding Random Number Generation
- 6.18Switching Between Multiple “Screens”
- 6.19Adding Game Features: Hints & Validation
- 6.20Checking the “Win” Condition with useEffect()
- 6.21Finishing the Game Logic
- 6.22Adding AppLoading
- 6.23Adding Custom Fonts
- 6.24Installing expo-font
- 6.25A Synthetic Style “Cascade”: Custom Wrapper Components & Global Styles
- 6.26Adding Local Images
- 6.27Styling Images
- 6.28Working with Network (Web) Images
- 6.29A Closer Look at the “Text” Component (and what you can do with it)
- 6.30vs – A Summary
- 6.31Building a Custom Button Component
- 6.32Adding Icons
- 6.33Exploring UI Libraries
- 6.34Managing Past Guesses as a List
- 6.35Styling List Items & Lists
- 6.36ScrollView & Flexbox (Yes, that works!)
- 6.37Using FlatList Instead of ScrollView
- 6.38Wrap Up
- 6.39Useful Resources & Links
- Responsive & Adaptive User Interfaces and Apps21
- 7.1Module Introduction
- 7.2Finding Improvement Opportunities
- 7.3Working with More Flexible Styling Rules
- 7.4Introducing the Dimensions API
- 7.5Using Dimensions in “if” Checks
- 7.6Calculating Sizes Dynamically
- 7.7Problems with Different Device Orientations
- 7.8Controlling Orientation & Using the KeyboardAvoidingView
- 7.9Listening to Orientation Changes
- 7.10Rendering Different Layouts
- 7.11Fixing the GameOver Screen
- 7.12Updating All Code to Update Dynamically
- 7.13The Dimensions API & Responsive UIs
- 7.14Expo’s ScreenOrientation API
- 7.15Introducing the Platform API
- 7.16Working with Platform.select() and Platform in “if” Checks
- 7.17Using Platform-specific Code Files
- 7.18The Platform API
- 7.19Using the SafeAreaView
- 7.20Wrap Up
- 7.21Useful Resources & Links
- Navigation with React Navigation [THE MEALS APP]43
- 8.1Module Introduction
- 8.2Planning the App
- 8.3Adding Screens
- 8.4Adding AppLoading
- 8.5Adding Fonts
- 8.6React Navigation Docs
- 8.7Installing React Navigation & Adding Navigation to the App
- 8.8MUST READ: Installing Different Navigators
- 8.9Creating a StackNavigator
- 8.10React Navigation & Code Attachments
- 8.11Navigating Between Screens
- 8.12Alternative Navigation Syntax
- 8.13Navigation Basics
- 8.14Navigation to the “Meal Details” Screen
- 8.15Pushing, Popping & Replacing
- 8.16Outputting a Grid of Categories
- 8.17Configuring the Header with Navigation Options
- 8.18Passing & Reading Params Upon Navigation
- 8.19Setting Dynamic Navigation Options
- 8.20Default Navigation Options & Config
- 8.21Navigation Params & Configuration
- 8.22Grid Styling & Some Refactoring
- 8.23Adding Meal Models & Data
- 8.24Loading Meals for Categories
- 8.25Rendering a Meals List
- 8.26Passing Data to the Meal Detail Screen
- 8.27Adding Header Buttons
- 8.28Fixing the Shadows
- 8.29Adding Tabs-based Navigation
- 8.30Setting Icons and Configuring Tabs
- 8.31navigationOptions inside of a Navigator
- 8.32Adding Material Bottom Tabs
- 8.33Adding a Favorites Stack
- 8.34Adding a Menu Button & Drawer Navigation
- 8.35Configuring the Drawer
- 8.36More Navigation Config & Styling
- 8.37Adding a DefaultText Component
- 8.38Adding the MealDetail Screen Content
- 8.39Time for the “Filters” Screen Content!
- 8.40Passing Data Between Component & Navigation Options (Header)
- 8.41[React Refresher] useEffect() & useCallback()
- 8.42Wrap Up
- 8.43Useful Resources & Links
- State Management & Redux13
- 9.1Module Introduction
- 9.2What is State & What is Redux?
- 9.3Redux & Store Setup
- 9.4Selecting State Slices
- 9.5Redux Data & Navigation Options
- 9.6Dispatching Actions & Reducer Logic
- 9.7Switching the Favorites Icon
- 9.8Rendering a Fallback Text
- 9.9Adding Filtering Logic
- 9.10Dispatching Filter Actions
- 9.11Debugging Redux in React Native Apps
- 9.12Wrap Up
- 9.13Useful Resources & Links
- Time to Practice - THE SHOP APP28
- 10.1Module Introduction
- 10.2Planning the App
- 10.3Creating the Basic Project Setup
- 10.4The Products Overview Screen
- 10.5Setting Up a Navigator
- 10.6Styling the Product Items
- 10.7Adding Touchable Components
- 10.8Working on the Product Details Screen
- 10.9Using Custom Fonts
- 10.10Adding Items to the Cart
- 10.11Implementing Header Buttons
- 10.12Outputting Cart Items
- 10.13Adding Logic to Delete Items
- 10.14Adding Redux Logic for Orders
- 10.15SideDrawer & The Orders Screen
- 10.16Clearing the Cart
- 10.17Styling Order Items
- 10.18Making the “Show Details” Button Work
- 10.19Building the “User Products” Screen
- 10.20Reorganizing the ProductItem Component
- 10.21Deleting Items
- 10.22Adding Basic Editing & Navigation Logic
- 10.23Handling User Input
- 10.24Using Params to Submit User Input
- 10.25Dispatching Actions for Creating & Updating
- 10.26Time to Improve the App!
- 10.27Wrap Up
- 10.28Useful Resources & Links
- Handling User Input10
- 11.1Module Introduction
- 11.2Configuring TextInputs
- 11.3Adding Basic Validation
- 11.4Getting Started with useReducer()
- 11.5Finishing the Merged Form & Input Management
- 11.6Moving Input Logic Into A Separate Component
- 11.7Connecting Input Component & Form
- 11.8Tweaking Styles & Handling the Soft Keyboard
- 11.9Alternatives & Wrap Up
- 11.10Useful Resources & Links
- Http Requests & Adding a Web Server + Database15
- 12.1Module Introduction
- 12.2Setup & How To Send Requests
- 12.3Installing Redux Thunk
- 12.4Storing Products on a Server
- 12.5Fetching Products from the Server
- 12.6Displaying a Loading Spinner & Handling Errors
- 12.7Setting Up a Navigation Listener
- 12.8Updating & Deleting Products
- 12.9Handling Additional Errors
- 12.10Storing Orders
- 12.11Displaying an ActivityIndicator
- 12.12Fetching Stored Orders
- 12.13Adding “Pull to Refresh”
- 12.14Wrap Up
- 12.15Useful Resources & Links
- User Authentication15
- 13.1Module Introduction
- 13.2How Authentication Works
- 13.3Implementing a Basic Login Screen
- 13.4Adding User Signup
- 13.5Logging Users In
- 13.6Managing the Loading State & Errors
- 13.7Using the Token
- 13.8Mapping Orders to Users
- 13.9Improved Mapping (Scoping)
- 13.10Implementing “Auto Login”
- 13.11Adding Logout
- 13.12Implementing “Auto Logout”
- 13.13Auto-Logout & Android (Warning)
- 13.14Wrap Up
- 13.15Useful Resources & Links
- Native Device Features (Camera, Maps, Location, SQLite, ...) [GREAT PLACES APP]30
- 14.1Module Introduction
- 14.2Planning the App
- 14.3Navigation Setup in Next Lecture
- 14.4Screen & Navigation Setup
- 14.5Getting Started with the Form
- 14.6Redux & Adding Places
- 14.7Outputting a List of Places
- 14.8Accessing the Device Camera
- 14.9Configuring the Camera Access
- 14.10Using the Picked Image
- 14.11Storing the Image on the Filesystem
- 14.12Changed SQLite Import
- 14.13Diving into SQLite for Permanent Data Storage
- 14.14Storing Data in the Local Database
- 14.15Fetching Data from the Local Database
- 14.16Getting the User Location
- 14.17Showing a Map Preview of the Location
- 14.18More on Environment Variables
- 14.19Displaying an Interactive Map
- 14.20Adding a Marker
- 14.21Making the Picked Location “Saveable”
- 14.22Storing Picked Places
- 14.23Updating the Location Screen When the Location Changes
- 14.24Storing the Address
- 14.25Displaying the “Details” Screen
- 14.26Finishing the “Map” Screen
- 14.27Running the App on iOS
- 14.28Running the App on Android
- 14.29Wrap Up
- 14.30Useful Resources & Links
- Building Apps Without Expo10
- 15.1Module Introduction
- 15.2Alternatives to Expo
- 15.3Building Apps with Just the React Native CLI
- 15.4Live Reload and RN CLI Apps
- 15.5Important: Using React Native Image Picker
- 15.6Adding Native Modules to Non-Expo Apps
- 15.7Understanding Expo’s “Bare Workflow”
- 15.8Ejecting from Expo’s “Managed Workflow”
- 15.9When To Use Which?
- 15.10Useful Resources & Links
- Publishing React Native Apps11
- 16.1Module Introduction
- 16.2Deployment Steps
- 16.3Configuring the App & Publishing
- 16.4Configuring Icons & The Splash Screen
- 16.5Working with Offline Asset Bundles
- 16.6Using “Over the Air Updates” (OTA Updates)
- 16.7Building the Apps for Deployment (iOS & Android)
- 16.8Publishing iOS Apps without Expo
- 16.9Publishing Android Apps without Expo
- 16.10Configuring Android Apps
- 16.11Useful Resources & Links
- Updating to React Navigation 5+15
- 17.1Module Introduction
- 17.2What Changed?
- 17.3Preparing the Project
- 17.4More Information & Updating the Project Dependencies
- 17.5Moving from the “Registry-like” to the “Component-based” Navigation Config
- 17.6First Migration Steps
- 17.7Converting More Stack Navigators to the New Config
- 17.8Migrating the Drawer Navigation
- 17.9Replacing the “Switch” Navigator & Auth Flow
- 17.10Logout & Further Fixes/ Adjustments
- 17.11Extracting Screen Params
- 17.12Setting Screen Options Dynamically
- 17.13Remaining Migration Steps & Roundup
- 17.14A Summary Of All Important Changes
- 17.15Useful Resources & Links
- Push Notifications18
- 18.1Module Introduction
- 18.2Understanding Notifications
- 18.3Sending Local Notifications
- 18.4Getting Permissions
- 18.5Controlling How Notifications Are Displayed
- 18.6Reacting to Foreground Notifications
- 18.7Reacting to Background Notifications
- 18.8How Push Notifications Work
- 18.9Expo & Push Notifications
- 18.10Getting a Push Token
- 18.11Sending Push Notifications
- 18.12Using Expo’s Push Server
- 18.13More on Push Tokens
- 18.14Adding Push Notifications to the Shop App (1/3)
- 18.15Adding Push Notifications to the Shop App (2/3)
- 18.16Adding Push Notifications to the Shop App (3/3)
- 18.17Push Notifications in non-Expo Managed Apps
- 18.18Module Resources
- Course Roundup & Next Steps1
- Bonus1