React Native Essentials - Build Mobile Apps like a Pro

Learn the fundamentals of TypeScript for React Native, covering primitive types, arrays, objects, functions, destructuring, type safety, unknown, undefined, null, and common map and filter methods.

Explore the three primitive types—boolean, number, and string—in TypeScript and JavaScript. Declare variables with let, follow naming rules, and print results with console.log, as we prep for React Native development.

Explore explicit and implicit type assignment in TypeScript, seeing how the first assigned value fixes a variable's type and how the compiler infers types for later assignments.

Explore TypeScript tuples as typed arrays with a fixed length and per-index types, using string, string, number, and learn about index access and read only protection.

Learn TypeScript object types by defining a person with first name, last name, and age; access properties via dot notation and nest an address object to print the city.

Discover how to create and call functions in React Native using TypeScript, applying the single responsibility principle, function signatures, parameters, and dynamic arguments to print output.

Learn how to write functions that return values instead of printing, and specify return types in TypeScript. Combine strings, store results with const, and print them with console.log.

Explore making function parameters optional in React Native apps, using default values or a question mark after parameter names, and safely handle undefined with a concise fallback in sums.

Explore rest parameters and spread syntax in TypeScript, turning any number of arguments into a function call and spreading an array into separate parameters for min and max calculations.

Explore how the array forEach method iterates elements by passing a callback that receives value, index, and the array, with optional arrow function syntax for concise code.

Explore how the array map function transforms a list by converting numbers to strings, producing a new list of the same length, and understanding value, index, and array parameters.

Explore essential array methods in JavaScript/TypeScript, including filter, reduce, every, and some, with practical examples for filtering even numbers, summing lists, and checking conditions.

Set up the React Native environment with expo, install Node.js and npm, and create an Expo project ready to run on web and mobile.

Learn to create a React Native project with a template and TypeScript, run it on Android using Expo Go, scan the QR code, and set up VS Code with Prettier.

Master core React Native components and layouts by building a profile screen and a movie app layout, using text, image, button, scroll view, flatlist, style sheets, and flexbox.

Master the basics of React Native by building from scratch a simple app with text and view components, returning multiple text elements inside a view for vertical layout.

Learn how to display images in React Native by using the image component, passing props like source, width, height, and style to load from internet or assets.

Learn how to measure and manage space in React Native by adjusting width, height, font size, and background color, using flex to make the root view fill the screen.

Install the React Native safe area context package and wrap your app in a safe area provider, then render content with safe area view to avoid notch overlap.

Reorganize code by extracting the UI into separate React Native Home.tsx and related files, structuring folders like pages, and prepare for flexbox layout in the next lecture.

Learn how flexbox lays out React Native components using flex direction to define the main axis and control space with align items and justify content.

Master how flex distributes vertical space in React Native layouts by sizing boxes with flex values to fill the screen, adjust proportions, and adapt with direction changes.

Practice building a full-screen layout with four equal boxes using flex direction. Create a column root axis and two row containers so each box fills height and width.

Create a color quadrant layout in React Native using a two-row container with four colored boxes. Apply shared and per-box styles via arrays and center text in each box.

learn to load asset images in React Native by placing them in the assets folder, using require with proper relative paths, and setting width and height in the image component.

Learn to render a circular image in React Native by extracting a dedicated style, setting border radius to half the width, and applying border and elevation or shadow properties.

Explore how to layer images in React Native by using absolute positioning within a relative container, center elements, and manage dimensions with constants for responsive overlap.

Build a React Native profile page by adding a header and subtitle with text components inside a container view that positions the text below the dog image.

Learn how to implement a scrollable profile page in React Native by wrapping content in a scroll view, managing text with line breaks, and adjusting layout with padding and margins.

Learn to build reusable custom header components in React Native by combining existing components, passing title and subtitle as props, and reducing boilerplate across pages.

Create a reusable row component that accepts any number of children and an optional style prop, arranging them in a horizontal row with configurable justify content.

Install Android Studio on Windows to create android emulators and test React Native apps across devices, and learn to install Android SDK while managing 20–30 GB of free space.

Install android studio from the downloaded exe, install and update the android sdk via the sdk manager, and create an emulator using the virtual device manager.

Create a new Expo app with a blank TypeScript template named Scrollable components, then explore scrollable components like ScrollView and FlatList, running on an Android emulator or a physical device.

Learn to create dynamic scrollable lists in React Native by using FlatList for performance, wrapping content in safe area context, and rendering 100 items with map while assigning unique keys.

Build a reusable movie item component in a components folder to render each movie’s image, title, subtitle, and rating with styled borders and an overlay info bar.

Make each movie item Pressable with the Pressable component, trigger an alert on press showing the movie title and subtitle, and enable a pressed style for tactile feedback.

Master state management in React Native by learning the difference between variables and state and using the useState hook to drive real-time UI updates in a BMI calculator app.

Discover how React Native renders JSX into native views and why UI rendering is fixed, then learn to remember values and trigger rerendering with a declarative UI.

Explain how the useState hook manages component state in React Native by returning a state variable and a setter, updating on button presses and triggering rerenders.

Learn to minimize unnecessary rerenders by wrapping stateless components in memo, so only the affected components re-render when state changes, boosting performance in React Native apps.

Create a bmi calculator app in react native using text inputs for weight and height, compute bmi = weight/height^2, and display the bmi value and status (underweight to obese).

Build a React Native BMI calculator that shows results, disables the button until weight and height are provided, truncates to one decimal, and shows a BMI status.

Navigate between routes in a stack using Expo Router by pushing the dice game page, then return to the home page via the header back button or a back action.

Import and organize image and audio assets for a dice game, using require to load d1-d6 images and win/lose mp3s, with default values and stateful dice updates.

Learn to implement first-roll win/lose logic in a React Native dice game using arrays of winning and losing sums. Manage status messages and add a reset and score adjustments.

Add a reset button in a React Native dice game, wiring a reset function to clear indices, sum, and status, and toggle game running to enable or disable actions.

Set and chase the target teaches building a dice game in React Native using a target state and conditional rendering. It covers win, lose, and continue outcomes based on rolls.

Learn to implement win and lose sound effects in a React Native expo app using expo av, including an async play sound function, sound loading, playback, and unloading.

Master React Native essentials by building a multi-tab weather app with Expo Router, axios to open weather map for current and five-day forecast, plus location API and city search.

Learn to implement tab navigation with expo router by organizing routes into a tabs folder, creating tab screens for current, forecast, and search, and configuring tab bar icons and titles.

Fix status bar issues by making the root a stack and placing tab components inside that stack in Expo Router, and create a layout file under app to register routes.

Define types for current weather and forecast in a React Native app, using metric or imperial units and exact URL parameters for latitude, longitude, and app id.

Learn to fetch current weather and five day forecast data using axios in a weather API class, with base URL, dynamic params, and error handling.

Explore a starter React Native project with a shared fruit list and a favorite flag, showing how to pass state to two tabs (fruits and favorites) and manage favorites.

Learn to manage state in a React Native app with a context provider, exposing a fruits list and a toggle favorite function, plus a custom use fruit hook for consumption.

Define a constants file in the data folder to store weather API key, degree symbol, and a static city list. Prepare for the next lecture to build the context.

Defines a weather context provider in React Native with types for current and forecast weather, unit, loading and error states, plus functions to refresh, fetch by city, and toggle units.

Integrate the loading component into the index.ts and forecasts file, manage loading with the use weather hook, and show the loading indicator until current weather and forecast data render.

Build a current weather page in React Native that shows city, country, temperature with a degree symbol, feels like, description, and a dynamic icon URL from Open Weather Map.

Render a 40-item forecast list on the forecast page using a flat list and forecast weather data hook, with forecast item view showing date, icon, temperature (min/max), and description.

Filter city list by user input using a search handler and case-insensitive starts with logic. Update the results state and pass filtered data to the list to improve user experience.

Convert city names to coordinates via geocoding, then call get weather by city from the weather context provider and update the view.

Demonstrates that the real device version of the weather app supports city search, current and forecast data, with a done button and a searchable city list of suggestions.

Build a custom temperature switch component in a React Native weather app, using a weather context and async storage to persist Celsius or Fahrenheit.

Learn to persist the temperature unit in a React Native app using Async Storage, toggling metric and imperial, and load the saved value on startup.

Build a virtual business card app in React Native that scans cards, saves data to Firebase Firestore and Storage, authenticates users, and enables calling, texting, maps, and web access.

explore firebase as a cloud backend with authentication, cloud firestore, and storage, and learn to create a firebase project using Google account to connect a web app for react native.

Create protected routes and a protected layout to redirect unauthenticated users to sign in, and build a sign-in page wired to a firebase-backed authentication provider via context.

Create sign in page with login and register modes, using email and password fields with secure text entry and a toggle; plan to integrate firebase authentication logic in auth provider.

Build a Firebase authentication context provider to manage user, loading, and error states with login, register, and logout methods; wrap the app and expose a useAuth hook.

Enable the email and password provider in the Firebase console and connect it to an auth context provider using onAuthStateChanged in a useEffect to set the user and loading state.

Use a protected layout with an auth provider and use auth hook to manage user and loading states, show a loading screen, handle login/registration, and redirect home on success.

Implement a sign-out flow in a React Native app by adding a header right logout button, cleaning up auth state with useEffect, and wiring logout to the auth provider.

Learn to integrate expo image picker to capture or select images from camera or gallery, configure permissions, and manage image paths with state for display in a custom image viewer.

Obtain and securely use a Gemini API key in a React Native app, install the Google JNI library, and set up a Gemini API provider for prompts.

Configure the Google Gemini AI model and prompt to convert a base64 image into a plain json object, by initializing the API, building a prompt, and generating content.

Create a confirmation page that displays extracted data, passes the image URI via route params, and saves the data and image to Firebase Firestore and Storage after user taps save.

Configure firebase storage and firestore for a React Native app by creating a default storage bucket, applying authentication-based rules, and organizing data with Firestore collections and documents.

Learn how Cloud Firestore organizes data with collections, documents, and fields, using unique or auto IDs, and how to model students data and run simple queries.

Finish the uploadImage function by converting a local image URI to a blob, uploading it to Firebase storage under images, and retrieving the download URL.

Practice saving cart data and uploading images via DB provider, set image URIs, and navigate using expo router from new card to confirm cart and then to the index page.

Save a card by uploading the image to storage, saving the download URL as image URI, and storing the card document in Cloud Firestore with the document id.

Fetch all documents from the card collection and convert them to business card data. Set up a real-time on snapshot listener in useEffect with authentication and cleanup.

Create a details page under a protected route, navigate via expo router with item id, and fetch the card from the card list provided by DB provider to minimize reads.

Show a details page that loads a card image with a placeholder, displays the name and designation, and provides call, sms, email, address, and website actions with conditional rendering.

Implement contact actions in React Native by using Linking.openURL to initiate calls, send SMS, compose emails, and open maps and websites, with platform-specific map URLs for Android and iOS.

Discover how to replace the React Native image with the Expo Image component to gracefully load network images and show a placeholder until download completes.

Explore state management in React Native using the useReducer hook, learn when to replace useState, and combine useReducer with context to build a no backend demo app with static data.

Build a starter React Native to-do app with add, complete, and delete actions, using a static list and priority colors, and explore state basics before useReducer.

Explore how a simple todo list state is modified in three places and learn how use reducer centralizes business logics, preparing us to replace use state with use reducer.

learn to implement a todo reducer in react native by consolidating add, delete, and change logics into a single reducer function that handles actions and updates the todo list state.

Learn to manage complex state with the useReducer hook by dispatching add, change, and delete actions to a reducer that centralizes business logic for a todo list.