CODEWITHSUNDEEP
react-nativereact-navigation
Native Kyle
Native Kyle

Reputation: 3

React-Navigation tabNavigator with 7 tabs - extending it beyond screen

Using react-navigation I've created a tabNavigator with multiple tabs(7 in total). I want to have the tabs extend beyond the screen so that a user swipes across the top to see the remaining items. However, when I create the tabNavigator the tabs only fit in the screen width and the title text overlaps each other.

I've checked the docs and the open issues on the project's github, I've Googled for a solution, and I can't find anything on Stackoverflow addressing this issue. Here is an example code:

const TabsScreen = TabNavigator({
  tab1: { screen: Tab1Screen },
  tab2: { screen: Tab2Screen },
  tab3: { screen: Tab3Screen },
  tab4: { screen: Tab4Screen },
  tab5: { screen: Tab5Screen },
  tab6: { screen: Tab6Screen },
  tab7: { screen: Tab7Screen }
}, {
  swipeEnabled: true,
  tabBarPosition: 'top',
  navigationOptions: {
    lazy: true //I am using "react-navigation": "1.0.0-beta.22"
  },
  tabBarOptions: {
    scrollEnabled: true,
    labelStyle: {
      width: 200, // I tried setting this based on screensize, etc
      fontSize: 18
    },
  },
});

Upvotes: 0

Views: 1113

Answers (3)

John B Gilbert
John B Gilbert

Reputation: 126

As other people have mentioned, you will need to implement a custom component, I have been recently been working with BottomTabNavigator, invoked through app.js. Navigation import Navigation from './navigation';

Navigation leads to BottomTabNavigator, but heres the rub, last time I checked I found that when using this particular Navigator, it only allows about 4 or 5 tabs before it gives a completely uncalled for and unnecessary stack error, it simply refused to acknowledge the rest of the navigator!

Upvotes: 0

niz
niz

Reputation: 57

You can try alternative solution: 1.Specify tab width inside tabBarOptions

tabStyle: { width: Dimensions.get("window").width / 3.5 }

  1. Set scroll enable inside tabBarOptions scrollEnabled: true

so to sum up,tabbaroptions will look like

` tabBarOptions: { activeTintColor: Colors.FontColors.base_grey, inactiveTintColor: Colors.FontColors.light_grey,

  tabStyle: {
    width: Dimensions.get("window").width / 3.5 // number of tabs are 4
  },
  scrollEnabled: true
}`

Upvotes: 2

Michael Cheng
Michael Cheng

Reputation: 10471

You'll need to implement a custom tabBarComponent. You can take a look at the TabBarBottom and TabBarTop implementations in the source code to see what things you might need to do. Beyond that advice, this is probably a bit too broad of a question to try and answer.

Upvotes: 0

Related Questions