🚀 Day 2: Stack Navigation in React Native with Expo

Today I added multi-screen navigation to my React Native app using React Navigation. In this post, I’ll walk through the steps and code to help beginners understand how to do the same.

📦 Prerequisites

You should already have a React Native + Expo project set up. I did that on Day 1.

---

🪜 Step-by-Step: Add Stack Navigation

---

✅ 1. Install React Navigation

Run the following commands:

npx expo install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-context
npx expo install @react-navigation/native-stack

This installs the core navigation library and dependencies needed to support native behavior.

✅ 2. Create Two Screens
I already had a HomeScreen. Now I added a new file:
📄 src/screens/ProfileScreen.tsx

import React from "react";
import { View, Text, StyleSheet } from "react-native";

export default function ProfileScreen() {
    return (
        <View style={styles.container}>
            <Text style={styles.title}>👤 Profile Screen</Text>
            <Text style={styles.subtitle}>This is the Profile Screen</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        padding: 20,
        backgroundColor: "#fff"
    },
    title: {
        fontSize: 24,
        fontWeight: "bold",
        marginBottom: 12,
    },
    subtitle: {
        fontSize: 16,
        color: "#666"
    }
});

✅ 3. Create a Stack Navigator
📄 src/navigation/StackNavigator.tsx

import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import HomeScreen from "../screens/HomeScreen";
import ProfileScreen from "../screens/ProfileScreen";

const Stack = createNativeStackNavigator();

export default function StackNavigator() {
    return (
        <Stack.Navigator initialRouteName="Home">
            <Stack.Screen
                name="Home"
                component={ HomeScreen }
                options={{ title: 'Welcome' }} />
            <Stack.Screen 
                name="Profile" 
                component={ProfileScreen}
                options={{ title: 'PRofile'}} />
        </Stack.Navigator>
    );
}

✅ 4. Wire it all in App.tsx

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import StackNavigator from "./src/navigation/StackNavigator";

export default function App() {
  return (
    <NavigationContainer>
      <StackNavigator />
    </NavigationContainer>
  );
}

🧠 NavigationContainer is the root context that enables navigation in the entire app.

✅ 5. Add Navigation Logic in HomeScreen

import React from "react";
import { View, Text, StyleSheet, Button } from "react-native";
import { NativeStackScreenProps } from "@react-navigation/native-stack";

type RootStackParamList = {
  Home: undefined;
  Profile: undefined;
};

type Props = NativeStackScreenProps<RootStackParamList, "Home">;

export default function HomeScreen({ navigation }: Props) {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>👋 Welcome to My First React Native App</Text>
      <Text style={styles.subtitle}>Day 2 - Getting Started 🚀</Text>

      <Button title="Go to Profile" onPress={() => navigation.navigate("Profile")} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    padding: 20,
    backgroundColor: "#f8f8ff",
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    marginBottom: 14,
  },
  subtitle: {
    fontSize: 16,
    color: "#666",
    marginBottom: 20,
  },
});

🧠 Here, we use navigation.navigate("Profile") to move to the Profile screen.
The Props type ensures TypeScript catches mistakes if we pass wrong route names.

---

🧠 Recap: What I Learned

• How to install and configure @react-navigation/native with Expo
• How stack-based navigation works
• How to use navigation.navigate("ScreenName")
• Organizing screens and navigation into folders
• Adding type safety with NativeStackScreenProps

🔗 GitHub Repo
👉 View Source Code on GitHub