Full Stack React Native: Advanced & Practical Projects

Refactor signup error handling by introducing a reusable helper to send error responses, centralizing status codes and messages for consistent Express responses.

Learn to automate error handling in an Express.js app by validating user input, implementing async/await with try/catch, and using express-async-errors to centralize error responses.

Apply the yep validator for data validation in a full stack React Native app, define a new user schema, implement a validate middleware, and return 422 error responses.

Learn to implement email verification by creating a verify page that reads id and token, then call the backend verify email endpoint to validate and verify the user.

Create a custom validator in the validation schema using mongoose isValidObjectId to validate the user id and apply it in the verify route with a specific invalid user id message.

Explain the sign in flow with refresh token rotation: validate email and password, issue access and refresh tokens, store refresh tokens, and rotate on refresh to strengthen security.

Learn to verify access tokens in a full stack react native app by implementing an ease auth middleware, parsing bearer tokens from the authorization header, and protecting private tasks.

Extend the express request type by declaring a global namespace and adding a user object with id, name, email, and verified to fix auth middleware typing.

read id and token from the url, then post a verification request to /auth/verify using fetch with a json body, and manage success or error responses in plain javascript.

Regenerate verification tokens for authenticated users by removing old tokens, creating a new token with crypto random bytes, and sending a verification link via email using a reusable mail utility.

Explore secure token-based authentication with a refresh token flow. Rotate single-use refresh tokens to regenerate new 15-minute access tokens and protect a user across devices if tokens are compromised.

Implement a post sign-out route using easy auth middleware that authenticates the user, removes the refresh token from their tokens, updates the user, and returns a response.

Learn to create new products by destructuring request data, choosing between model create or a constructor, then validate and upload single or multiple images with mime-type checks and error handling.

Explore uploading multiple images with Cloudinary in a full stack React Native app, including image resizing to 1280x720, crop fill, thumbnail creation, and integrating uploads into new product creation.

Validate dates in react native apps by using date fgn's for parsing ISO strings, plus regex validation, and handle errors with try-catch to return an empty string when invalid.

Update a product securely with authentication, validate data, handle image uploads and thumbnail updates, and enforce image limits up to five in a full stack react native project.

Implement a delete route that authenticates the user, validates the product id, deletes the product if owned, and removes its cloud images via the cloud api.

Learn to build a delete single image route for a product, authenticating users, validating product id, removing the image from the database and cloud storage, and updating the thumbnail.

Implement a get product details endpoint by validating id, fetching and populating seller data, and returning a formatted response with images, avatar, and fields, with authentication aligned to the app.

Learn to implement a get products by category endpoint, including route setup, image thumbnail handling, optional authentication, category validation, and pagination strategies for scalable product listings.

Finish the latest and listings routes with optional authentication, fetch latest products sorted by date, limit to ten, format data with images and seller details, and implement pagination.

Learn to set up an expo cli project with npx create expo app, including TypeScript. Run it on iOS or Android using expo go over a shared Wi-Fi.

read the official React Native documentation at react-native.dev to learn how core and native components map across Android, iOS, and web, with examples and required props.

Render React Native screens by building a sign-in page in a TypeScript project, configuring views, components, and styles, and running the app on the iOS simulator.

Create a sign-in page in React Native using local assets, the image component, and resize mode, with safe area and platform-aware padding.

Refactor a reusable welcome header in a React Native TypeScript app by creating a UI header component, applying heading and subheading styles, and centralizing the primary color theme.

Style input fields for active and focus states using useState, toggling between border active and border inactive on focus and blur, with color updates for email and password fields.

Build a reusable app button in React Native with TypeScript, using the Pressable component, a customizable title and active state, and an onPress handler to render consistent styling across devices.

Create a reusable form navigator with two pressable links in a row to navigate between sign-in and related screens (forget password, sign up) in a React Native app.

Learn to implement keyboard avoiding view in React Native by wrapping inputs in a scroll view, using flex and padding, and applying vertical offset to handle iOS and Android behavior.

Create a custom keyboard avoiding view in React Native using a TypeScript functional component that renders children inside a scroll view with flex: 1, used in sign-up and sign-in flows.

Discover how to add navigation in a React Native app using React Navigation, including installing dependencies, selecting a navigator, and wiring sign in, sign up, and forget password screens.

Refactor your React Native navigation by creating an auth navigator with a type-safe stack param list, defining sign in, sign out, sign up, and forget password routes.

Refactor to create a reusable yup validator with a generic validation result that returns data or an error using a schema, async, try/catch, and TypeScript types.

Learn to replace repetitive Axios try-catch blocks with a reusable run Axios async utility in TypeScript, returning data or typed errors for scalable React Native projects.

Learn to render error and success notifications in a React Native app using the Flask message package, with top positioning, axios error handling, and loading state management.

Implement a sign in flow in a React Native app by wiring inputs, validation, and Axios requests, handling profile and tokens, and planning centralized API base URL for future reuse.

Refactor the axios client by creating a base url with your IP and port 8000. Export a default client and use client.post for signup and signin.

Sign up triggers a sign-in flow with a success response and tokens, then handles the sign-in response and navigates to the authenticated app page.

Learn how sign-in tokens toggle between an auth navigator and an app navigator using redux or context to drive sign-in, sign-up, forgot-password flows.

Harness Redux Toolkit to store authentication state and render navigators accordingly. Build a centralized store for auth, profile, and messages, updating all screens with changes.

Set up redux toolkit in a react native project. Install redux toolkit and react-redux, configure a store with reducers, create an auth slice with an initial state, and wire provider.

Update Redux state by dispatching an action with profile, tokens, and pending, based on the login response. Create a custom hook to centralize sign-in logic using dispatch and selector.

Preserve auth state across reloads by storing access and refresh tokens with async storage, read the token to call the profile endpoint using bearer authorization, centralizing token management.

Render a loading indicator in React Native using Lottie files and Lottie React Native, loading a JSON animation from assets within a modal backdrop, controlled by a pending state.

Create a custom useAuth hook to centralize sign in and sign up logic, manage auth state, and expose sign in functionality for reuse across screens.

Implement a forget password flow in a React Native app, manage email state, validate via a regex, submit to the auth/forgot-password endpoint, and show loading and success or error messages.

Implement a bottom tab navigator within the app navigator, wiring home and profile navigators, customize tab bar icons with expo vector icons, and hide headers for a clean interface.

Create a new listing form in the tab navigator with a plus circle icon, featuring image picker and inputs for name, price, date, category, description, and a list product button.

Render the React Native Community date time picker in a custom date picker component. Configure value, onChange, and testID props, and apply styling for Android and iOS.

Fix date picker behavior across iOS and Android in an expo managed workflow by using expo install, managing visibility with useState, and conditionally rendering UI, with date formatting via moment.js.

Create a date helper function to format date strings in a React Native app, using date time and an optional format, and export it for reuse.

Build a reusable category selector modal for a React Native app by creating an option model component, managing visibility with onRequestClose, and rendering selectable items in a scrollable list.

Create a category selector button in a React Native project, styling it as a row with title and caret on the right. Apply padding, border radius, and primary color accents.

Tap the backdrops to close modals using a pressable container and on press handlers, log presses, and implement handleClose to close on backdrop taps.

Finish the form UI by integrating a custom keyword avoiding view, enabling a multi-line description, and using a keyboard avoiding view and a scroll view in React Native.

Create an Axios auth refresh flow using a refresh token, build a use client hook, and auto refresh the access token via interceptors while updating the profile.

Learn how to implement a robust token refresh workflow in React Native using axios, async storage, and a refresh token to automatically renew access tokens and retry failed requests.

Fix the auth flow by updating token storage and fetching the auth state in navigator index.tsx with async storage get and keys.auth_token, so you stay logged in after reload.

Create a product creation form with state and default data, controlled inputs for name, description, price, category, and purchasing date; update fields via setProductInfo and submit to log data.

Fixes the category selector by conditionally rendering the selected category, destructuring the category, and closing the modal on press to set electronics or other categories.

Learn to implement image selection in a React Native app using expo image picker, including installation, iOS permission setup, and multi-image handling for Cloudinary uploads.

Learn to render selected images in a React Native app using a FlatList with horizontal scrolling, mapping over an image array, and displaying URI-based images with responsive styling.

Refactor a flat image list into a reusable horizontal image list component in React Native, handling image data, press and long-press actions, and styling with content container styles.

Implement long-press image options to remove selected images, using a modal with image options, tracking the chosen image in state, and filtering the array to delete it.

Learn to build a new product validation schema with required fields name, description, price, purchasing date, and category, while images remain optional.

Build a profile screen in React Native by creating an avatar view with optional uri, rendering an image or icon, and displaying name, email, and options in a scroll view.

Render the avatar uri and profile details from the auth state, including name and email, and arrange them in a row with reusable padding and a divider.

Build a reusable profile option list item in React Native by composing a pressable row with an icon and title, handling onPress, and displaying an active indicator and color changes.

Create a single product page and wire navigation with params to pass the product object through the profile navigator, using native stack and typed route params.

Implement a safe delete flow with a native alert for confirm or cancel. Send a delete request via the auth client, show a loading state, and navigate back to listings.

Explore building an edit product page in a React Native app, including navigation to an edit screen, passing product data, and rendering an image list, forms, and selectors.

Explore long-press image edit options, including a modal with thumbnail and remove actions. Track the selected image, log it to console, and trigger backend delete by product and image ids.

Remove an image by distinguishing local versus cloud images (res cloudinary) and send a delete request to /product/{productId}/{imageId} after extracting the image id from its URL.

Manage edit form state for a product by spreading route params and updating name, price, date, and description, including image selection with the image picker.

Update a product by preparing a filtered form data payload with product name, category, description, price, and date, validating it, and handling local images before submitting to the API.

Submit product updates via auth client patch to /product/{id} with form data, manage loading state and success messages, update thumbnail, and render the update button only when data changes.

Learn to fix image update issues in Android by configuring an Axios request with multipart/form-data content-type headers, enabling successful product thumbnail updates and immediate UI refresh.

Use deep equal to compare form data objects and render the update button only when data changes, highlighting object reference versus value equality in a React Native update flow.

Render a not verified verification link UI at the top of the profile, styled and interactive, triggering a backend token fetch; enable pull-to-refresh to refresh profile state.

Update the profile image by enabling editing and single selection, cropping to a square, and sending as form data in a patch request to update the avatar.