react-nativereact-navigation-top-tabs

material-top-tabs label not showing

This is my code

import React from "react";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import Categories1Screen from "./Categories1Screen";
import Categories2Screen from "./Categories2Screen";
import Categories3Screen from "./Categories3Screen";

const Tab = createMaterialTopTabNavigator();

export default function CategoryScreen() {
  return (
    <Tab.Navigator initialRouteName="Categories1">
      <Tab.Screen name="Categories1" component={Categories1Screen} />
      <Tab.Screen name="Categories2" component={Categories2Screen} />
      <Tab.Screen name="Categories3" component={Categories3Screen} />
    </Tab.Navigator>
  );
}

My problem is, I don't see the labels such as Categories1, Categories2, Categories3.

Here is place error occurred:

enter image description here

I was expecting results like:

enter image description here

I installed enough dependencies, I don't understand why it is not working. I tried adding screenOptions and options but it also does not work.

Solution

  • I believe that the issue is with latest version of "react-native-tab-view": "^4.0.1" not being compatible with "@react-navigation/material-top-tabs": "^6.6.14"

    I had to drop down to "react-native-tab-view": "^3.5.2" to get it working.

    Investigation process.

    I had created new project using npx create-expo-stack@latest with nativewind and react navigation following instructions to add material-top-tabs for v6, I got the latest package for react-native-tab-view that is 4.0.1 so I tried to investigate and ran into this issue https://github.com/nativewind/nativewind/issues/1039 seeing that issue, I got the idea that react-native-tab-view is not compatible thus it is now working, will investigate further when moving to react-navigation v7 is required.

    If you have nativewind installed you will run into the issue mentioned here