Cohort Project · React Native

Learn React Navigation
by building OnlyProtein

A Swiggy-inspired food delivery app — built from scratch to teach you every navigation pattern you'll actually use on the job.

Live cohort project
7 concepts covered
MERN + React Native
Watch first

Intro & App Demo

Intro Session Introduction

What we're building, why React Navigation matters, and how OnlyProtein ties it all together.

Demo App Walkthrough

A quick look at the finished OnlyProtein app — all navigation flows in action.

What you'll learn

Curriculum

01
React Navigation setup & configuration Installing packages, wrapping your app in NavigationContainer, linking native modules
Foundation
02
Screen navigation navigate(), goBack(), replace() — understanding the navigation object
Core
03
Passing parameters between screens route.params, initialParams, setParams — passing menu & cart data across screens
Core
04
Stack Navigation createNativeStackNavigator, header customization, gesture-back support
Pattern
05
Customizing navigation flows Auth flows, conditional stacks, screenOptions, animations & transitions
Pattern
06
Bottom Tab Navigation createBottomTabNavigator, tab icons, badge counts, nested navigators
Pattern
07
Drawer Navigation createDrawerNavigator, custom drawer content, swipe gestures, overlay vs permanent
Pattern
Built with

Tech Stack

📱
React Native
Cross-platform mobile app, iOS & Android from one codebase
🧭
React Navigation v6
Stack, Tab, and Drawer navigators — all three in one project
🍔
OnlyProtein UI
Swiggy-inspired food delivery interface as the teaching vehicle
⚡
Expo / CLI
Fast iteration with hot reload during live coding sessions

Clone & follow along

The full source is on GitHub. Fork it, run it, and break things — that's how you learn navigation.

⭐ View on GitHub ↓ Download ZIP