Professional React Native - by Basarat

Set up your React Native development environment by installing Node.js and npm, VS Code, and PATH; enable iOS with Xcode and CocoaPods, and Android with JDK and Android Studio.

Create a new React Native CLI project with TypeScript, run it on iOS and Android emulators, and use Metro for live reloading during development.

Explore React Native Template’s key files and the development workflow, including npm scripts for Android and iOS and the metro bundler. Create a basic App.tsx with CSS-in-JS and live reloading.

Explore how Expo simplifies setting up and developing React Native apps with a minimal development environment, live testing on devices, and optional native code via a built-in API, avoiding lock-in.

Create your first Expo app by installing Node.js and VS Code and running npx create expo app. Preview live on a device with Expo Go and Metro bundling.

Learn how Expo supports TypeScript, migrate an Expo project to TypeScript, set up tsconfig.json, convert files to .tsx, and add a type-check script for reliable type checking.

Learn to run a React Native app locally with Expo on iOS simulators and Android emulators, using Xcode, Android Studio, and npm scripts to launch Expo Go with live reload.

Explore how React Native renders components to native platforms, using Fabric, the JavaScript interface, and the Yoga layout engine to bridge JavaScript with platform-specific views.

Explore typography in React Native by styling text with font size, color, weight, and transform, using nested text and view blocks, and building reusable header and paragraph components.

Learn how to use SafeAreaView in React Native as the top-level container to keep content away from the notch, status bar, and rounded corners on iOS and Android.

Explore the React Native button component, its iOS and Android rendering differences, and how to customize color, accessibility label, and disabled state while wiring an onpress callback to log interactions.

Learn how to use the React Native status bar component to control cross-platform bar appearance with hidden and barStyle props, including merging behavior and overrides via nested components.

Explore how style sheets, style objects, and style arrays work in React Native, and learn ways to optimize performance, improve maintainability, and conditionally override text styles.

Explore flexbox in React Native, covering flex direction, flex, justify content, align items, and align self, while noting web differences and a tic tac toe grid example.

Open and manage iOS and Android project folders in a React Native app, using Xcode workspace and Android Studio to run on simulators, with Metro and adb reverse setup.

Learn to debug React Native apps in VS Code using the Microsoft-maintained React Native Tools extension, create a launch config, set breakpoints, and watch count in the iOS simulator.

Learn to debug React Native apps with Flipper, connect to your device, view logs, use the Hermes debugger and React dev tools, and perform live UI edits.

Master how touchable opacity and touchable highlight create interactive buttons in React Native, compare on press behavior across platforms, and customize active opacity and underlying color for consistent UI.

Use react native’s pressable to create custom buttons, replacing touchable opacity and styling via a function that responds to pressed and supports long press for advanced features.

Learn to collect user text input in React Native with TextInput, toggle from uncontrolled to controlled state using useState, handle onSubmitEditing, and set placeholder, keyboard type, and multi-line options.

Explore targeting iOS and Android in React Native by using platform specific files, the platform API, and platform.select to customize messages and styles.

Learn to implement a boolean input with the switch component in React Native, managing isChecked with useState and wiring onValueChange, across iOS and Android.

Learn to implement React Native activity indicator as a loading spinner, control visibility with the animating prop, and customize color and size while avoiding layout shifts across iOS and Android.

Fetch GitHub user data in a React Native app using fetch or a library, building an async get bio function to retrieve name and bio from api.github.com/users and render them.

Learn to display images in React Native using the built-in image component, with local assets, density variants, remote sources, and proper width, height, and resize mode handling.

Discover how to use React Native's scroll view to handle long content, with vertical and horizontal scrolling, keyboard dismissal, and programmatic scrolling via refs.

Create a simple separator component in React Native to visually divide text items, using a 1-pixel high, full-width view with a light-gray background; annotate styles with TypeScript's view style type.

Use Flatlist virtualization to render large lists only as they scroll into view. Optimize with fixed item height, getItemLayout, and tuning props like initialNumToRender and maxToRenderPerBatch for smooth scrolling.

Master the React Native SectionList component, including virtualization, section headers, and rendering items for a contact list. Learn the data format, key props, and sticky headers on iOS and Android.

Embed web content in a React Native app with the React Native WebView, supporting HTML strings or URLs, originWhitelist, onMessage, and optional loading and JavaScript injection.

Create an image background in React Native with the image background component, customize container and image styles, adjust opacity and text shadow, and use resize modes like cover and repeat.

Create a modal in React Native with the modal component, controlled by useState using show and hide utilities, including slide and fade animations, onRequestClose for Android, and safe area view.

Discover how to use custom fonts in React Native across iOS and Android by adding fonts to assets/fonts, matching file names to the font full name, and applying them.

Build a tic tac toe game in React Native using reusable row and column layouts, a responsive board of squares, and a hook-based state to manage turns, winners, and resets.

Build Expo app binaries locally with the EAS CLI; install required tools (Node, Xcode, CocoaPods, Fastlane, Java, Android Studio), log in, and generate IPA and ARB for app store distribution.

Explore debugging expo applications using the built-in developer menu, open js debugger, and inspect logs, memory, and performance to diagnose and fix issues efficiently.

Learn to design icons and splash screens for Expo and React Native using a Figma template, SVG content, and PNG exports; manage Android adaptive icons and splash timing with Expo.

Sign up for a paid Android developer account to publish apps on Google Play, choosing individual over organization, and verify your identity after paying a one-time 25 dollars.

Learn to create and manage react native binaries in expo cloud, linking local code and building iOS and Android apps with distribution certificates and provisioning profiles.

Discover how Expo automatically manages Android version code and iOS build number remotely, using git commit counts, build profiles, and an app version string to manage upgradability.

Publish your Android game to the Google Play Console. Create the app, configure the store listing, upload an Android application bundle, and navigate the review and release process.

Publish an iOS app to the Apple App Store using App Store Connect, covering listing creation, binary submission, screenshots, privacy, pricing, and release options.

Create a Google Play badge using your app’s Google Play URL with the badge generator, then embed HTML and add a QR code to drive installs.

Use Apple's official app store marketing tools to generate a badge and a QR code, then embed them with simple HTML anchor and image tags for seamless marketing.