Todo List App with React Native Expo - Mobile Development

Install node js on your local machine and verify with node -v, choosing the lts version for most users, and understand that node js runs JavaScript outside the browser.

Install Expo CLI globally, verify with expo --version, then create a new React Native project with expo init notes app, and choose a blank template to complete setup.

Install Visual Studio Code and install React Native Snippets and Prettier extensions, configure Prettier with print width 200, tab width 2, single quotes, and enable format on paste and save.

Install and configure react navigation in a react native project using v6 to enable stack navigation with the native stack library across home, north, and about screens.

This lecture demonstrates setting up react navigation with a native stack in expo, creating a src folder with three screens (home, north, about), and wrapping them in a navigation container.

Run the expo-based React Native project on iPhone via Expo Go, install Native Base and dependencies, wrap the app in the Native Base provider, and design the main screen UI.

Design the home screen for a todo list app using React Native Expo, featuring a header, note cards, add button, NativeBase menu, alert dialog, and navigation.

Design the note screen using safe area view, scroll view, keyboard avoiding view, and text input with a React Native rich editor for composing notes.

Design the about screen for the todo list app by displaying a logo from assets with React Native image, then center content with padding, background color, and a version text.

Redux is a predictable state container for JavaScript apps with a single store, actions, and reducers; dispatching actions updates the state without mutation.

Explore async storage and redux persist to persist app data in a react native expo project. Rehydrate persisted state on launch and override the initial redux state.

Install redux, react-redux, and async storage, then configure a redux store with redux persist to manage notes state, including add, edit, delete, and delete all actions.

Implement the add note function on the note screen by wiring redux actions, selecting notes, validating inputs, dispatching add note with id, date, topic, and description, and navigating back home.

Display all notes on the home screen by selecting, sorting, and mapping notes, handling empty state, and navigating to a note in a React Native Expo app.

Learn to implement the update note function in the todo list app, selecting a note, pre-filling title and topic, and dispatching an update action to save changes.

Learn to implement delete note and delete all notes in a React Native Expo todo list app using dispatch. Use reducer logic to delete by id and clear all notes.