CODEWITHSUNDEEP
react-nativereact-navigation-top-tabs
Trần Gia Ngọc Phú
Trần Gia Ngọc Phú

Reputation: 73

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.

Upvotes: 7

Views: 1124

Answers (2)

Tewodros Girma
Tewodros Girma

Reputation: 1

I faced the same issue and resolved it by uninstalling all incompatible React Navigation packages and then reinstalling them. Here's the process I followed:

  1. Uninstall the packages: 
    npm uninstall @react-navigation/native @react-navigation/stack @react-navigation/drawer @react-navigation/material-top-tabs react-native-screens react-native-safe-area-context
  2. Reinstall the packages: 
    npm install @react-navigation/native @react-navigation/stack @react-navigation/drawer @react-navigation/material-top-tabs react-native-screens react-native-safe-area-context

Upvotes: 0

malavpatel
malavpatel

Reputation: 305

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

Upvotes: 16

Related Questions