Uncaught Error: Couldn't register the navigator. Have you wrapped your app with 'NavigationContainer'?

Question

I'm working on a ‍react-native‍‍ group project and im trying to create customizable top-tabs following the design.

I tried to use @react-navigation/native and @react-navigation/material-top-tabs but it keeps showing that error, despite wrapping my ./app/index.tsx file code with NavigationContainer.

Here's the code for the \_layout file for the tabs:

import { Tabs, withLayoutContext } from "expo-router";
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'

const TopTabs = withLayoutContext(createMaterialTopTabNavigator().Navigator);

 export default function MapNavigator() {
  return <TopTabs />;
}

Here's the code for the ./app/index.tsx file:

/** @format */
import React, { useState } from "react";
import {
  Text,
  View,
  StatusBar,
  Pressable,
  FlatList,
  Image,
  useWindowDimensions,
} from "react-native";
import { LinearGradient } from "expo-linear-gradient";
import Bg_1 from "../../assets/images/GetStartedBackgroundImages/getStartedBg(1).png";
import Bg_2 from "../../assets/images/GetStartedBackgroundImages/getStartedBg(2).png";
import Bg_3 from "../../assets/images/GetStartedBackgroundImages/getStartedBg(3).png";
import Bg_4 from "../../assets/images/GetStartedBackgroundImages/getStartedBg(4).png";
import { Link } from "expo-router";
import { NavigationContainer } from "@react-navigation/native";

//Mock Data
const Slides = [
  {
    id: 1,
    topic: "Grow More With Less",
    subTopic:
      "Increase your farm yields and profit with minimal effort smart farming solutions and best practices.",
    image: Bg_1,
  },
  {
    id: 2,
    topic: "Get Alerts, Stay Safe!",
    subTopic: "Receive alerts and act quickly to prevent risks as they arise.",
    image: Bg_2,
  },
  {
    id: 3,
    topic: "Get Alart, Shine Ya Eyes",
    subTopic:
      "We go give you quick update so that you go fit comot before yawa gas.",
    image: Bg_3,
  },
  {
    id: 4,
    topic: "Small Power, Boku Harvest!!!",
    subTopic:
      "No too stress yourself, you don jam beta solution wey go give you money yanfu yanfu",
    image: Bg_4,
  },
];

export default function Index() {
  const [compareMappedItemsIndex, setCompareMappedItemsIndex] = useState(0);
  const { width } = useWindowDimensions();

  const Slide = ({ item }: any) => {
    return (
      <View>
        <Image
          source={item.image}
          className="w-[100vw] h-[100vh]"
          resizeMode="cover"
        />
        <LinearGradient
          colors={["rgba(0,44,17,0)", "rgba(0,44,17,7)", "rgba(0,44,17,1)"]}
          className="absolute bottom-0 w-full h-[300px]"
        >
          <View className="w-[100%] absolute bottom-[40px] h-[204px]">
            <View className="mb-[18px]">
              <Text className="text-white mb-[10px] font-semibold m-auto text-center text-[24px]">
                {item.topic}
              </Text>
              <Text className="text-[14.22px] leading-[21.3px] text-center tracking-wide m-auto text-white w-[304.89]">
                {item.subTopic}
              </Text>
            </View>
          </View>
        </LinearGradient>
      </View>
    );
  };

  const SlideFooter = () => {
    return (
      <View className="absolute bottom-[5px] w-full pb-5">
        <View className="gap-2 flex-row justify-center mb-[30px]">
          {Slides.map((_, index) => (
            <View
              key={index}
              className={`${
                compareMappedItemsIndex == index && "bg-white"
              } w-[8px] bg-gray-400 rounded-full h-[8px]`}
            />
          ))}
        </View>
        <Link href={'/Find Agents'} asChild>
            <Pressable className="w-[304.89px] m-auto px-[102px] py-[16px] rounded-[40px] bg-[#FFFCFC]">
            <Text className="text-[#005921] text-center">Get Started</Text>
            </Pressable>
        </Link>
      </View>
    );
  };

  const getSlideIndex = (e: any) => {
    const contentOffset_X = e.nativeEvent.contentOffset.x;
    const presentSlideIndex = Math.round(contentOffset_X / width);
    setCompareMappedItemsIndex(presentSlideIndex);
  };

  return (
    <NavigationContainer>

      <View className="relative flex-1">
        <FlatList
          pagingEnabled
          onMomentumScrollEnd={getSlideIndex}
          data={Slides}
          showsHorizontalScrollIndicator={false}
          renderItem={Slide}
          horizontal
        />
        <SlideFooter />
        <StatusBar backgroundColor="transparent" barStyle="light-content" />
      </View>
    </NavigationContainer>
  );
}

Answer 1

Try upgrade your @react-navigation/* to version 7+, it should resolve this error.