🚀 Day 2: Stack Navigation in React Native with Expo

Ndeze Bonheur Emmanuel — Wed, 02 Jul 2025 16:48:03 +0000

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

🚀 Day 1: My React Native Journey Begins!

Ndeze Bonheur Emmanuel — Mon, 30 Jun 2025 19:55:35 +0000

Today I officially started my React Native adventure. In this post, I’m not just logging progress—I’ll walk you through what I set up and how the code works, so you can follow along step-by-step.

✅ What I Did Today

Created a new Expo + TypeScript app:

npx create-expo-app my-first-app --template blank (TypeScript)

Initialized a GitHub repo for version control.
Built a simple HomeScreen to display a welcome message.
Committed and pushed all code.
Captured a screenshot of the app running on Android.

🧱 Code Breakdown — My `HomeScreen`

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

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

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

🧠 What This Code Does

StyleSheet.create keeps styles clean and performant.
container uses Flexbox to center content.
backgroundColor, fontSize, and margin make the UI visually appealing and readable.

📍 Connecting the Screen in `App.tsx`

import React from "react";
import { SafeAreaView } from "react-native";
import HomeScreen from "./src/screens/HomeScreen";

export default function App() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <HomeScreen />
    </SafeAreaView>
  );
}

🧠 What This Code Does

We wrap the app in SafeAreaView to handle notches and status bars.
Flex styling ensures the screen fills the device display.

🧩 Putting It All Together

HomeScreen uses React Native components like View, Text.
StyleSheet defines reusable styles.
App.tsx renders the screen within a safe layout.

Once saved, simply run:

npx expo start

You’ll see your welcome screen

🔗 Repo

Check out today’s code here:

👉 GitHub - My First React Native App

🖼 Screenshot

🔭 Day 2 Preview

Next up: adding React Navigation—we’ll create a second screen and navigate between them using a stack navigator. Be ready for multi-screen flow!

Follow me if you want to join me on this full React Native journey. I’ll be posting daily progress and projects!

Forem: Ndeze Bonheur Emmanuel