React Native Course: 7 Days To Complete App

Design the app layout with a timer panel and an activity list, applying styling and building components, while enabling left and right swipe animations for day one.

Initialize a React Native project with npm and npx create expo app, install React Native web and expo webpack config, edit app.js, and test a layout with swiping in browser.

Learn to build a simple react native interface with a timer and an activity item, organize components under src/components/activity, and render multiple items in a basic structure.

Move the Activity Timer and Activity Item into a new home screen component inside a screens folder, then wire the home screen into app.js.

Display a list of activity items in a React Native app using FlatList and a local activities.json, showing each item's title and timer while ensuring only one active item increments.

Enhance the home screen in React Native by styling the timer and header, arranging the activities header in a row, and wrapping content in a safe area view.

Introduce a dark theme using a color palette and variables/styles.js, import colors, and apply a padded flex container in a safe area view with white text for contrast.

Create a wrapper flow text component in React Native to standardize text color via an overrides workflow, exporting flow text and supporting style overrides for consistency.

Learn to build a highlight view in React Native by wrapping the timer and items in a dark gray background, then export and apply it.

Improve styling in the React Native course by adding border radius and padding to the highlight view, refining item spacing, and introducing a flow row to align activities and timer.

Refine the row component styling, display a bright green timer across items, fix simulator visuals, and switch to a light status bar for a cleaner UI.

Implement horizontal swipe gestures for list items using a pan responder and animated values to translate along the x axis, activating on right swipes and deactivating on left swipes.

Practice implementing a pan responder that lets you drag items horizontally and spring them back to their original position on release, using Animated.spring and onPanResponderTerminationRequest.

Implement activation and deactivation in a drag-and-activate interface, where dragging activates an item, shows a loader, and updates visuals; only one item stays active, with state preserved after refresh.

Activate and deactivate items by swiping with a pan gesture; start the timer when activated and visually indicate the active state using a 60-pixel threshold on the gesture state x.

Learn how activation callbacks update item states in a React Native app by handling on activity change, passing item data to Home.js, and mutating FlatList items upon swipes.

Initialize a reactive activity list with useState and useEffect, load initial data from async storage, and persist changes to ensure data stays across sessions in a React Native app.

Check if async storage is enabled before use by testing set and get operations, fall back to default json data, and pass the check result to the home screen.

Activate an item by updating the activities state: load data from storage or json, identify the item by id, and toggle its active state.

Display the active state by changing the item background in the flat list when the item is active, using conditional styling and the is active prop to show activation clearly.

Refine the activation logic by updating the if statement to change state only when the candidate id is active and the state differs, ensuring a single update and persistence.

Save and persist day flow items to storage when enabled, using the save function. Toggle items, refresh, and verify the last stored state remains across web and mobile.

Implement a three-dot loading animation as a trailing loader in an active item, replacing the time display with an animated activity indicator in React Native.

Learn to implement and optimize a loading dots animation in React Native, refactoring repeated animations into a loop with animated opacity, timing, and stagger for a smooth, customizable indicator.

Explore day three timer functionality, where activating an activity starts a zero timer and increments, while deactivation saves the time to storage and updates the list using useRef and useState.

Learn to implement a frame-based timer in React Native by adding a tick function triggered with requestAnimationFrame in useEffect, updating the active item’s elapsed time from zero.

Accumulate elapsed time in a React Native app by using a start time reference and a time reference, updating only every 100 milliseconds to reduce render overhead.

Learn to run a timer only when an item is active by detecting and memoizing the active item, and using a requestAnimationFrame reference to pause and resume.

Learn to reset and start timers correctly when switching items in a React Native app by tracking previous active item with a custom hook and resetting timer references to zero.

Learn to display a timer in a React Native app by introducing state, updating time with a tick, formatting to hours, minutes, and seconds, and handling resets on item changes.

Store timer time in state and update the active item's time on each toggle with a dedicated function. Ensure persistence across items and reset on deactivation.

Reset timers on item toggle and format active times. Display the active item title in the timer and save state to storage to preserve values across refreshes.

Learn to persist items in a React Native app across browser refreshes by using useEffect, platform checks, and a save-to-storage routine that updates the active item's time.

Implement mobile app state handling in React Native to save data when the app enters background or becomes inactive, using AppState, addEventListener, and cleanup, with cross-platform testing.

Create a new item on the home screen by opening a modal, entering a title, and confirming to add it; disable confirm when input is empty and explore reusable buttons.

Learn to implement a reusable flow modal in React Native to add a new item by tapping an add button, entering a name, and appending the item to the list.

Add a text input to a React Native modal, styling the input with placeholder and colors, and implement confirm and cancel buttons using Pressable with onPress handlers.

Learn to build a reusable, stylable React Native button component (flow button) with props for text, events, color variants (primary, danger, warning, default) and ghost or filled styles.

Learn to manage item data in a React Native form by updating state with text input, generating a ten-character id, and validating submissions before creating a new item object.

Learn how to prevent empty submissions by disabling the confirm button in a React Native item creation form, display an error message, and adjust button styling for disabled states.

Learn to control a modal in React Native by using a visible state, passing it to the item create component, and handling on close to cancel and hide the modal.

Learn to submit a new item via a modal form, handle onConfirm to create the item and close the modal, update Home.js state, and persist changes to storage.

Set a responsive container in a React Native app by applying a max width of 500px on web, with margin auto and 100% width for mobile, ensuring a balanced layout.

Replace button text with a plus icon by importing a material icon from expo, pass it as content, and style color and size for responsive web and mobile buttons.

Learn to disable flat list scrolling while activating items by using a scroll enabled state and on swipe start and on swipe end callbacks, updating Home.js to control scrolling.

In this day five, double-tap an item to open its detail view, edit fields, confirm updates to save changes, or delete with optional confirmation, and see updates on the list.

Create an item detail screen component in React Native, manage its visibility with state, and present it as a full-screen modal with a fade animation.

Learn to convert an item detail component into a full screen modal by passing a full screen prop, applying container styles, and handling status bar height for web and mobile.

Design the detail screen layout with back, edit, and delete actions plus a timer, title, and description. Apply responsive styling with a max width for cross-device consistency.

Implement cross-platform double-click detection in a React Native item using on pointer down and on touch start, tracking last press time with a 350 ms delay for web and mobile.

Double-click an item to set the focused item on the home screen and open its detail in a modal, displaying its title, description, and a live timer.

Pass time into detail explains updating a focused item's timer in a React Native app by conditionally displaying the updated time when active and passing time to the item detail.

Improve the delete button by centering the text with a trash icon and selecting an outline icon, such as md outline, and implement a default reusable size.

Master update and delete functionalities in a React Native app by editing item fields, confirming changes, and showing real time updates in the home view with a delete confirmation prompt.

Explore editing mode in a React Native app by toggling isEditing, switching to title and description text inputs, and handling input changes and confirm actions.

Update item details in editing mode and propagate changes to the home screen to refresh storage and the activities state, using an on item edit callback and update item logic.

Fix the button position in the React Native course: 7 days to complete app by applying absolute styling to the flow button with Material Icons, eliminating browser flicker on refresh.

Add a reusable confirmation modal to the item detail view to confirm deletions, wiring visibility and message props with confirm and cancel actions and optional fade animation.

Pass on confirm and on cancel handlers from the item details to the confirmation modal, then close both prompts to return to list view. Next lecture covers deleting item.

Implement deletion of items in the home component, handling the active item, canceling the timer animation frame, resetting time, and updating storage after filtering out the item.

Display the current date on the home screen above the timer using a utility function to format the date as Friday, December 15th, with a light gray color.

Implement a one-time tutorial on first launch using a modal screen with animated steps for activate, deactivate, and double-tap scale, including a skip option.

Create a new tutorial screen in the React Native app, using a step state and flow model to guide users through three steps.

Implement stepping functionality with go next and go back to advance or retreat the current step, managing a max of three steps and per-step content including a tutorial animation.

Preview and swipe a tutorial item to navigate between screens in a react native app, using a preview item wrapper and preparing left or right swipes to start tracking.

Create a left-to-right looping swipe animation using a direction ref of 150 pixels, with timing 1-second delay and 2-second duration, wrapped in an animated view controlled by step state.

Fix the swiping animation when moving back and forth by introducing an animation reference, storing the loop, and resetting the animation on view changes with a safe cleanup function.

Handle step two by duplicating the step one view, updating the direction values, and adding a default position timing sequence to prevent mid-animation resets.

The lecture teaches managing an activation state for a swipe item in React Native, using an animation listener to activate on end positions, deactivate on reverse, and reset across steps.

Implement a reactive active state for a preview item with useEffect and timeouts, resetting after a threshold and using a ref to clear timeouts on step changes.

Implement step three by adding a double-tap that scales the item through a timing sequence, applies separate transform scale, includes a delay, and displays step progress (step 3 of 3).

Disable item controls with a controls prop to prevent interference during movement. Set can control to false to disable interaction and conditionally apply pan responder handlers.

Hide the tutorial modal by adding a close button and wiring onSkip to toggle visibility, then track a tutorial-watched flag in app.js to remember when the tutorial has been viewed.

Learn to store the tutorial watched status in storage and load it on app startup to control whether the tutorial shows.

Test all app features, reset storage, clear async storage, and simulate item management—add, edit, delete, and toggle—then recap the seven-day journey to a finished project.