CODEWITHSUNDEEP
react-native
J.sparrow
J.sparrow

Reputation: 939

How to make TabNavigator Scrollable

I am using TabNavigation and I am having more than 5 tabs .So horizontally my text my Tabs are getting smaller .So I want to make my TabNavigator scrollable. So is there any way I can do that . And yes I already used scrollEnabled: true inside my tabBarOptions but nothing happened.I am very new to React Native and I don't know much of a property of TabNavigator .Any help will be useful thank you in advance.

Edit : I have checked both of my version Android and IOS. In Android scrollableTabs are working fine but in IOS there is no scroll.

const TabNavigation = TabNavigator( { TabItem1: { screen: ProfileDetailScreen, navigationOptions: { tabBarLabel: "CURRENT EVENTS", } }, TabItem2: { screen: ProfileDetailScreen, navigationOptions: { tabBarLabel: "OPEN INVITATION", } }, TabItem3: { screen: ProfileDetailScreen, navigationOptions: { tabBarLabel: "ACCEPTED INVITATION", } }, TabItem4: { screen: ProfileDetailScreen, navigationOptions: { tabBarLabel: "MY EVENTS", } }, TabItem5: { screen: ProfileDetailScreen, navigationOptions: { tabBarLabel: "PAST EVENTS", } } }, { tabBarPosition: "top", swipeEnabled:false, animateStyle:false, tabBarOptions: { scrollEnabled: true, activeTintColor: Colors.goldColor, inactiveTintColor: Colors.goldColor, upperCaseLabel: false, showIcon: false, showLabel :true, labelStyle: { fontSize: 12, marginBottom:5, padding: 0 }, style: { backgroundColor: 'black', height: 50, borderWidth: 0 }, indicatorStyle: { backgroundColor: 'black', }, } }

Upvotes: 1

Views: 3952

Answers (2)

user1875926
user1875926

Reputation: 131

With v5, you can pass it in screenOptions -

<Tab.Navigator
  tabBar={(props: TabBarProps) => <Tabs {...props} />}
  screenOptions={{
    lazy: true,
    swipeEnabled: false,
    tabBarScrollEnabled: true,
    tabBarItemStyle: { width: 150 },
  }}>
    {Tabs}
</Tab.Navigator>

Upvotes: 0

csath
csath

Reputation: 1316

Should pass the scrollEnabled inside tabBarOption

export const Tabs = TabNavigator({},{
    'lazy': true,
    tabBarOptions: {
        scrollEnabled: true
    },
  }
);

Upvotes: 6

Related Questions