Intro to React Navigation — Move Between Screens | React Native Beginner Tutorial
One screen is not enough. Apps have many screens. React Navigation is how you move between them.
Your app has been a single screen so far. That is fine for learning. But real apps have a Home screen, a Profile screen, a Settings screen, a Details screen. Today you learn how to build all of them and move between them with a button.
What you will build:
A 2-screen app:
Home screen with a button that says "Go to Details"
Details screen that appears when you press the button
A back button to return home
What you will learn:
Installing React Navigation (the right way, no errors)
Stack Navigator — what it is and why it is called "stack"
Moving between 2 screens with a button
The mental model: screens piled on top of each other
Why navigation matters:
Without navigation, your app is one page. With navigation, it becomes an app. Every Instagram post you tap, every settings menu you open, every checkout flow — all navigation.
What we install:
@react-navigation/native
@react-navigation/stack
react-native-screens
react-native-safe-area-context
One command. I will show you exactly which one.
Your task after this video:
Build the 2-screen app. Change the button text to something personal. Add a second button on the Details screen that goes back. Take a screenshot of both screens. Share them.
Part of:
Basic Certificate in React Native Development
Free · Self-paced · 19 lessons · No quizzes
Tags:
React Navigation tutorial, stack navigator React Native, move between screens React Native, React Navigation setup, React Native multiple screens, navigation for beginners, React Native button to new screen, Basic Certificate React Native, Algorithm Institute