React Native by Projects: From Basics to Pro

Understand what React Native is and how it enables writing code once to run on Android, iOS, desktop, and browser using React primitives, with Expo CLI.

Install Node.js on Windows by checking node -v in a terminal or command prompt; download the LTS version, run the Windows installer, and verify with node -v and npm.

Learn to fix expo errors on macOS by installing Watchman with homebrew, enabling Watchman to monitor project files for changes, and starting expo to run the app.

Set up Android Studio on Mac, install SDK and build tools, configure Android home and environment paths, and prepare a virtual device for testing.

Set up the environment and create a brand-new React Native app with the CLI, install dependencies, and run on iOS or Android using npm run iOS or npm run Android.

On Mac, fix a code command not found by installing the code command in path in VS Code, then use code . to open the current folder in VS Code.

Learn to manage interactive UI with React using useState to track button state, handle click events, and pass state via props, respecting className conventions.

Build your React Native project, applying React and TypeScript, configure VSCode extensions, explore touchable components and flexbox styling, create custom components, render lists with map, and learn interfaces with generics.

Learn to format code in vscode by installing the prettier extension, configuring format settings, and enabling format on save to keep JavaScript and TypeScript files consistently tidy.

Fix issues in the calculator app by replacing a trailing operator with the new one, ensuring reset clears to zero, and correcting dot handling after operators.

Initialize a brand new React Native project with the CLI, name the app GN ecom, and launch it in the iOS simulator while managing watchman issues and device options.

Learn text input props in React Native, including autoCapitalize none and keyword types like email and number pad. Build form interactions with onChange and a submit button for API integration.

Learn to capture input in React Native with onChange and onChangeText, manage sign-in data as an email/password object with useState, and prepare data for API submission.

Styling a sign-in form in a React Native app, render a title and subtitle with centered alignment, padding, and font choices; emphasize reusable components and signup navigation.

Discover how to build a sign up page in React Native using a reusable form container, with children, button title, on submit, and navigation link props.

Master React Native navigation with React Navigation's stack navigator, including installing native dependencies, handling Expo versus bare workflows, and configuring Android and iOS for a seamless app flow.

Compare Fetch API and Axios for fetching data in a React Native app, using get requests, handling JSON responses, and switching from localhost to the server IP.

guard against undefined response data and log errors to the console. render an error message for email already exists in signup with font size control.

Install react-native-vector-icons to add icons from providers like Font Awesome, set up for Expo or React Native CLI, and update iOS Info.plist during installation.

Fetch a user profile by token in a React Native app by calling the auth endpoint with a bearer token, and manage isAuth and profile (name, email) with simulated latency.

Implement signup and login flows in a React Native app, manage auth state with context, store tokens in async storage, and enable logout with a tab navigator.

Fetch and render products from a backend API using React Native, useEffect, axios Get, and useState, then implement scrolling with ScrollView and preview Flatlist for performance.

Demonstrates how to customize React Native apps by removing headers, applying safe area view, and theming across navigators, then builds a responsive product card with aspect ratio images, padding, and styling.

Style and format prices in a React Native e-commerce card, using a price container for MRP and sale price, with JavaScript international number format for USD.

Build a reusable category button component with a label and optional on press, applying common and active styles to reflect selection and enable category-based product fetching.

Fetch product details, define a product detail type, and render the product title, description, bullet points, and images using useState and conditional checks, with basic styling.

Build a horizontal image slider in React Native using FlatList and ScrollView, rendering remote images with proper width and height, with paging and active-image transform.

Fix UI issues by changing image resize mode to cover for cross-platform consistency, and manage fetching products with useState and a finally block to show loading instead of empty message.

Add price and action buttons to a React Native product page, including buy now, add to cart, and add to favorite, plus a formatted price component and bullet-point features.

designs a cart context in React Native to manage cart items with useState, implementing update, remove, clear, and count functions, and wiring a dynamic tab badge.

Build a favorite context to toggle items in a favorites list, updating an items array and rendering favorites across screens with a simple add or remove flow.

Create a favorite button in React Native using a pressable heart, placed absolute at the top-right of a relative product container, and update the favorite context on press.

Style a React Native profile page with a resources banner and a circular overlapping profile image. Display the user name from auth and a centered logout button.

Upload a user profile image to the backend by building multipart form data, attaching the image asset, and posting it with a bearer token to the auth/profile as image endpoint.

Create an app text component with text props to render a title and subtitle in the bottom UI, and build a layout with spacing and image picking and capture buttons.

Install and configure React Native vector icons by selecting a provider, installing the package, updating Info.plist, running pod install, and importing icons for iOS and Android.

Learn to integrate the React Native image picker package, install and configure it for Android and iOS, and handle permissions for camera and image selection.

Learn how to implement Android permissions for media capture in React Native, including camera access and read external storage. Update AndroidManifest.xml and handle version-specific permission changes across Android versions.

Build a reusable custom modal component for React Native with an overlay, adjustable background color, optional transparency, and fade animation; implement show/hide and close-on-outside press.

Learn to select or capture images in a React Native app and save them locally on Android and iOS, handling platform differences and MediaStore visibility to preserve user progress.

Create an Android local image directory using the React Native file system external directory path, and make a pictures folder to save files with a unique file name.

Learn to save selected photos to a device’s local directory in React Native by selecting assets, handling asset.uri, and verifying saved files on Android and iOS.

Create a delete confirm modal component with a title and two actions, cancel and confirm, featuring customizable button titles and on-press handlers to hide the modal or remove the image.

Learn to remove image files in React Native apps using the file system unlink, with async handling, error catching, and UI updates via selected image state and local file scanning.

Tap crop icons to navigate to the image cropper page, built in an image-cropper module with an index.tsx component; pass the image source via navigation params and handle crop tasks.

Render a React Native image by using a URI as the source, compute container size from screen dimensions, and center the image for cropping on the editing canvas.

Learn to render a crop box around an image in the image container using absolute positioning, full width/height, and handles at the corners.

Discover how to build a crop box with right center, top center, and other handles in React Native, using top/left/right/bottom positioning, borders, and translate transforms.

Build a selector active style for a React Native image cropper by implementing aspect ratio buttons (original, free, 1:1, 16:9, 9:16), managing active state, and styling presses.

Explore how a crop box works in React Native by dragging handles to update x, y, width, and height, starting from the top-left corner, guiding the crop animation.

fix known issues inside the app by adjusting aspect ratio handling in the image cropper, ensuring the crop box respects minimum size and locks the aspect ratio during gestures.

Explore TypeScript basic data types by defining string and number variables, using union types to allow multiple data types, and compiling to JavaScript with node execution and console logging.

Define a reusable user type with the type keyword and extract it separately. Make the gender field optional and see how missing fields trigger errors until compilation succeeds.

Design a two-screen mobile app in Figma, creating a home screen with camera and folder buttons, an image editor with select or capture, a size slider, and passport-size photo workflow.

Install Android Studio and Node.js, initialize a new React Native project named my first app, then run it on an Android emulator, and troubleshoot long builds and UI not responding.