React Native Bootcamp: Beginner to Pro with Real Projects

Install the essentials for React Native development by setting up Node, watchman, and development tools on macOS, choosing between Expo and React Native CLI, and verifying npm and npx availability.

Install the Java Development Kit 11 and Android Studio, then configure the Android SDK, platforms, and system images via the SDK manager.

Configure the android sdk path by adding it to your environment variable and editing the appropriate profile (.bat, .bashrc, or .bash_profile). Verify the path is registered before starting React Native.

Verify Node and Watchman are ready. Check Ruby version, upgrade to the required 2.7 if needed, install the specified Ruby version globally, reopen the terminal, and continue.

Install Xcode from the Mac App Store, enable the Xcode command line tools, and verify the iOS simulator and CocoaPods Ruby setup for React Native development.

Validate your React Native setup by creating a test project with npx react-native init, install dependencies, and review iOS and Android native code and CocoaPods.

Build a travel app in React Native using CLI, with a JSON-driven attractions list, filters, image gallery, share to social apps, map view, and learn components, styling, and navigation.

Create a new React Native project via npx, explore the generated Android and iOS directories, node_modules and package.json, and understand the project structure from index.js to app.json and configs.

Open Android Studio, index the project, and configure local properties to locate the Android SDK; then run npx react-native run-android to initialize the Metro bundler and enable hot reloading.

Run an iOS app from Xcode using the workspace and port install, or from the terminal with npx react-native run-ios, showing simulators, Metro, and the lounge screen before JavaScript loads.

Create a simple screen using a plain function component and wrap content in SafeAreaView to prevent status bar overlap on iPhone ten and some Android devices.

Master efficient styling in React Native using StyleSheet.create for reusable, performant styles, compare inline and plain object approaches, and learn how style arrays and the last one wins affect overrides.

Enable ESLint in a React Native project to catch issues early. Install plugins and parsers, configure on-save linting, and apply consistent project rules.

Define the app structure in a source directory, build the first home screen as a separate component with a dedicated styles file, and learn basic React Native elements and exports.

Explore default and named exports in React Native, using curly-brace imports and alias imports to manage multiple components, styles, and constants.

Learn how props and state govern data flow in a component, including dynamic text with default props, cleaner access syntax, and reactivity when props update.

Explore component state by contrasting class components with functional components, and learn to declare and update state using the useState hook in React Native.

Learn how useEffect in functional components replaces class lifecycle methods by handling mount, update, and unmount with a dependencies array for selective updates.

Use React.memo to memorize a component, rendering it only when its props change, reducing updates in large apps. Choose PureComponent for class components to achieve the same shallow prop comparison.

Learn to use git and GitHub for version control, initialize a local repository with git init, push commits with messages, and manage history and ignored files.

Master git by staging changes with git add, committing with messages, and pushing to a remote origin, while managing main or master and using personal access tokens.

Explore remote commits on GitHub by pushing changes to the main branch, reviewing commits, and crafting clear commit messages while removing a class component and cleaning up code.

Learn how to manage React Native projects with multiple git branches, create and switch branches, push and merge changes, and use pull requests for code reviews.

Build a screen in React Native using a reusable title component with a text prop for two lines. Style font size 32, color, and margins; override with a style array.

Build a scrollable, selectable categories list in React Native using FlatList and horizontal layout. Create a responsive selected state with simple styling and mindfulness of performance by minimizing extra views.

Store the selected category state in the home screen, pass it to categories, and update it on category press to filter the items.

Build an attraction card component in React Native that displays an attraction image from a URL and a title prop, using window dimensions for responsive width.

Populate a react native list from a local JSON file by loading data into state and mapping it to cards with unique keys, using flat list for performance.

Learn how to implement FlatList in React Native, optimize scrolling, manage data and keys, handle headers and footers, and resolve nested scroll view issues for smooth, full-screen lists.

Enable category filtering on the home screen by loading categories from a JSON file and filtering data when a category is selected, with a no items found message.

Explore using React Navigation for React Native app navigation, compare top navigation and drawer navigation, assess maintenance, documentation, and installation options to guide library choice.

Install the react navigation native package with yarn or npm, wrap the app in a navigation container, and implement a stack navigator with home, attraction details, and gallery screens.

Hide the header across screens in a React Native app by using screen options or per-screen options of the Stock Navigator, then set headerShown to false.

Learn to navigate between screens using the navigation prop or the useNavigation hook, wiring onPress with touchable opacity to the destination screen's root name.

Learn how to pass an item object as a navigation parameter to a screen and display its name from route data, while defaulting to an empty object to avoid crashes.

Use the navigation prop on back events to go back, always pass an empty argument, avoid unnecessary on press event data, and improve performance by defining handlers outside inline functions.

Use image background to build a details screen banner in React Native, selecting the main image from an images array and sizing it to full width and half screen height.

Build a header with locally sourced icons and a footer image row inside an image background, using flex layouts, margins, and opacity to create a polished interactive user interface.

Click footer to navigate to the gallery via a navigation function that displays all images, while tuning the view with a yellow background and a black overlay at 0.3 opacity.

Limit the display to five images and show a plus five indicator for any additional images; slice the array, map safely, and navigate to the gallery on click.

Build a detailed attraction view in React Native by exporting icons, arranging a header and text containers, and applying a reusable title component to display the title, city, and price.

Create a reusable info card component in React Native that renders text and image from a prop, includes an icon, and supports a two-line opening hours display.

Control the app theme in React Native by applying a navigation container theme, set a white background, and ensure icons remain visible with adjusted spacing.

Build a gallery screen in React Native by rendering a flat list of images from params, styling each image, adding a back button, and preparing for share and map features.

Identify what makes a library native and how native code integrates with Android and iOS. Choose and evaluate native libraries for mobs and sharing, using installation docs and Android/iOS indicators.

Install the maps package for the travel app, choose Google Maps or native maps, add iOS and Android API keys, and update AppDelegate and manifest.

Obtain a Google Maps API key for Android and iOS by creating a project, enabling Maps SDK for Android and Maps SDK for iOS, and testing the generated key.

Learn how to add a map to the attraction details screen in React Native, import map view and marker, and style the map with 100% width and height and coordinates.

Show a marker on a React Native map using item coordinates (lat and lon), adjust zoom with latitude and longitude deltas, and validate locations such as the Taj Mahal.

Create a full-screen map view with React Native Maps, navigate from attraction details, and show item name and city in a header with a back button.

Run the Android project to check maps on Android and verify the map renders with markers. Customize marker appearances using the marker component API for further styling and personalization.

Explore two share options in React Native: a popular community package with expanded capabilities and the built-in share component for simple text sharing, plus installation steps.

Learn to install the share package with yarn in a React Native app, configure Android permissions in the manifest, and rely on automatic linking for cross-platform sharing.

Learn to share base64-encoded images in React Native by converting image URLs to base64, using async/await and try/catch, and testing on real devices.

Extract the image extension from a URL by removing query parameters, splitting on the dot, and defaulting to jpeg.

Build a portfolio app that fetches attractions from a local JSON and filters by categories. Show a main image, a gallery, a map with a larger view, and native sharing.

Explore building a recipe app using an external rest api, pass data with React context across screens, reuse components, and compare X Pro with React Native CLI to decide setup.

Compare expo and react native cli to decide when expo offers quick setup, QR code sharing, and over-the-air updates, versus native package challenges in cli workflows.

Install Expo globally, create a recipes app, and review the generated code and Expo configuration. Note Expo's web support, and that native files are not accessible, limiting native library integration.

Learn expo config customization by changing the app name, icon, and splash, replacing assets, configuring split screen, and installing packages, then compare expo and react native workflows.

Build a React Native splash screen and a reusable button, using local assets, image backgrounds, and a modular structure of screens, components, and color constants.

Create a two-part screen layout in React Native with flex styling, duplicating views or using an image background, while externalizing styles and tuning padding, spacing, and typography.

Install the react navigation package, set up a stack navigator, and wire a button to navigate from the splash screen to the home screen using expo.

Fix splash screen UI by removing the width constraint and using align self to center content, then increase vertical padding to 60 for better top and bottom spacing and navigation.

Customize the navigation header in React Native by centering the title across Android and iOS, removing the home back button, and disabling back gestures via headerLeft and gestureEnabled.

Design a custom back icon for a React Native app, wire it into the header left, and enable navigation to the search screen with a back action.

Change the app theme globally by updating React navigation's default theme, setting colors.background to white via the navigation container, and removing the header border with header shadow visible false.

Develop a reusable input component in React Native that supports two modes—a navigable search trigger and a tappable input—complete with icon export, placeholder props, and styling.

Implement a pressable input that navigates to the search screen when pressed, making the whole area clickable, and refine spacing with horizontal padding to achieve a clean search UI.

Reuse two React Native components from another project—title and categories—by copying them into components, adapting colors, font sizes, and spacing, and preserving the logic for future reuse.

Create a reusable React Native recipe card with image, title, author, and duration props; implement a circular image, shadow styling, and responsive width for the home screen.

Add a circle recipe image to the card and a title row, tune flex one and widths, position the image above the border with margins, and include rating.

Build a five-star rating component in a React Native app that uses full or empty stars, no half stars, with rounding to map rating to filled stars in a row.

Show this component in a horizontally scrolling flat list with hardcoded data, render each item as a recipe card, adjust margins and padding for spacing, and hide the scroll indicator.

Create a simple card component in a React Native project by using title, duration, and image props, adjust background, spacing, and alignment, and refine text styling for a polished UI.