React Native Course For React Developers With Projects(2023)

Create an Expo React Native app named notes app, explore the project structure, and start a local dev server with npm start to run on Android or iOS devices.

Design a mobile notes app mockup in react native, with a persistent header, add node and view all notes actions, input, and a scrollable notes card list.

Build a React Native app by setting up components and screens, creating a reusable header, and rendering it across pages. Style the header with platform-specific colors and responsive layout.

Design a responsive React Native homepage with add new note and view all notes buttons, styled containers and icons, and cross-platform shadows using elevation and shadow properties.

Build a root component that uses state to render screens like home, add node, and all notes, updating via on exit and on press.

Design a back button component in React Native, styled for the header with an icon. Use onPress to navigate to the home screen, demonstrating simple state-based navigation.

Design and style the add note screen in React Native, building a form with a text input and submit button, and wire state and handlers to capture input.

Store notes in state with useState in the parent component, pass data to the add screen, validate input, and render all notes in a list.

Design a performant on-screen list with FlatList in React Native, detailing data, renderItem, and keyExtractor. Implement list item styling, safe area view, and navigation flows to add and view notes.

Remove the back button from the home screen by conditionally rendering it when the screen type is not home, so it appears on add new note and all notes screens.

Learn how adding real navigation to a multi-screen React Native app simplifies state management, reduces manual render cycles, and elevates beginner projects toward an advanced navigation-enabled experience.