[SOLVED] How to make scrollable top tab Navigator (React Navigation v6)

Issue

I am using react navigation v6. What I want is scrollable tabs in top tab navigator? In 3rd party Modules, there are many issues so that’s why currently I am not using that.

enter image description here

Solution

use this. "@react-navigation/material-top-tabs"; library and here is the example

import React from "react";
import { screens } from "../../constants";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import Booking from "./components/Booking";
import Payments from "./components/Payments";
import Cancellations from "./components/Cancellations";
import Refunds from "./components/Refunds";
import Instructorquestion from "./components/Instructorquestion";

const Tab = createMaterialTopTabNavigator();
const Faq = () => {
  return (
    <Tab.Navigator

      screenOptions={{ tabBarScrollEnabled: true,tabBarIndicatorStyle:{
          backgroundColor:"blue",
          height:8,
         
      } }}
      sceneContainerStyle={{ backgroundColor: "white" }}
      
    >
      <Tab.Screen name={screens.BOOKINGS} component={Booking} />
      <Tab.Screen name={screens.PAYMENTS} component={Payments} />
      <Tab.Screen name={screens.CANCELLATIONS} component={Cancellations} />
      <Tab.Screen name={screens.REFUNDS} component={Refunds} />
      <Tab.Screen name={screens.INSTUCTORQUESTION} component={Instructorquestion}  options={{ tabBarLabel: 'Instructor Questions' }} />
     
    </Tab.Navigator>
  );
};

export default Faq;

Answered By – Engr.Aftab Ufaq

Answer Checked By – Terry (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published.