Ultimate React Native Course Notes

Introduction to Course

• Instructor: Amash
• Goal: Build fast, beautiful mobile apps using React Native from scratch
• App: Full-fledged marketplace app called 'Done With It'
• Requirements: Basic JavaScript knowledge

App Features Overview

• Login/Register Screen: Users can log in or sign up
• Item Listings: Items displayed with details, location on the map, messaging the seller
• Pull to Refresh: Like many mainstream apps
• Filter/List Items: Based on categories e.g., cameras
• Add Listings: Image upload, details input, category selection
• My Account Page: User listings and messages
• Delete Listings: Swipe to delete functionality

React Native Basics

• Framework: Build native iOS/Android apps using JavaScript
• Components: JSX, Props, State, Components
• Tools: Expo and React Native CLI

Expo vs React Native CLI

• Expo: Easier to start, hides complexity, no direct native API access
• React Native CLI: More control, includes native iOS/Android sub-projects, suitable for those with prior experience

Setting up Development Environment

• Node.js: Ensure version 12 or higher
• Expo CLI: Install globally via npm
• Expo Client: Install on physical device
• Code Editor: Use VS Code, extensions like React Native Tools, Prettier

Creating a Project with Expo

• Command: expo init donewithit
• Workflow Options: Managed or Bare; we use Managed
• Run App: npm start, run on emulator or physical device

Debugging

• Console Logs: Basic, can slow down production apps
• Chrome Debugging: Enable remote debugging, Chrome DevTools, source maps
• VS Code Debugging: React Native Tools extension, attach to packager

Publishing and Managing App

• Expo Publish: Create a permanent URL for your app
• Refresh and Logs: Metro Bundler, terminal logs

Core Components & APIs in React Native

• View: Basic layout component (similar to div)
• Text: Display text, props like numberOfLines, onPress
• Image: Display images, source can be local or network; props like resizeMode
• Touchable Components: TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, platform-specific
• Button: Simple cross-platform button, customizable
• Alert: Display alerts, customizable

Styles and Layout

• Styling: CSS-like, use StyleSheet.create, validated props
• Dimensions: Use density-independent pixels, platform dimensions
• Flexbox: Layout components using flex, flexDirection, justifyContent, alignItems
• Positioning: Relative vs Absolute positioning
• Safe Area View: For iOS notch

Device Orientation and Layouts

• Orientation Detection: useDimensions and useDeviceOrientation hooks from React Native community
• Responsive Design: Adjust layout based on screen orientation and dimensions

Exercises

• Welcome Screen: Implement with image background, logo, and basic buttons
• View Image Screen: Implement with image and icon placeholders