tabBarComponent No Documentation

[baxri]

LACK OF DOCUMENTATION

tabBarComponent

Can anyone provide normal documentation how to use this tabBarComponent to display custom tabs, with active tab index.

I check documentation but there is no any kind of API to check what I am receiving in props, how to show active Tab abd stuff like this.

I am using react-native-router-flux v4

and checked this API docs

API Docs

[joshjeong]

Just implemented a custom tab bar component myself. After going through the docs and issues, here's a snippet that I'm using:

<Tabs
      key="tabbar"
      tabBarComponent={CustomTabBar}
    >
    <Scene key="tab1" component={TabOne} title="Tab1"/>
    <Scene key="tab2" component={TabTwo} title="Tab2"/>
</Tabs>

import React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { Actions } from 'react-native-router-flux';

export default class CustomTabBar extends React.Component {
  render() {
    const { state } = this.props.navigation;
    const activeTabIndex = state.index;

    return (
      <View>
        {
          state.routes.map(element => (
            <TouchableOpacity key={element.key} onPress={() => Actions[element.key]()}>
              <Text>{element.key.toUpperCase()}</Text>
            </TouchableOpacity>
          ))
        }
      </View>
    );
  }
}

Hope this helps!

[a-fortunato]

This answer in StackOverflow really helped me with my custom tabbar through tabBarComponent: https://stackoverflow.com/questions/54872145/programatically-hiding-and-showing-individual-tabs-in-react-native-router-flux-t

I wanted to dynamically show/hide the tabs depending on the user, and with that example I was able to achieve it.

[roots-ai]

state.routes.map(element => (
            <TouchableOpacity key={element.key} onPress={() => Actions[element.key]()}>
              <Text>{element.key.toUpperCase()}</Text>
            </TouchableOpacity>
          ))

This shows the activeTabIndex of the last active tab