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.

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.

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.

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 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.

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.

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.

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.

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.

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 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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.

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.