React Native & Expo Crash Course For React Developers

Create a React Native app using Expo and run it on a real device, using npx create-expo-app and exploring the default boilerplate in VS Code.

Learn how to clean up an Expo-based React Native project, remove the default template code, and understand the app directory as the parent of routes, with app.json for platform configuration.

Learn to run a React Native app with Expo on a real device using either wifi-based QR scanning with Expo Go or USB tethering, and understand the setup steps.

Explore the React Native view, a container analogous to a div, that defaults to flex-direction column, supports inline styling, and enables side-by-side or stacked layouts with width control.

Explore the React Native button component by using onPress, importing Button, and styling with the style prop to adjust color, margin, padding, and font size, with console logging button pressed.

Learn to customize React Native buttons with TouchableOpacity, build a reusable CustomButton component, and control title, onPress, color, padding, and alignment.

Explore the scroll view component to handle lengthy content in React Native apps. Map a numbers array to buttons, wrap them in a scroll view, and keep hello world fixed.

Install and configure expo status bar and expo navigation bar to set dark content on light backgrounds and ensure visible icons in a react native app.

Explore file-based routing with Expo Router in React Native apps, creating home, products, and cart routes under a shared layout and navigating with link tags or the useRouter hook.

Learn dynamic routes in a React Native and Expo app by listing products and navigating to a product detail screen using the product id with Expo Router and search params.

Configure the Expo Router header with layout.tsx using stack.screen options, set header shown and title, and wrap hidden headers in a safe area view to avoid layout issues.

Learn to manage shared data across screens in a React Native Expo app using Zustand, creating a global product store with increment and decrement functions and TypeScript typing.

Explore form components in React Native Expo by building an add product screen with a text input and a text area, including styling, labels, and a print values action.

Explore implementing a React Native element drop-down in Expo, configure data with label and value properties, manage state for the selected category, and style via a stylesheet.

Implement a date picker in React Native using the React Native Paper Dates library, install it, manage the model pop-up, and format the selected date with Day.js.

Build a styled product form in React Native using input, text area, select, date picker, and radio button. Implement common field styling with fixed heights and print values console output.

Master React Native form validations with react-hook-form, using Controller to wrap fields and apply validation rules on submit. This lesson demonstrates an ad product screen and covers installation and setup.

Master React Hook Form in a React Native Expo app by building an ad product screen with name, price, description, category, and launch date, including validation and error messages.

Integrate supabase into a React Native app with Expo, creating a new project, configuring env and config files, and installing required packages to enable database and storage.

Create a products table in superbase with name, description, price, category, and launch date, enable full row-level security, and implement an IProduct interface and addProduct service for data insertion.

Implement a complete add product flow in React Native with Expo, using Supabase, applying snake_case for fields like launch_date, category, and name, and manage loading, alerts, and navigation.

Fetches all products from the super base and displays them in a React Native app using a map to render product cards with a loading state.

learn how to display a products list with React Native's FlatList, leveraging virtualization for memory-efficient rendering, pull-to-refresh, and easy data fetching with renderItem and keyExtractor.

Learn how to implement a reusable product form component for both add and edit pages in a React Native and Expo project, wiring up dynamic routing, props, and service calls.

Develop the edit product flow by fetching a product by id, prepopulating the form, updating via a server action, and handling delete with a confirmation and data refresh.

Update the expo app title and icon via icon kitchen, replace assets/icon.png, keep app.json unchanged, and deploy to expo store to generate a shareable apk for iOS and Android.

Create an Expo account and log in, install and run the EAS CLI, configure EAS Build for Android, and generate APKs for development, preview, and production.