React Native Bootcamp 2025: Build 2 Job Ready Real Projects

Explore Cinequest, a React Native movie and television show app powered by the TMDb api, featuring dynamic carousels, a custom search, trailers via YouTube, and watchlist management with context-driven state.

Set up a Mac environment for React Native with Homebrew, Node, npm, VSCode, and Expo CLI, using npx to create a blank Expo app named Cinequest, and prepare Android setup.

Set up a Windows React Native environment in three steps: install Node.js, configure Visual Studio Code, and create a blank Expo project using npx for JavaScript.

Start your expo app, scan the qr code with expo go, and explore a movie app structure with assets, context, styles, utils, tabs, and carousal movie card.

Set up bottom tab navigation with Expo Router, create five tab screens, and connect them via a layout file to enable switching between home, movies, TV shows, user, and retail.

Build bottom tab navigation with expo router's tabs component across home, movies, tv shows, profile, and detail screens, configuring layout.js and app.js to root the expo route with context.

This lecture builds a carousel component in React Native using a horizontal FlatList for movie and TV show cards. It highlights dimensions for sizing and key FlatList props like renderItem.

Build and finalize a carousel component by configuring flatlist data, renderItem, keyExtractor, and horizontal snapping, then demonstrate integration in index.js with sample data and movie and TV show cards.

Learn to build a movie card component for a carousel using React Native Paper cards, install react-native-paper, and render poster, title, and rating with touchable navigation to a detail page.

Demonstrates styling and export of a movie card component within a React Native carousel. Uses TMDb and IMDb sample data to render poster, title, and info, with press interactions.

Create a TV show card component by adapting the movie card, splitting it into two components, updating names and data, and rendering it on the index screen with show data.

Learn to render movie and TV show cards inside a scrollable carousel in React Native, add section styling, and print card presses to the console.

Explore the TMDB API to power the app with data such as popular movies and TV shows, search results, recommended items, movie details, trailers, and similar movies, using API keys.

Fetch popular movies and tv shows from the tmdb API using an axios instance with a base URL and api key, and implement async fetch functions.

Implement fetch functions for popular movies and popular TV shows on the home screen using useState and useEffect to manage state and load data.

Replace the carousel data with actual popular movies and TV shows from the updated API, fix the load error, and prepare to add a search bar.

Add fetch of recommended movies and TV shows in api.js, integrate them into the movie and TV show screens, and adjust title fields to name for shows.

Implement routing from movie and tv show cards to a detail screen using expo router's useRouter hook, pushing detail URLs with the item id.

Set up the detail screen to receive movie or TV show IDs via expo router's useLocalSearchParams, conditionally render the IDs from the source card, and navigate using useRouter.

Export async fetch movie details function accepting a movie id and videos parameter to query TMDB, with error handling, and adapt it to fetch show details using TV show id.

Implement fetch movie details and fetch TV show details using useEffect and useState with useLocalSearchParams and a loading indicator to render the detail screen.

Implement an activity indicator on React Native detail screen to manage loading and error states while fetching movie or TV show details, including title, overview, rating, release date, and runtime.

Fetch movie and TV show trailers from the TMDB API using axios, returning the first English YouTube trailer key for the app, with error handling.

Implement an activity indicator on the detail screen, replacing loading text with a centered large indicator that shows during data fetch and buffers the detail screen before trailers load.

Enhance the detail screen by embedding YouTube trailers for movies and TV shows using the React Native WebView, fetching trailer IDs and rendering an embedded YouTube player.

Fetch and display trailers from the TMDB API in a React Native detail screen, and resolve WebView module issues with expo doctor and expo install to ensure library compatibility.

Develop the detail screen by integrating trailer, title, and overview, and implement fetching of similar movies and shows with API key handling, preparing the watched and to-watch buttons.

Implement similar movies and shows on the detail screen, and add two action buttons—mark as watch and mark as to watch—using touchable opacity and state management.

Add a similar movies or tv show carousel to the detail screen with watch and to watch buttons and a trailer view, and introduce conditional titles for similar content.

Implement context and async storage in a React Native app to persist user data, including username, watched and to watch lists, and wire up buttons to add items to lists.

Learn to use useEffect to load user data from async storage and manage username and watch state via a user context provider and the useUser hook.

Use the user context and async storage to implement handle mark as watched and handle mark as to watch in the detail screen, updating and persisting lists.

Build a React Native user profile screen, enabling add to watch and watched lists for movies and TV shows, using a user context, cards, and icons.

Restructure user data from the user context and manage editing state; implement handle edit, handle save, and add or remove items from the watched and to watch lists.

Implement render item function on the user screen to render movie or TV show cards with action buttons, using on press and expo router to manage to-watch and watched states.

Implement render item component in the profile screen to display add to watch and remove from watch actions, manage watched and to-watch lists, and render material icons with touchable opacity.

Finalize the user screen by toggling between display and editing modes. Render a scroll view with the username, an edit button, and a 'watched movies and tv show' section.

Build the user screen with a watch-data driven carousel, implement renderItem, and show a 'no content' message when empty, then review profile interactions and upcoming search bar.

Implement a fetch search results function that queries the TMDb API to search movies and TV shows by user input, returning results for use in a dynamic search bar.

Build the search screen component that displays the query and results in a carousel, fetch results from the tmdb api using local search params, and show similar items.

Implement an async state function that fetches results for a query, identifies if the first result is a movie or a TV show, and fetches similar items with error handling.

Implement the search results rendering: a search result item and a similar item that render as movie or tv show cards, with a similar items carousel.

Build a versatile search bar component in React Native using React Native Paper, including on-change handling, submit actions, and dynamic suggestions to search movies or shows.

Implement a real-time search feature by integrating a search bar component into the home screen, handling query changes, submitting queries, and displaying live suggestions.

Implement a theme context in a React Native app using the React Native Paper library to enable dynamic light and dark theme switching.

Wrap app.js with a theme provider and add a toggle button in the user screen to switch between dark and light themes using the theme context.

Implement dynamic theming in the Cinequest app using a context theme toggle on the home and profile screens, changing background and text colors. Extend theming to layout and tabs later.

Implement and apply themes across app components using a theme context, updating movie and TV show cards, search bar, and content styling to reflect light and dark modes.

Configure the layout file to apply theming across the app, import material community icons, and define dynamic tab bar icons and screen options using react native paper themes.

Customize the layout by adjusting the tab bar tint, adding a search screen, hiding icons, and tuning header margins and fonts for the Cinequest movie and TV show trailer app.

Build an Instagram ui clone with React Native, implementing tab navigation, home, stories, posts, messages, and a bottom sheet, Expo Router, with like, bookmark, comments, and dark mode.

Install the expo project on your pc and explore the app structure, including assets, components, and constants folders, then reset to a previous expo version with npm run reset project.

Explore the basics of React, including component-based architecture, props, destructuring, and the useState hook, illustrated with reusable functional components and simple JSX examples.

Explore the basic React Native elements and styling, learn how useState works, and build interactive components with touchable elements, ScrollView, and SafeAreaView, using StyleSheet-based styling.

builds a tab layout with home and profile screens using a stack and expo router, setting tab options, icons, colors, and a lazy loading tab navigation structure.

Build a profile page with a navigation bar that links to a settings page, enabling back navigation, and set up the settings screen via router navigation in React Native.

Builds the setting UI with a back navigation to the profile page, a searchable settings list, and account sections like your account, security and personal details.

Create a setting UI with dark and light mode while exploring the context API theory, benefits, and using the useContext hook to implement global theme logic.

Build and apply a theme context with the context API to toggle light and dark modes, expose useTheme, and apply dynamic colors across the UI via a theme provider.

Complete the settings UI by finalizing account center text color, adding touchable items with icons like bookmark and activity, and including ad account and logout options with accent styling.

Create a themed home page navbar with clickable icons that navigate to messages and notifications routes, using the theme context for background, text, and accent colors.

Style the navbar and build the story component with a FlatList in React Native, rendering posts with image size and optional text, plus a layout for notifications and messages screens.

Develop the story component styling in React Native by using a style sheet to style the dot container, image, and text, and enable navigation through touchable opacity to details screen.

Build a messages page in React Native with a header including a back button and user name, a themed search input, and a horizontal list of messages.

Continue building and styling the messages component, including header styling, avatar images with image URL, user names, message previews with three dots, a flatlist of messages, and a camera action.

Build a post container in React Native using FlatList to render post cards from posts data, passing item and index to each card and using item.id as the key.

Build a post card image container with a horizontal image carousel, using FlatList and viewable item changes to track the current slide and show dynamic indicators when multiple images exist.

Build a post container in React Native by styling an icon bar with like and bookmark toggles using FontAwesome icons, and add a comments navigation flow.

Build a video container inside the post container by wiring a viewability config with a 50% threshold and a visible video index to track the video card.

Create a video container for the postcard in a React Native app using expo avi. Configure props, status handling, mute controls, play/pause logic, and looping for seamless playback.

Create a React Native profile page by wiring a header container with theme colors, a navbar, an avatar, posts, followers, following, bio, and a story component for the avatar.

Build a profile page in a React Native app by adding a highlight section, story items, icons, and a posts grid with FlatList, including active state logic and styling.

Learn to build a bottom sheet in React Native, opened by post options, offering save, remix, and QR scan actions with gesture handling and snap points.

Create and style a bottom sheet in React Native, customizing icons, text, colors, and pressable actions with flex layouts, themes, and multiple icon libraries.

Set up the React Native environment by installing Node and npm, verifying Git, installing Expo, and configuring the Android SDK and Android Studio for the emulator and apk builds.

Set up a React Native project with expo, create youtube_clone, install dependencies, and run on an Android emulator via Android Studio, using expo routing, icons, and expo go.

Build a tab layout in a React Native app and integrate TanStack Query with a query client provider. Implement routing with stacks and tabs for a home screen.

Set up expo icons for the app's bottom navigation tab, create a home tab with an icon, and style the tab bar with color, positioning, and header options.

Learn to finish the tabs layout in a React Native Expo app by configuring Expo icons, setting routes for home, shorts, subscriptions, and you, and resolving syntax errors during rebuilding.

Create and rename route screens for shorts, subscriptions, and you in a React Native project; convert pages to screens and reload the bundler to run on Android or iOS.

Design a React Native app with tab navigation, dynamic routes for channel and video pages, and a scalable folder structure, using TypeScript, axios, and YouTube API integration.

Discover how to obtain a YouTube Data API v3 key from Google Cloud Console, enable the API, and generate credentials for use with an exeos based API service.

Refactor the api layer to fetch video data and comments using endpoints with api key and base url from a file, with get requests, types, error handling, and env-ready setup.

Finish building api services by implementing an async fetcher with a url, parsing json data, handling data.error by throwing an error, addressing TypeScript issues, and returning the result.

Create a TypeScript value converter for YouTube view counts, turning numbers into k, m, or billion formats. Highlight input validation, base URL usage, and console logging for YouTube API data.

Design and define interfaces for YouTube video items, recommended videos, and channel data, including id, snippet, statistics, content details, thumbnails, and optional fields for type-safe data handling.

Define and validate interfaces for comments, comment responses, channel data, and shorts, with optional fields like text original, thumbnails, branding, and related playlists for type safety in React Native apps.

Finish building the short video interface types, including publishAt, channelId, title, description, thumbnail, channelTitle, tags, categoryId, live broadcast contents, localize, defaultLanguage, defaultAudioLanguage, and default thumbnail detail.

Build a universal usePetch hook with generic type T to fetch data from an API endpoint using ten stack query, with optional params and YouTube responses for React Native bootcamp.

Set up the home screen with infinite video fetching and scrolling using use infinite fetch, load videos into video cards with loading and error handling.

Implement a flat list backed by video data, render each item with a video card, and add an activity indicator and infinite scrolling with next-page loading.

Learn to style a video card in React Native, including the card layout, thumbnail, duration box, and a meta row with avatar, title, and subtitles.

Receive the video card item with TypeScript in a React Native app and navigate to the video page on press, displaying the video id, duration, and view counts.

Finish the video card ui by building a channel avatar button in React Native with TypeScript, routing to the channel page using channel id and uri, with a size 40.

Resolve expo environment variable setup in React Native by importing converters correctly, fixing channel avatar references, and using a constants file with process.env to hide API keys.

Update libraries with npm update, rebuild the server with env, and implement a dynamic video page with video id routing and styles for the video player screen.

Configure video height, history key, and history limit for local storage. Compute width from react native dimensions, extract id with local search param, and fetch snippet content detail and statistics.

Implement an add-to-history feature that saves watched video IDs to async storage, using use focus effect and use callback, with error handling and history limits.

Debug and configure a React Native YouTube player, fix common errors, set dimensions and controls, and wire recommended videos and comments with hooks.

Learn to build a status view component in React Native that manages loading and error states, with optional styles and a loading indicator, integrated into a video data flow.

Implement the use recommended videos hook to fetch channel data, manage loading and error states, and set a max result of 20 for recommended videos.

Develop a React Native comment section component, wiring panel button with a dynamic image URI and channel avatar, and implement a collapsible view that renders comment replies with styled images.

Build a collapsible comments section in React Native with a scroll view, loading indicator, no comments yet, then render comments with author details and replies.

Use the comments hook to fetch video comments by video ID with max results, build the endpoint, manage loading and error states, and map replies for each comment.

Complete the use comments hook by fetching and mapping comments, displaying author name and profile image, handling publisher, and managing loading and errors with useEffect.

Build the video player meta data UI in React Native with a scrollable meta section, showing video title, channel avatar, view count, and duration, plus expandable description.

Create a universal React Native hook to add videos to history, using async storage to read, update, trim to max history, and persist changes.

Debug and integrate history hook by fixing API id handling, adding videos to history, and ensuring loading and data checks for the home page with a video player and comments.

Style the channel screen by configuring layout.tsx, hiding the header, and building a banner, avatar, title, subtext, and description with a red subscribe button and off-white text.

Implement a hook to fetch channel data and videos in a React Native project, handling loading and error states and mapping video IDs into an uploads playlist.

Implement a loading state and error handling for the channel screen, and render the banner, avatar, and channel info with subscriber and video counts using a renderer and value converter.

Style the channel header with title, subtext, and description, add a subscribe button using touchable opacity, and render a video list with a flat list and header components.

Style the shorts screen in a React Native app by applying center alignment, a video info row with an avatar, and bold title plus gray channel and description typography, using flex and precise margins.

Explore building shorts screen in a React Native bootcamp 2025 course using useRef for the YouTube player, manage playing and loading states, and fetch videos by category with max results.

Build a custom hook to map data items into video objects for a shorts screen, using a YouTube player and a flat list in React Native.

Render and finish a React Native YouTube video player by wiring props, refs, and state (video id, width, height, playing index, mute, auto play) and styling for video info.

Develop and debug a React Native shorts feed, using flatlist, renderItem, and keyExtractor to display item title, channel title, and description with layout and scroll considerations.

Design and implement a universal React Native navbar by building a navbar component with styles, featuring a 60px height, 40px top margin, flex direction, logo, and a search area.

Implement a responsive navbar search input in a React Native app by toggling the search state, handling input focus, and navigating on submit to a trimmed query.

Debug the search input component by revising the layout with a navbar and touchable elements, wiring router.push to navigate home, and adding a YouTube icon from assets via require.

Finish the search results screen by wiring the fetch method with dependency injection, show a loading indicator, and handle errors with styled text.

Style the u screen by building a header with centered alignment and spaced content, add a red clear button with padding, and wrap the UI in a rounded card.

Build a use history hook to fetch saved history videos, manage loading and errors, and retrieve video details via an API using snippet and content details.

Build a React Native hook to manage stored video history by filtering video items, handling errors with try-catch, and enabling a clear history action via focus effect.

Create the you screen UI by loading history videos, show a loading indicator, provide a clear history button, and render a horizontal flat list using video IDs.

Finish wiring the you screen by rendering a video card from the extracted item, wrapped in a closeable card wrapper, and show a horizontal flat list of recommended videos.

Learn to build an Android APK from a React Native project using Expo EAS build, login, and cloud preview, then download and install the APK on a device.

Learn to configure and build for iOS, sign with Apple credentials, navigate admin approvals, and publish to the App Store from a React Native project using Expo client.