Getting Started
  • Welcome!
  • What is React Native?
  • Join our Online Learning Community
  • How React Native Works
  • Expo vs React Native CLI
  • Node.js Download
  • Creating Our First React Native App
  • Working on Our First App
  • React Native Apps Are Hard Work!
  • React Native Alternatives
  • Course Requirements
  • Course Requirement Refreshers
  • Running the App on an Android Emulator
  • Running the App on an iOS Simulator
  • Course Outline
  • How to get the Most out of This Course
  • Useful Resources & Links
Diving into the Basics [COURSE GOALS APP]
  • Module Introduction
  • How to work with React Native Components
  • Setting Up A New Project
  • Planning the App
  • Working with Core Components
  • Getting Started with Styles
  • Flexbox & Layouts (Intro)
  • React Native Flexbox Deep Dive
  • Inline Styles & StyleSheet Objects
  • Components, Styles, Layouts
  • Working with State & Events
  • Outputting a List of Items
  • Styling List Items
  • Making it Scrollable with ScrollView!
  • A Better List: FlatList
  • More Components & Lists
  • Splitting the App Into Components
  • Passing Data Between Components
  • Working with Touchable Components
  • Deleting Items
  • Adding a Modal Overlay
  • More Flexbox Styling
  • Closing the Modal & Clearing Input
  • Finishing the Modal Styling
  • Wrap Up
  • Useful Resources & Links
Debugging React Native Apps
  • Module Introduction
  • What To Debug & How To Debug?
  • Running the App on a Real Device & Debugging
  • Handling Error Messages
  • Understanding Code Flow with console.log()
  • Using the Remote Debugger & Breakpoints
  • Working with the Device DevTools Overlay
  • Debugging the UI & Using React Native Debugger
  • Wrap Up
  • Useful Resources & Links
Components, Styling, Layouts - Building Real Apps [GUESS A NUMBER APP]
  • Module Introduction
  • Setup & App Planning
  • Adding a Custom Header Component
  • Adding a Screen Component
  • Working on the Layout
  • Styling a View as a "Card" Container (with Drop Shadows & Rounded Corners)
  • React Native Styling vs CSS Styling
  • Extracting a Card Component (Presentational Component)
  • Components & Styling
  • Color Theming with Constants
  • Configuring & Styling a TextInput
  • Cleaning User Input & Controlling the Soft Keyboard
  • Resetting & Confirming User Input
  • Configuring Components
  • Showing an Alert
  • Time to Finish the "Confirmation Box"
  • Adding Random Number Generation
  • Switching Between Multiple "Screens"
  • Adding Game Features: Hints & Validation
  • Checking the "Win" Condition with useEffect()
  • Finishing the Game Logic
  • Adding AppLoading
  • Adding Custom Fonts
  • Installing expo-font
  • A Synthetic Style "Cascade": Custom Wrapper Components & Global Styles
  • Adding Local Images
  • Styling Images
  • Working with Network (Web) Images
  • A Closer Look at the "Text" Component (and what you can do with it)
  • vs - A Summary
  • Building a Custom Button Component
  • Adding Icons
  • Exploring UI Libraries
  • Managing Past Guesses as a List
  • Styling List Items & Lists
  • ScrollView & Flexbox (Yes, that works!)
  • Using FlatList Instead of ScrollView
  • Wrap Up
  • Useful Resources & Links
Responsive & Adaptive User Interfaces and Apps
  • Module Introduction
  • Finding Improvement Opportunities
  • Working with More Flexible Styling Rules