React Native by Projects: From Basics to Pro

Set up your development environment for React Native, noting Mac requires Xcode and Cocoapods for iOS; Windows cannot create iOS apps. Consult the documentation; installation processes may change.

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.

Discover how to set up a React Native environment with Expo or a native CLI, including Node.js, macOS, Windows, Linux differences, and Android Studio or Xcode.

Install node.js on mac by downloading the lts from nodejs.org, run the installer, enter password, and verify node -v, npm -v, and npx in the terminal.

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.

Create a new Expo app using Expo CLI, then start the project with npm start or npx expo start, and run it on devices via the Expo Go QR code.

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.

Install VS Code on mac, download and unzip, drag to applications, grant permissions, select dark theme, pin to dock, and open a project by dragging its folder into VS Code.

Install and configure VS Code on Windows, then open folders or projects in VS Code using open with code, drag and drop, or the terminal with code period.

Edit the default app by updating the welcome text in index.tsx and see instant changes via watchman, while learning to run with Expo CLI and explore React Native CLI setup.

Set up the macOS environment for React Native CLI by installing node, watchman, JDK (Zulu), Android Studio, and Xcode, and configure Java home.

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

Launch and customize the Android emulator on Mac using a pre-added virtual device, then run a command to open it quickly for React Native development.

Install and configure Xcode on macOS via the Mac App Store, sign in, set up command line tools and iOS simulator components, then prepare for Cocoapods.

Learn how to install CocoaPods by managing ruby versions with rbenv, upgrading to ruby 2.7+, and resolving terminal issues to set up a React Native project.

Set up the Windows environment for React Native using the React Native CLI, installing the JDK and Android Studio with a compatible Oracle JDK to minimize Gradle changes.

Install android studio on Windows, include android virtual device, set up Android SDK and environment variables, and launch the Android emulator for React Native development.

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.

Explore the fundamentals of React for building native apps, focusing on components, JSX, props, and state, and learn how React DOM uses the virtual DOM.

Learn to build reusable components in React Native by crafting a post card with image, name, and message using props, wrappers, and conditional rendering, plus basic styling options.

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

Discover why TypeScript matters, using type inference, explicit types, and null safety to prevent JavaScript errors. Learn to install, compile with tsc, and leverage official docs and the handbook.

Learn to create and customize tsconfig.json to configure TypeScript compilation, including target ES6, module common JS, strict true, no implicit any, and dist output.

Learn how TypeScript defines types with colon syntax and type inference, using let and const for reassignment, and explore primitive types like string, number, boolean, undefined, and null.

Define a type alias post in TypeScript to model a blog post with required title and body, optional meta and thumbnail, and create an array of posts.

Learn how to use TypeScript interfaces to define reusable user types, extend base interfaces for users and admins, and manage posts and favorites with optional properties.

Learn how the any and never types in TypeScript affect type checking, why any is dangerous, and how to use never for functions that never return.

Learn to define typed functions in TypeScript, specifying parameters and return types, avoid any, compare arrow versus older function syntax, and follow a build and run workflow.

Learn how generics in TypeScript create reusable, customizable types with generic type parameters like T; apply them to API fetches returning users or posts using async/await and interfaces.

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.

Set up the first React Native project to build a calculator app using the React Native CLI, configure cocoapods, install dependencies, and run on iOS or Android with dev tools.

Explore core React Native components and APIs by using the button, passing title and color props, handling onPress, and noting Android vs iOS rendering.

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.

Install code spell checker, auto rename tag, and es7 react redux graphql react native snippets to speed your workflow with shortcuts like console.log and rfc.

Learn to implement touchable components in React Native, including touchable highlight, touchable opacity, and touchable without feedback, plus pressable for cross-platform press handling.

Learn how to style React Native components with CSS-like properties using the style prop, covering colors, borders, font size, and iOS vs Android nuances.

Learn how flexbox is the default layout system in React Native, build styles with style sheet and styleSheet.create, and control alignment using flex direction and centering properties.

Create a separate calculator button component and define its props with TypeScript, including title and onPress, using an FC and optional props.

Explore typing props in a functional component with TypeScript, using custom function interfaces to define param shapes and return types, including varying and optional params.

discover how to add custom snippets in VS Code to speed up creating React Native TypeScript functional components, including defining props, using a style sheet, and exporting default components.

Divide the app vertically into a result area and a buttons area using flex. Use flex one to allocate the entire available height and adjust padding for iOS and Android.

Master a React Native calculator UI by using the dimensions API to compute screen width, set button width, and implement flex wrap for a responsive grid.

Learn how to render multiple calculator buttons in React by mapping an array of strings, using unique keys for each item, and understanding the map method.

Create a calculator ui in react native by styling border width, border color, radii, and gaps, using flexbox and padding to achieve a wide zero and an equal button.

Style the result area in React Native by rendering calculation and result text, then tune alignment with flex-end, justify-content, padding, and font styles for iOS and Android.

Master handling button touch events in a React Native app, manage input as state, and render calculations and results while debugging layout with flex and container constraints.

Fix a common Android emulator bug by wiping data, factory resetting the virtual device, and reinstalling the app to ensure the buttons work.

Create a handle on remove function for the delete button to remove last item from the array, then reset the calculation with a useState-driven reset to re-render the user interface.

Leverage ai to write code by building an expression evaluator for a calculator app. Master dot handling and decimal input on button press, refining logic with prompts.

Develop the evaluate expression logic in a calculator app using a stack to handle plus, minus, multiplication, and division, with parseFloat numbers and a final reduce to compute the result.

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.

learn to add a custom font to a React Native project by downloading a font from Google Fonts, configuring assets/fonts, and applying the font family in code.

Learn how APIs enable front-end apps to talk to remote databases, handle login and signup, check subscriptions, and drive the UI.

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.

List available iOS simulators using the Xcode command, select the iPhone 16, and run your app with npx react-native run-ios --simulator 'iPhone 16'. Create Android emulators in Android Studio.

Create a login screen in a React Native app by implementing an email input with a labeled text input inside a safe area view, and outline sign-up navigation.

Create a reusable form input component in a components folder. Extend its props with TypeScript to support label, placeholder, onChange, and secure text entry, including rest props.

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 build a reusable primary button in react native using pressable, a configurable title, on press handling, and adaptable styling, including padding, color, border radius, and design system concepts.

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.

Explore using the stack navigator to manage authentication screens in React Native, with sign in and sign up, and navigate via useNavigation.

Learn how to enforce navigation type safety in a React Native app by configuring useNavigation with TypeScript, defining a stack param list, and passing screens reliably.

Change the app theme in the React Native by Projects course by implementing a dedicated auth navigator, applying a custom theme, and tweaking background colors and dark mode.

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.

Explore how useEffect drives a countdown in a React Native authentication screen, using dependencies and interval to enable the otp button after a delay. It covers cleanup and timer control.

Send a signup post request to your API with axios, handle signup submission, validate data, and catch 422 errors; log the API response data.

Render and handle errors in a React Native signup form by using a typed errors state, mapping error messages to inputs, and processing API error responses.

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.

Build a robust sign in flow by creating a base URL API client, posting email and password, handling errors, and retrieving a token for future requests.

Navigate to the home screen after sign in and display the profile name and email using typed navigation props.

Sign in returns an API token, enabling authenticated tasks, and demonstrates storing the token in local storage for persistence across reloads.

Learn to persist an auth token with react native async storage: install, iOS pod install, set/get item, read token with useEffect, and route between sign-in and home screens.

Install and configure the bottom tab navigator in a React Native app, using the static approach and login-based conditional rendering with stack navigators for smooth transitions.

Learn to set up a bottom tab navigator in React Native, define home, cart, profile, and favorite screens, and customize icons and tab bar options.

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.

import Ant Design icons into the tab navigator, use home, cart, and heart icons, adjust size and color, and gate the navigator by token and async storage.

Create a React Native auth context with the context API, build an auth provider with isAuth state, and render the tab navigator when authenticated, otherwise render the auth navigator.

Create a custom hook called use auth to simplify accessing the auth context inside the provider and export it for easy use.

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 a pending UI by managing a busy state during API requests, display a loading screen, and render the app navigator once authentication status resolves.

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.

Learn to render a list of products with FlatList in React Native, using renderItem and keyExtractor to map ids, titles, descriptions, and poster images from Unsplash, vertical or horizontal.

Learn to render posters in React Native by loading images from local sources with require or from remote URIs, and apply width and height for network images.

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.

Render a horizontal category selector in React Native using FlatList to display categories fetched from the product/categories endpoint, with a reusable category list component and type-safe generics.

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.

Learn to fetch products by category in a React Native app, including an all option, track the active category with state, and render category-specific results using a category-based API call.

Learn to use the React Native flat list's list empty component to render a custom empty state when data is absent, with styling and category-based data fetching.

Explore React Native flatlist item separators by passing a separator function and styling a view with height, color, margins, and centered width, while removing the card background.

Learn to build nested navigators in a React Native app, wiring a home stack to a single product details screen inside a tab navigator, and navigate from a product card.

Learn to fetch product details by passing a product ID to a single product page, using useEffect and client.get, and fix a nested navigator warning.

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.

Track FlatList viewable items to determine the active scroll index using on viewable item change with a 50% threshold, and useRef to update the current slide index.

Learn how the useRef hook preserves a stable function reference across renders, preventing re-creation of onViewableItemsChanged and viewability config changes in a FlatList in React Native.

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.

Learn to implement a cart provider using context API in React, tracking cart items, updating counts, removing items, and calculating total price across multiple UI views.

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.

Compute the cart item count with reduce and render a dynamic tab bar badge that updates as items are added or removed, using a cart context and the useEffect hook.

Render the cart page in React Native by mapping items with a flat list from the cart context, displaying product images, titles, prices, and quantity controls, with a total.

Multiply each cart item's quantity by its sale price, sum to total, format the price, and remove items when count <= 0 to trigger re-renders in the user interface.

Remove items in a React Native cart by filtering with product id, keeping items when IDs don't match and removing when they do; add a clear cart button.

Implement a clear cart button on the cart page, style the total text wrapper, and wire the action to the cart provider to empty the cart.

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.

Render a two-column favorites page in React Native using FlatList, displaying product images, titles, and prices, with a remove-from-favorites action powered by the use favorite hook.

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.

Navigate from a favorite space to a single product page in React Native by building a favorite stack, passing product IDs, and aligning types for smooth navigation.

Implement a favorite feature in a React Native app by updating the favorite provider, creating an ease fab function, and toggling the heart icon color based on is favorite state.

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.

Enable profile image uploads and store them in the server’s images folder, rendering the profile image when present or a user icon when absent, with a pressable image picker.

Learn to install and configure the React Native image picker to select images from a device, while handling iOS pod install, Android permissions, and platform-specific setup.

Learn to select a photo with the React Native image picker by opening the image library, handling permissions, and logging results for API-based profile image updates.

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.

update the user profile image by uploading a new image and calling update profile in the auth provider, then refresh to see the new image reflected in the ui.

Set up a new React Native project using the official commands, install dependencies and CocoaPods, and run on iOS and Android emulators.

explains how to use Android virtual devices with different API levels and apply safe area view across iOS and Android, addressing status bar concerns.

Build a custom safe area view to fix status bar padding across Android versions, and create a reusable page component that renders children with version-based padding using status bar height.

Create a helper to ease Android full screen mode in React Native, organize under utils, and fix padding with an inner container for the home page in the next video.

Demonstrates building two home pages for fresh and returning users in a React Native app, including a home component, first-visit widget, and a dark themed interface with a hero image.

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.

Build the home page first-visit user interface in React Native with pressable buttons, icons, and text, apply reusable button styles, and prepare image capture and select flows using multiple packages.

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.

Learn to implement Android permissions in React Native by building a permission module that requests image read/write and camera access, handling API level differences and never-ask scenarios.

Explore handling Android permissions in React Native by tracking permission status with valid and never ask again flags, and managing denied scenarios to decide when to prompt.

Learn to use the React Native alert API to notify users and trigger actions on Android and iOS. Understand alert vs prompt, button configurations, and platform-specific behavior.

Master rendering and controlling a React Native modal: manage visibility with state, tailor animation types (fade, slide), and handle platform nuances (status bar, translucent navigation) for iOS and Android.

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.

Develop a never ask permission alert in a React Native app, rendering a modal with permissions and a reusable bullet list component using TypeScript generics.

Implement a two-button permission alert in React Native using pressable buttons labeled cancel and open settings, with customizable props, visibility controls, and a reusable button style and layout.

Leverage the React Native linking API to open device settings and manage never-ask and ask-permission-again states, implementing open settings versus prompt flows for permissions.

Learn how to handle camera permissions in React Native on Android and iOS, trigger permission prompts via capture, test allow and don't allow flows, and prepare for opening the camera.

Configure iOS permissions in a React Native image picker by adding photo library and camera usage descriptions to Info.plist, and test on a device since the simulator lacks a camera.

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.

Install and switch to the latest react native fs library to save images from URIs. Learn to implement code that saves images to device assets on iOS, including pod install.

Save an image to iOS and Android using a TypeScript file handler, ensure the document directory exists, generate a unique file name, and copy from URI with error handling.

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.

Scan and read saved images on iOS and Android using a useEffect-driven approach, build a get local images function to list files, and render them in a React Native app.

Render images from device storage by maintaining a local images state and mapping over the array to display each image by its path, enabling image selection and capture.

Explore loading UI patterns in a React Native project by managing first visit and ready states, rendering a loading screen or image grid based on local images.

Implement a grid view in React Native by using a FlatList with data and renderItem, a generic type, and container width to size items and manage gaps across columns.

Render images in a React Native app with an image component using item.path URIs and container styles, then add a bottom plus button with pressable and icon to select images.

Learn to implement long-press image options in React Native by rendering a reusable image options modal with pressable actions for delete and edit, including a confirm step for delete.

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.

Implement confirm delete flows in React Native by toggling state on image remove, showing image options or confirm modal, and addressing cross-platform behavior with timeouts and animation settings.

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.

Install and configure React Native packages—React Navigation, native stack, Skia, Reanimated, and Babel and Metro updates. Run pod install, update Android SDK, set up gesture handler for iOS and Android.

Set up a stack navigator for a React Native app, add home and editing canvas screens, pass the image prop to editing canvas, and manage header visibility to verify navigation.

Create a handle after image selection to process the image picker response and navigate to the editing canvas with the image URI.

Render images in a React Native Skia canvas, edit with layered groups, set width and height, use the useImages hook, and save the edited image to the file system.

Learn to save an image from a canvas in React Native Skia by using make image snapshot with a canvas ref and export the base64 image to the device.

Learn to save a base64 image to Android and iOS in a React Native app by writing with React Native FS, generating a unique file name, and handling platform specifics.

Save the image to iOS by writing to the React Native file system cache, checking existence, and copying to the camera roll using a camera roll package.

Save images with the camera roll save assets function on Android, comparing picture and cache directories to ensure visibility in the gallery without harming user experience.

Learn to size a responsive canvas and image across devices, using padding, window width, centering the canvas, and building a header with a close icon and back navigation.

Calculate image size for screen within a canvas by computing the scale as the minimum of width fit and height fit, yielding width, height, and scale for responsive rendering.

Learn how to install and configure react native vector icons, add material icons, update info.plist for ios, run pod install, and start app with npm start and npm run ios.

Explore image edit options in a React Native project by rendering crop, contrast, brightness, and filter tools with material icons, wired to a pressable tool grid and responsive styling.

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.

Showcases the image cropper header ui by building a reusable app button with pressable behavior and styling a header container to host two buttons.

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.

Explore default image crop options by rendering aspect ratios such as original, free, 1:1, 16:9, and 9:16, and build tappable crop style buttons with a centered footer.

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

Build a resize handle component for a crop tool in React Native, with base styles, side-specific styles, and handle types. Align the top-center handle using absolute positioning and transform.

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.

Learn to set up React Native gesture handler with React Native Reanimated, using the gesture detector to handle pan, tap, long press, and other gestures via animated views.

Apply gesture events to a box and log begin, start, change, end, and finalize; learn how UI thread and JS thread handle gestures with React Native gesture handler and Reanimated.

Render a Pressable button that moves a box along the x axis using React Native Reanimated. Use useSharedValue and useAnimatedStyle to animate translateX with timing or spring and handle gestures.

learn to drag a box with pan gestures using a gesture detector, update translation x and y from previous values, and apply animated styles inside a gesture root view.

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.

Lock or unlock crop box aspect ratios using gestures and reanimated values. Manage 1:1, 16:9, and 9:16 ratios with width and height adjustments.

Debug and fix crop box height in a React Native app by adjusting width with aspect ratio calculations, using height fit and width fit for 16:9 and 9:16 ratios.

Apply the original aspect ratio by using the image’s actual size to compute width-to-height ratio and lock the aspect ratio during resizing.

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.

Resize images by tracking the active corner and adjusting width and height via a resize handle using a gesture detector with pan, on start and on end.

Learn how cropping works in a React Native project by adjusting the crop box with x, y, left, top, width, and height, using handles and gestures.

Implement a free crop gesture that updates the crop box from any corner in eight directions with five aspect ratios, computing new x, y, width, and height from start values.

Refactor clamp logic into separate place and implement a reusable function to bound x, y, width, height in a crop tool, with min/max limits using a worklet on ui thread.

Learn to manage actual ratios in a React Native app by implementing a locked aspect ratio, calculating width and height from 16:9 or 9:16, and updating the ratio accordingly.

Log the aspect ratio by adjusting delta y, clamp the height, and compute the width from the aspect ratio to lock a 16:9 or 9:16 crop box.

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.

Perform a top center crop by updating the crop box’s y and height from start values and translation, then clamp to min/max crop sizes and handle aspect ratios.

Lock the crop box aspect ratio by computing clamped height and width with the start height, translation y, and 16:9 constraint, then apply and test sizes.

Address image height constraints by setting the maximum width and deriving the maximum height from aspect ratio to fit a 16:9 image, preventing height issues.

Learn how to implement a top-right free ratio crop in React Native, updating width, height, and position with clamped limits and a locked aspect ratio.

Learn to implement top-right dragging with a locked aspect ratio in React Native by Projects: From Basics to Pro, calculating delta width and clamping crop box height to maintain ratio.

Implement right center crop with free and fixed ratios, compute width from translation, clamp to min and max, derive height from aspect ratio, and test 16:9 and 1:1.

Fix a right center crop by using a clamped width and a computed height based on aspect ratio, then clamp to the maximum height to keep the crop within bounds.

Handle the bottom right crop with free ratio by calculating new width and height from start values and translations, then clamp to min crop size and max width and height.

Learn how TypeScript adds types to JavaScript, enabling static checks and safer, bug-free code, while compiling to JavaScript.

Set up a TypeScript environment by installing Node.js, then install TypeScript globally with npm, compile a Hello.ts file, and explore basic typing.

Explore primitive and object types in JavaScript, including string, number, boolean, undefined, symbol, and null, and how type annotations in TypeScript apply to variables and objects.

Explore TypeScript type inference by seeing how primitive and object types are inferred for variables like username and new user; learn how const affects reassignment and when to define types.

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 object and array types in TypeScript, outlining a user with name, age, married, and a hobbies string array, then create a users array with a reusable type alias.

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.

Explore TypeScript functions from basics to advanced, defining parameters with number and string types, returning values, handling void, and using arrow and traditional function syntax through practical examples.

Explore TypeScript interfaces by defining a player interface with current song and length, function types for play next and play previous, then implement it in a class.

Explore generic types in TypeScript, showing how a function accepts and returns a chosen type via a type parameter. See generics with strings and a custom Song interface.

Learn what the any type does in TypeScript, why it disables type checking and can cause runtime errors, and how to replace any with generics and safer types.

A friend’s frustration with uploading passport-size images under 20 kb and quality loss inspired a project to fix image size and quality for portals and schools.

Design a simple two-screen flow: capture or select an image, then edit and resize it with a slider and size display, and save to the device, planning in Figma.

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.

Set up a Windows environment for react native cli by installing Node.js, Java JDK 11, Android Studio with virtual device, and configuring Android SDK paths and environment variables.

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.

Fix a non-responsive UI by wiping the emulator data, restarting Android Studio, and re-running the build.

Run your React Native project directly on a real Android device by enabling developer options and USB debugging, then connect via USB and install the app.