How to use tabBarComponent for TabNavigator? Tab bar not showing

Justin Lok picture Justin Lok · Jul 14, 2017 · Viewed 11.6k times · Source

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?

Answer

Caleb Tolu picture Caleb Tolu · Jul 14, 2017
    const TabNav = TabNavigator({
      ......,
     tabBarComponent: props => (
     <FooterTabs{...props} />
     ),
     tabBarPosition: 'bottom',
     ........

    });

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