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 template strings in TypeScript and JavaScript by printing the sum of two numbers with console.log, compare string concatenation using plus with backtick templates that embed variables.

explore special types any, unknown, undefined, and null and their impact on type safety. compare how unknown adds safety over any and how undefined and null enable nullable parameters.

Explore TypeScript arrays as data structures. Declare and index multi-item lists using length, then push items and apply pop, splice, and filter, noting undefined when out of bounds.

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.

Define objects with explicit types using a TypeScript interface. Create a named interface, declare variables of that type, and assign objects with string and number properties like name and age.

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.

Learn how named function parameters use an object to pass values by name, enabling flexible order, optional parameters, and default values for first name and last name.

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.

Learn how to define arrow functions in JavaScript and TypeScript, treat functions as objects, and pass functions as parameters, including anonymous and lambda expressions with examples like doubling numbers.

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.

Master object, string, and array destructuring in React Native to extract values into variables, create aliases, and use rest parameters for the remaining items.

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.

Run the default expo project in the browser with npm run web to view on localhost and watch the Metro bundler, then reset to a minimal template and edit index.tsx.

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.

Explore the starter React Native project anatomy, including the index.ts entry point, default export, package dependencies, and how core components like view and text use props and style with TSX/JSX.

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.

Define a reusable React Native header that accepts title and subtitle as props, with optional title and subtitle styles, using style props and a header props interface.

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 and launch an Android emulator as a virtual device, selecting a Pixel with Play Store, download API level 36, then run a React Native project via Expo Go.

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.

Discover how FlatList renders only visible items to optimize memory for long lists, replacing ScrollView; learn data, renderItem, keyExtractor, and item destructuring in React Native.

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.

Create a counter project in a new expo react native app, set up safe area context, increment a counter with a touchable opacity button and on press, log to console.

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.

Learn how the useState hook enables a React Native component to rerender when state changes, using array destructuring and a set function to update a counter.

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 how to declare and use multiple state variables with the useState hook in React Native, then toggle a button’s background color dynamically and apply conditional styles.

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.

Enable next and done keys on the keyboard for multi-field forms by using onSubmitEditing and useRef to shift focus between text inputs in a BMI calculator app.

Build a complete React Native dice game while mastering expo router navigation, stack navigation, and passing arguments between routes, with side effects via useEffect and audio playback.

Explore expo router navigation in the app directory, using index.tsx as the default root and layout.tsx to configure a stack navigator that defines routes like login and registration.

Configure a two-screen stack using Expo Router in React Native Essentials, adding index and dice game routes, customizing header titles, and controlling header visibility via layout and stack screen options.

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.

Design the home page with a centered container, validate the initial point (100–999), show errors, and navigate to the dice game by passing the initial point as a parameter.

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.

Create a React Native dice roller that shows two dice images in a row, uses two state indices to generate random faces on press, and displays their sum.

Explain the dice game rules: first roll wins with 7 or 11, loses with 2, 3, or 12; otherwise set a target and chase it until hit or seven.

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.

Adjust the React Native dice game points by defining winning, losing, and missed targets, converting the initial point from string to number, and updating points on win, loss, or miss.

Learn to finish the dice game when the point goes below or equal to zero by using a point-based useEffect to set isGameOver and show a back-to-home button, replacing navigation.

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.

Discover how to add external libraries to a React Native app with Expo, including Expo Location, Axios, Date-fns, and Async Storage, and implement tab navigation.

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.

Set a portrait background image for each route using React Native’s image background, adjust header and tab bar styles for readability, and manage the Expo status bar.

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.

Modify a function to fetch forecast weather, return current weather and a forecast item list, map responses to objects, and debug undefined results in a React Native flow.

Identify and fix a subtle weather data key mistake that caused undefined values and runtime errors, and explore patterns for passing data between React Native screens without props.

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.

Explore the challenge of passing a fruit list and toggle function through a tab layout via props, and see how a context provider solves it.

Learn to create a React context, wrap your app with a context provider, and consume it via useContext to share state (like a fruits context) across components, avoiding props drilling.

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.

Configure location permissions in the configuration file app.json by adding the expo location config plugin, ensuring proper permissions for production and development builds when using Expo Go.

Implement a detect device location function in a weather context provider using the Expo location library, handle permission denial, request foreground permissions, and obtain latitude and longitude with useWeather hook.

Call the API functions from the weather context provider to fetch current weather and forecast concurrently with Promise.all, while handling loading and errors and triggering retrieval when location is available.

Create loading and error components to manage data states in React Native, and build a reusable white text component for consistent styling across the app.

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.

Convert unix timestamps to human readable dates on the current weather page by multiplying by 1000, creating a formatted date helper with date-fns, and handling null data for loading.

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.

Create a search page with a text input and a flat list of cities, enabling live filtering by city name and tapping a city to fetch its weather data.

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 React Native weather app that fetches current and forecast data, enables city search and unit toggle, and adds a header button to refresh weather via device location.

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.

Explore adding Firebase to a React Native Expo project using the Firebase JavaScript SDK, including installation, initialization, and setting up Firebase config.

Initialize the firebase app and authentication in a React Native project, export a reusable auth object, and enable async storage persistence to remember user sessions across restarts.

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.

Add a new card route by placing a floating action button on the index, capture or select an image, send it to Gemini API, and save results to the database.

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.

Create a Gemini context provider to manage business card data with a typed interface, async getData, and reset logic, plus a useGeminiAPI hook to consume it.

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.

Upgrade Firebase billing to the base plan, enable the Gemini API with higher quota, trim and parse wrapped JSON to extract business card data, and save to Firebase storage.

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.

Complete the saveCardData flow by creating a Firestore document reference in the cards collection, deriving a unique ID, and saving the card data with the ID and image download URI.

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.