Custom TabBar Component in v4

[thngdude]

Hi, I'm trying to implement a custom tabbar. As a control, I tried the following, which did not work:

import { TabNavigator, TabBarBottom } from 'react-navigation';

<Scene
          key="tabbar"
          gestureEnabled={false}
          tabs
          hideNavBar
          activeBackgroundColor='#ddd'
          component={TabNavigator}>

I also tried substituting TabNavigator with TabBarBottom and it still didn't work.

Resulting errors:

1. with TabNavigator --> "Cannot read property 'screen' of undefined"
2. with TabBarBottom --> "Cannot read property 'map' of undefined"

[aksonov]

You have to use 'navigator' param, 'component' is used only by children to display screens

[thngdude]

Thanks, @aksonov. Is this currently documented somewhere? Perhaps there's a README I missed.

Btw, this library is really awesome. Thanks for your work.

[thngdude]

Ok, I got it working. I would be willing to contribute to add a section about this to the documentation for v4. However, this would be a first for me (contributing documentation) and could use some guidance.

<Scene
          key="tabbar"
          gestureEnabled={false}
          activeBackgroundColor='#ddd'
          tabs
          tabBarComponent={CustomTabBarComponent}>
          	<Scene key="tab1" component={TabOne} title="Tab1"/>
          	<Scene key="tab2" component={TabTwo} title="Tab2"/>
          </Scene>

You must add the tabs and tabBarComponent props, where the CustomTabBarComponent may extend a component such as TabBarBottom from the React Navigation library.

[aksonov]

Great! Could you submit PR for docs?

…

15 июля 2017 г., в 13:55, thngdude ***@***.***> написал(а): Ok, I got it working. This would be a first for me, but I would be willing to contribute to add a section about this to the documentation for v4. <Scene key="tabbar" gestureEnabled={false} activeBackgroundColor='#ddd' tabs tabBarComponent={CustomTabBarComponent}> <Scene key="tab1" component={TabOne} title="Tab1"/> <Scene key="tab2" component={TabTwo} title="Tab2"/> </Scene> You must add the tabs and tabBarComponent props, where the CustomTabBarComponent may extend a component such as TabBarBottom from the React Navigation library. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[krunaldodiya]

would you please give example for CustomTabBarComponent as i want to render tabs inside custom component, i am able to render "hello" when i use tabBarComponent={CustomTabBarComponent} but instead i want to render tabs view with tap and slide effect, please help

import React from 'react'
import {Text, View} from "react-native";

export default class CustomTabBarComponent extends React.Component {
    render() {
        return (
            <View><Text>hello</Text></View>
        )
    }
}

[krunaldodiya]

i want to add a ui like on top left back arrow, right side two icons 1) search 2) more (three dots)

and bottom the 3 tabs => Home, Profile, Settings

If I use tabs i can render tabs but can't set custom header upside, and slide effect working but tap on any tab does not work work :) your guidance would be great help

[roots-ai]

Hi! Was this issue resolved? How did you finally made the custom slidable tabbar components?

[cicerone-f]

@kunaldodiya can you please share your CustomTabBarComponent?

[krunaldodiya]

@cicer1 i am no more using this module.. I am now using react navigation

[bruno-edo]

I was able to make a custom tab bar following the method @thngdude described.

I'll prepare an example and submit a PR to add it to the docs. Meanwhile here's some code that should give some idea on how to implement the custom tab bar:

import { MaterialTopTabBar } from 'react-navigation-tabs';

class testbar extends MaterialTopTabBar {
    static propTypes = {

    }

    render() {
      return (
          <View>
            {
                this.props.navigationState.routes.map((element) => {
                  return (
                      <TouchableOpacity key={element.key} onPress={() => console.log(element.key)}>
                            <Text>{element.key}</Text>
                      </TouchableOpacity>
                  );
                })
            }
        </View>
      );
    }
}

export default testbar;

[ajaykumar97]

How to navigate to other tab in custom tabbar?

[micahkatz]

@ajaykumar97 you can use Actions['yourtabroute'](); to switch between tabs
For example, if you have Tab1 and Tab2, and you are currently in Tab1, you can call Actions['Tab2'](); to switch to Tab2

[ajaykumar97]

Thanks for your reply @micahkatz