How to use tabBarComponent for TabNavigator? Tab bar not showing

Question

I'm trying to make my own custom tab bar and it seems tabBarComponent is the way to do it by setting as my own component. With the below code my tab bar does not show up.

const TabNav = TabNavigator({
  LaunchScreen: {
      screen: PrimaryNav,
      navigationOptions: {
        tabBarLabel:'Find',
        tabBarIcon: ({ tintColor }) => (
          <Icon name='search' size={20} color='white' />
        ),
      },
   },
}, {
  navigationOptions: {
    headerTintColor: 'grey'
  },
  tabBarComponent: FooterTabs,
  tabBarPosition: 'bottom',
  swipeEnabled:false,
  animationEnabled:false,
  lazy:true,
  tabBarOptions: {
      showIcon:true,
      showLabel:false,
      style: {
          backgroundColor: 'black'
      }
  }
});

In FooterTabs.js:

export default class FooterTabs extends Component {
  render () {
    return (
      <View style={styles.container}>
        <Text>FooterTabs Component</Text>
      </View>
    )
  }
}

What am I missing?

Solution 1

After some trial and error, the solution to my issue was to wrap my footer content in a ScrollView, then the tabs showed up as expected, though I am not sure why that is required.

I also implemented Caleb's suggestion (thanks!) of using tabBarComponent: props => <FooterTabs{...props} /> in order to pass the props which I need though was not the cause of the issue.

Solution 2

    const TabNav = TabNavigator({
      ......,
     tabBarComponent: props => (
     <FooterTabs{...props} />
     ),
     tabBarPosition: 'bottom',
     ........

    });

Try that. enclose your FooterTabs i.e <FooterTabs /> not FooterTabs

Comments

[Rawan]

Hi, thanks for the solution, but please can you explain more bout wrap the footer content in a ScrollView, how did you do that? I will be thankful for any help. I sucked in the same issue :S

[Yossi]

@JustinLok Can you post the entire FooterTabs code?

[Yossi]

@Rawan did you manage to do it? Can you post your CustomTabBar code?