React Native + Expo: From Beginner to Expert [2022]

Install Node.js and Expo CLI to set up a React Native environment, follow macOS or Windows terminal steps, and use sudo for admin rights.

Learn how to set up a React Native environment with Expo, create a blank project, run on an Android emulator, and organize code with hooks, navigation, and app state.

Explore an app file structure for a React Native Expo project, organizing source into app state, app navigation, and screens, including a home screen, and using useState and useEffect.

Master how to implement hooks and useState to manage an all notes array and individual note objects, pass a global app state through app navigation, and scaffold a note-taking app.

Learn to set up React Navigation in an Expo managed workflow, install packages, configure a navigation container with a native stack navigator, and pass app state to the home screen.

Learn how to style React Native apps with StyleSheet.create, inline styles, and flexbox, including arranging views top to bottom by default, switching to row, and using flex values for proportions.

Learn to set up push notifications in a React Native Expo app using native notify, including signing up, installing, wiring a hook-based flow, and testing on an emulator.

Learn to pass down app state through navigation, render all notes with a map function in text components, and wire navigation to a note detail screen.

Build a React Native + Expo notes app with a global header and footer, and three screens—all notes, note detail, and create note—navigated by touchable opacity and on press events.

Learn to implement vector icons and text styling in a React Native Expo app, with header and footer icons, font choices, and typography using Google Fonts Open Sans.

Learn to implement a ScrollView inside a view in React Native with Expo, and master using style versus content container style to control layout and scrolling.

Explore building a note creation screen with React Native text inputs using Expo, adding placeholders, multiline input, local state, on change text, and styling adjustments for padding and font size.

Discover implementing local storage in a React Native + Expo app with async storage to save an array of notes in app state, including a save action.

Implement automatic note saving in React Native with Expo using useEffect, spread operators, and async storage. Create notes on typing and manage with app state and global footer.

Learn how to re-render a React Native screen when returning to it by using the useIsFocused hook from React Navigation, replacing useEffect for focus-driven updates.

Learn to manage keyboard events in React Native with Expo by hiding header and footer when the keyboard shows, and using KeyboardAvoidingView for platform-aware padding and smooth scrolling.

Implement a note editing feature in a React Native Expo app using a chosen note id and local storage, with a separate edit page and create-note logic and UI tweaks.

Explore deleting notes in a React Native + Expo app, using an X icon and splice to remove notes, with a forceUpdate call to re-render after local storage updates.

Use the conditional (ternary) operator to color footer icons by active screen, updating the screen name during navigation between all notes and create note, with Material Community Icons.

Learn the EAS build workflow for React Native apps with Expo, including installing eas-cli, logging in, configuring Android or iOS builds, and using alert components for delete confirmation.

Conclude your journey by mastering a React Native note-taking app and becoming a confident React Native developer. Explore further questions through the Native Notifies channel and email for support.