React Native & Expo Bootcamp : Build 3 Real-world Projects

Set up the React Native Paper ui library for an expense tracker, replace login and register buttons with paper buttons, and create a reusable custom button component with consistent styling.

Wrap the app in the paper provider and use the theme to customize colors with useTheme. Set the primary color to affect all components and expect a reload for changes.

Build expo router based authentication flows by creating landing, login, and register screens and routing in index.tsx to navigate based on auth status, with a safe area layout wrapper.

Design and implement a landing screen UI in a React Native and Expo app, featuring branding, a two-part layout, logo, title fin track, caption, and navigation to register and login.

Optimize the landing screen by creating a reusable custom text component with props for color, font size, weight, margins, and alignment, using React Native Paper.

Build a register screen with name, email, and password fields, using react-hook-form for validation with zord and resolvers, and wire back navigation to the landing screen and submit handling.

Learn to implement the login screen by adapting the register flow, removing the name field, and updating titles and navigations with router.push to the landing page via relative paths.

Update the app icon for expo and react native apps using icon kitchen. Customize the icon with a white background, update app.json, and rebuild to see Fintrack.

Learn to integrate Supabase with a React Native Expo expense tracker by setting up a Supabase account and project, configuring environment variable keys, and building authentication backend logic.

Build a user registration backend with supabase in a react native expo app, including a register new user service, user profiles table, and a unique email constraint.

Learn to implement login in a react native expo app by wiring a login service to navigate to the user home after success, using signInWithPassword and handling loading and errors.

Explore session validation in a React Native Expo app, implementing a zustand store for auth state, and automatic navigation based on user session to landing or home.

Fetch and display the logged-in user's name and email on the homepage using the auth store, and implement logout with state updates and routing to login.

Build an interactive home screen with a bottom navigation bar that toggles between home and profile tabs, includes a plus button to add transactions, and supports logout and edit profile.

Develop a customized bottom navigation with render icon and render label in React Native Paper, and build a profile tab showing user info, avatar, and edit/logout actions.

Build an edit profile page in React Native: edit the user name, update the profile picture, and manage the form with reusable flexbox components and simple validations.

Learn to edit a profile picture in React Native with Expo Image Picker, handle permissions, select and upload an image to Supabase storage, and update the public profile URL.

Create the transactions table and transaction interface in the super base, defining id, amount, type (income or expense), category, description, receipts, date, and user id, plus a policy.

Build transaction services in a React Native & Expo bootcamp by implementing transactions.ts with addTransaction, editTransactionById, deleteTransactionById, getTransactionById, and getTransactionByUserId, modeled after users.ts.

Build a transaction form with input fields, category and transaction type dropdowns, and a date picker using React Native Paper; supports add or edit modes via a form type prop.

Build and style the transaction form in a React Native Expo app, adding date picker styling, dropdowns for type and category, and submit handling.

Display a logged-in user's transactions in a React Native and Expo app by fetching transactions by user ID and rendering them in a transactions page with a flat list.

Build a transaction detail screen in a React Native and Expo app, featuring navigation by transaction id, a comprehensive detail layout, and edit and delete actions.

Fetch transaction data by id from local search params, store it in state, and pass it to the transaction form for editing, using a global store to avoid API calls.

Learn to implement a transaction type filter on the transaction screen with a dedicated filters component, enabling all, income, or expense selections.

Implement a sort by menu using react native paper to sort transactions by date newest, date oldest, and amount highest, amount lowest, wiring anchor position and menu state.

Build the dashboard user interface on the user homepage to show balance, income, expense, and the last five transactions, styled with flexbox and a welcome header.

Fetches dynamic transactions overview and computes total income, total expenses, and net balance. Displays last five transactions in a flat list with loading state and route-based navigation to details.

Refine the auth pages in React Native by implementing a primary background color, white curved cards, and icons, while aligning the login and register screens with consistent styling.

Style the home screen with multiple tabs and a responsive loading button, and refine the transaction list and profile page with bold names, filters, icons, and a clean logout flow.

Fix the navigation back button bug after login by using BackHandler and Alert to confirm exit, and ensure the prompt appears only when the current page is focused via navigation.isFocused.