I got a warning: React.createElement type should not be null. And, tab-navigator could not display
after updated to RN 0.16 and [email protected] on Android.

D:\workspace\react-native-work\MyApp>npm install react-native-tab-navigator --save
npm WARN install:[email protected] EPERM: operation not permitted, rename 'D:\workspace\react-native-work\MyApp\node_modules.staging\nan-9eada15a' ->'D:\workspace\react-native-work\MyApp\node_modules\nan'[email protected] D:\workspace\react-native-work\MyApp+-- [email protected] extraneous`-- [email protected]

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fseve
[email protected]

I found this behavior when change android native code to disable dev menu.
I block-commented the detect menu key part :

@Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        /*if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }*/
        return super.onKeyUp(keyCode, event);
    }

After rerun the app , hit the menu key twice , the TabBar is gone ...
I can't figure out the reason.

Environment:

• emulator:GenyMotion/Android 5.0
• react-native: v0.16.0
• react-native-tab-navigato: v0.2.13

Javascript code:

'use strict';

import React,{AppRegistry,View,Text} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';

var TabPage = React.createClass({
  propTypes:{
    text:React.PropTypes.number
  },
  render:function(){
    return (<View style={{flex:1,top:0,alignItems:'center',justifyContent:'center',backgroundColor:'grey'}}>
            <Text >{this.props.text}</Text>
      </View>);
  }
});

var App = React.createClass({
  getInitialState: function() {
    return {
      selectedTab: 'tab1',
    };
  },
  render:function(){
    return (
      <TabNavigator style={{flex:1,backgroundColor:'green'}}>
        <TabNavigator.Item
        selected={this.state.selectedTab === 'tab1'}
        onPress={() => this.setState({ selectedTab: 'tab1' })}
          title="tab1"

          >
          <TabPage text={1}/>
        </TabNavigator.Item>
        <TabNavigator.Item
        selected={this.state.selectedTab === 'tab2'}
        onPress={() => this.setState({ selectedTab: 'tab2' })}
        title="tab2"
          >
          <TabPage text={2}/>
        </TabNavigator.Item>
    </TabNavigator>
  );
  }
});

AppRegistry.registerComponent('Index', () => App);

hi
here is my problem,I set a in the tabnavigator.Item,,but only the HomeTab showed, the navigator disappaered....the codes are following:
HomeTab:

badgeText doesn't work as expected.

I got stuck for a little bit with the example, because I had removed the renderIcons prop. It'd be nice if it could be used without any icons, too.

onlyChild must be passed a children with exactly one child.

if i want hide this tab navigation ,how can i do

Hi,
Thanks for the code, it looks like really awesome.
However, I installed it via the npm command, as you suggest.
But I get the following error:
Unable to resolve module immutable from //node_modules/react-native-tab-navigator/TabNavigator.js: Invalid directory /Users/node_modules/immutable
Even, after installing "immutable" with npm.
Any idea ?
Thanks

I want use rgba color on tab bar, how to set it?

It should be in the bottom but sometime the bar to the top,is it a bug?

I see you added RN 0.16 support for your @exponent/react-native-navigator component (thanks for that, btw).
Will you also add support for react-native-tab-navigator?

Thanks!

if we don't set props 'title',tabs still set paddingBottom.I found the answer in line 50 of Tab.js ,should changet let tabStyle = [styles.container, title ? null : styles.untitledContainer]; to let tabStyle = [styles.container, title === undefined ? null : styles.untitledContainer];

sorry, looks like a dummy question, but I cannot find it anywhere. thx

One page has a TextInput component.I want to let it loses focus, at the time of page switching, have what way?

Would be cool to control TabBar appearance with Animated, so that I can animate it in / out. Unfortunately, LayoutAnimation does not work in my case, since there are quite a few other things going on onscreen.

Imo just a matter of replacing https://github.com/exponentjs/react-native-tab-navigator/blob/master/TabBar.js#L19 with Animated.View. I am happy to pass animation style via tabBarStyle property.

This issue is not happening consistently, but sometimes when using a text input on android the keyboard pushes the tab bar up to the middle of the screen. I'm not sure if this is a bug with this component or with the react native styles in android.

Has anyone else experienced this kind of issue?

Andriod: Tab bar content does not show if we don't specify the height of the container. It comes up only if we give a height to scroll view in case of android.

I cannot specify the height of the scrollabletab view as it can have the dynamic content.

IOS: Another issue is if the height of the second page is more than the first one, then the first page also takes the same height.

I'm a new commer,how should I use babel with option metioned in readme?

when I push a new page，how to hide TabNavigator,

I got an error with latest tab navigator and react native 0.16:

My code:

var TabBar = Platform.OS === 'ios'?React.TabBarIOS:require('react-native-tab-navigator');
var TabNavigator = React.createClass({
  getInitialState: function() {
    return {
      selectedIndex: 0,
    };
  },
    _isCurrentTab:function(index){
        //console.log(""+this.state.selectedIndex+"==="+index);
        return this.state.selectedIndex===index;
    },
  render: function() {
      //... tabs is just a array of <TabBar.Item/>

      return (
          <TabBar style={{backgroundColor:'black'}}>
              {tabs}
          </TabBar>
      );
  },
});

Nothing special . I think.
After some hours for searching reason. I found a work around:
in 'TabNavigator.js' , remove export default and use module.exports = TabNavigator; to export the module .
I'm a js newbie , not sure it's a js or react native problem , or just related to this module.

In my project , I want to use function of navigator in child component of Tabnavigator such as navigator.push.but its doest work.

`_renderTabItem(img,selectedImg, tag, childView) {

    return (           

        <TabNavigator.Item
            selected={this.state.selectedTab === tag}
            renderIcon={() => <Image style={styles.tabIcon} source={img}/>}
            renderSelectedIcon={() => <Image style={styles.tabIcon} source={selectedImg}/>}
            onPress={() => this.setState({ selectedTab: tag })}>
            {childView}
        </TabNavigator.Item>            
    );
}`

<TabNavigator hidesTabTouch={false} tabBarStyle={tabBarStyle} sceneStyle={sceneStyle}> {this._renderTabItem(HOME_NORMAL, HOME_FOCUS, HOME, <ListPage/>)}
I want in use pop and push etc.error is undefined is not a function (evaluating 'this.props.nav.push({id:name})')

Such that when user navigate between tabs view state is not lost.

renderIcon={() => <Image source={require('image!home')} style = {styles.size}/>}
renderSelectedIcon={() => <Image source={require('image!home')} style = {styles.size}/>}

I'm trying to figure out how to get some kind notification if the user switches between scenes. I need the notification to stop/pause a video in one if my scenes. Otherwise it continues playing in the background. I didn't find anything in the code or in the doc. Is there some workaround for this or did I miss something.

Thanks

Like Title says, i am trying to use this module as topBar Tabs for my Android Application. Tried several Navigator Tabs in the past, 'react-native-scrollable-tab-view' was actually my favourite, but there seems to be a lot of issues especially after updating my RN to 0.15

Help! Like the title says, after i have update my react native to 0.16 the TabNavigator won't work. No idea how to explain my issue. THis is the error Message:

The TabNavigator is in the renderScene of my Navigator Component....

render: function () {
    var self = this;
    console.log('TabsAndroid render');
    return (
        <View style={{flex:1}}>
            <ToolbarAndroid
                title="ToolBar"
                subtitle={toolbarTitle (self.state.selectedTab)}
                titleColor='white'
                subtitleColor='white'
                style={mainStyle.toolbar}
                actions={toolbarActions(self.state.selectedTab)}
                onActionSelected={this._onActionSelected}>
            </ToolbarAndroid>
            <Navigator
                renderScene={this.renderScene}
                navigator={self.props.navigator}
            />
        </View>
    )

},


    return (
        <TabNavigator
            tabBarStyle={{ padding: 10, backgroundColor: VALUES.COLOR.COLOR_BLUE, height: tabBarHeight, top:0 }}
            sceneStyle={{ backgroundColor: 'transparent', paddingBottom: tabBarHeight }}>
            <TabNavigator.Item
                selected={self.state.selectedTab === 'network'}
                title={STRINGS.networkNavigationTitle}
                renderIcon={() => <Image style={{width: 25, height:25}} source={require('../../Images/ic_network_icon_dark.png')} />}
                renderSelectedIcon={() => <Image style={{width: 25, height:25}} source={require('../../Images/ic_network_icon_light.png')} />}
                onPress={() => this.setState({ selectedTab: 'network' })}>
                <View style={{flex: 1, marginTop: marginTop}}>
                    <NetworkRoute/>
                </View>
            </TabNavigator.Item>
            <TabNavigator.Item
                selected={self.state.selectedTab === 'news'}
                title={STRINGS.newsNavigationTitle}
                renderIcon={() => <Image style={{width: 25, height:25}} source={require('../../Images/ic_news_icon_dark.png')} />}
                renderSelectedIcon={() => <Image style={{width: 25, height:25}} source={require('../../Images/ic_news_icon_light.png') } />}
                onPress={() => self.setState({ selectedTab: 'news' })}>
                <View style={{flex: 1, marginTop: marginTop}}>
                    <NewsRoute/>
                </View>
            </TabNavigator.Item>
            <TabNavigator.Item
                selected={self.state.selectedTab === 'tabThree'}
                title={STRINGS.tabThreeNavigationTitle}
                renderIcon={() => <Image style={{width: 25, height:25}} source={require('../../Images/ic_pickup_icon_dark.png')} />}
                renderSelectedIcon={() => <Image style={{width: 25, height:25}} source={require('../../Images/ic_pickup_icon_light.png')} />}
                onPress={() => this.setState({ selectedTab: 'tabThree' })}>
                <View style={{flex: 1, marginTop: marginTop}}>
                    <tabThreeRoute/>
                </View>
            </TabNavigator.Item>
            <TabNavigator.Item
                selected={self.state.selectedTab === 'more'}
                title={STRINGS.moreNavigationTitle}
                renderIcon={() => <Image style={{width: 25, height:25}} source={require('../../Images/ic_further_icon_dark.png')} />}
                renderSelectedIcon={() => <Image style={{width: 25, height:25}} source={require('../../Images/ic_further_icon_light.png') } />}
                onPress={() => this.setState({ selectedTab: 'more' })}>
                <View style={{flex: 1, marginTop: marginTop}}>
                    <MoreRoute/>
                </View>
            </TabNavigator.Item>
        </TabNavigator>
    )
},

Hi James,

So I tried implementing the tab bar very similar to how it is explained on https://facebook.github.io/react-native/docs/tabbarios.html#content but I get errors. I enabled the babel options. An example of how to implement this component would be sweet. I tried the following code:

render(){
        return(
            <View style={styles.appContainer}>
                <TabBar selectedTab={this.state.selectedTab} barTintColor="rgba(74,74,74,0.8)" tintColor="white" >
                    <TabBar.Item
                        selected={this.state.selectedTab === 'home'}
                        icon={require('image!home-tab-icon-white')}
                        onPress={()=>{
                        this.setState({
                        selectedTab:'home'
                    });
                    }} style={styles.tab}>
                        <Home/>
                    </TabBar.Item>
                    <TabBar.Item
                        selected={this.state.selectedTab === 'search'}
                        icon={require('image!search-tab-icon-white')}
                        onPress={()=>{
                        this.setState({
                            selectedTab:'search'
                        });
                    }} style={styles.tab}>
                        <Search/>
                    </TabBar.Item>
                    <TabBar.Item
                        selected={this.state.selectedTab === 'lists'}
                        icon={require('image!profile-tab-icon-white')}
                        style={styles.tab}>
                        <Lists />
                    </TabBar.Item>
                    <TabBar.Item
                        selected={this.state.selectedTab === 'profile'}
                        icon={require('image!profile-tab-icon-white')}
                        onPress={()=>{
                        this.setState({
                            selectedTab:'profile'
                        });
                    }} style={styles.tab}>
                        <Profile/>
                    </TabBar.Item>
                    <TabBar.Item
                        selected={this.state.selectedTab === 'settings'}
                        icon={require('image!settings-tab-icon-white')}
                        onPress={()=>{
                        this.setState({
                            selectedTab:'settings'
                        });
                    }} style={styles.tab}>
                        <Settings/>
                    </TabBar.Item>
                </TabBar>
            </View>
        )
    }

Thank you!

renderIcon={() => <Image source={require('image!home')} style = {styles.size}/>}
renderSelectedIcon={() => <Image source={require('image!home')} style = {styles.size}/>}

I had install react-native-tab-navigator and import it.
When i run react-native run-ios or react-native run-android, it can display success.
but click the item, didn't change the item color and the children view.
Isn't it onpress failure?
react-native and react evrsion are :

    "react": "^0.14.8",
    "react-native": "^0.25.1",

the component code :

      <TabNavigator.Item
        selected={this.state.selectedTab === tag}
        title={title}
        renderIcon={() => icon_normal}
        renderSelectedIcon={() => icon_onpress}
        selectedTitleStyle={styles.selectTitleStyle}
        renderBadge={()=>this._renderBadge(badgeCount)}
        onPress={() => this.setState({ selectedTab: tag })}>
        {childView}
      </TabNavigator.Item>

all props are useful, how can i to solve the problem？

2015-12-06 15:39:32.406 [error][tid:com.facebook.React.RCTExceptionsManagerQueue] Unhandled JS Exception: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

I got this Exception when use<TabNavigator></TabNavigator> , in react-native 0.16.0

when i used route for change activity,I can go to another activity,but tabbar is still showed.How I can hide the bar,how Can I do in the child activity?

Where might I look if I want to modify this code to animate the tab changes. I dont want side scrolling that scrollable tab view has, i like touching the tabs only. But, I 'd like to animate / smooth transition instead of the instant transition now.

How might this be possible?

(i know scrollable tab view can lock, still, I prefer to use this package - react native tab navigator).

how to set the text's fontsize in the tabbar?

react-native-tab-navigator/TabBar.js. A semicolon is required after a class property

Easy fix, just add the semicolon after the propTypes.

I attempt to upgrade to react-native 0.26 but a warning message appears.
I explain you my workflow :

• react-native: 0.26
• react: 15.0.2
• react-native-router-flux: #master

The warning message is

Warning: Element: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)

on this line https://github.com/exponentjs/react-native-tab-navigator/blob/master/TabNavigator.js#L48.

According to https://fb.me/react-special-props, using key props is not a good idea.

Hey there. I didn´t get it how to enable babel options... I am using WebStorm, do i need to enable it in here?

Where is the docs?

I would like to giving different styles (ie, backgroundColor) to each tab container, even different style depends on selected or not. is it possible?

Currently, it is assumed that an Image component is used for the icon, and will throw a warning if a different component is used (since the tintColor style is not supported for other types of components).

Since icon fonts are also widely used, would you be open to creating a new iconType option that allowed you to specify text or image (the default), and would only add the default tintColor style if the type was an image?

Thanks again for all your hard work

My env don't recognise mutiline import, is there something else to do ?

I was wondering if anyone had manage to optimise tab switching when displaying long lists.

I'm having difficulty doing this I get a significant lag. I'm sure the issue is linked to the listview component and it's problems with long lists. I was wondering though if there was a way to somehow keep each tab in memory to improve this.

Thanks

Thanks for implementing this, it's been great so far. I'm wondering how to set the active/inactive colors for icons. For TabBarIOS, there was a tintColor prop. So for the below example, how would I change the icon for the A tab to white instead of blue? Thanks in advance for your help.

Hey could you update the readme file with like how to install and compile using babel ? it is not that clear

thx

The way I am now doing this now is:

Import the Badge module
import Badge from './node_modules/react-native-tab-navigator/Badge';

In the TabNavigator.Item I add it int the renderBadge function like this:
<TabNavigator.Item renderBadge={() => <Badge style={styles.tabBarBadge}>1</Badge>} </TabNavigator.Item>

Would it be possible to expose the Badge in the TabNavigator? Like the TabNavigator.Item

And I was not that sure wether it's the right place.

And I was just want to hide after navigator.push...

It would be nice to be able to render any component with the renderIcon and renderSelectedIcon properties. Using <Text /> or <View /> works fine, but this warning pops up:

Warning: Failed propType: Invalid props.style key `tintColor` supplied to `View`

I ran into this while implementing react-native-vector-icons - which uses <Text />.

Hi guys,

I'm currently using your lib but I'm not a big fan of how the onPress handler is currently working.
I'm going to fork to make some changes about this as the project I'm working on would greatly benefit from these, and I thought you might be interested in some of these ideas.

First, to be clear, I like the idea of adding a maximum of flexibility by letting dev specify an handler on every tab item. But when you want to perform the same action every time you press on a tab, this is quite an unneeded overhead to me.

In this case having the possibility to pass the onPress handler to the top wrapper could be nice.

Example:

<TabNavigator onPress={() => alert('Pressed')}>
  <Item>...</Item>
  <Item>...</Item>
  ...

Of course, having this behaviour is useless if you can't change the selected scene, that's why on top of this change I would allow for a name or id property to be added on the TabNavigator.Item component. This way the onPress handler would be able to receive it as an argument and we could easily change the selected tab by using it.

Example:

<TabNavigator onPress={(event, tabId) => this.setState({activeTab: tabId})}>
  <Item id="tab1" selected={this.state.activeTab === 'tab1'}>...</Item>
  <Item id="tab2" selected={this.state.activeTab === 'tab2'}>...</Item>
  ...

To keep the granularity, we can make this so if the onPress handler is not on the Item then we fallback on the top level one. If no id or name property is placed on the Item then it would be undefined as the second argument. This would also ensure the api is backward compatible.

Please tell me your thoughts on this and I could make a PR on this repo, enabling us to not having to maintain a fork.

Thanks!!

Hey there.

In my Tab Component i set the initialTab in my getInitialState as follows:

getStateFromStore: function () {
    return {
        selectedTab: 'tab1'
    }
},

I use two Tabs with the TabNavigator, the problem i have now, is that when i set it initial to tab1 it jumps "sometimes" from tab2 to tab1. I tried setting nothing because i thought it might be handles in the react-native-tab-navigator component.
Actually i hope someone can show me their solution i just coudn´t figure out how to set the initial selectedTab so there is no jumping around

My TabNavigators:

      <TabNavigator
            tabBarStyle={{padding: 10, backgroundColor: `white`, height: tabBarHeight, top:0, borderBottomWidth: 0.5, borderBottomColor: `grey`}}
            sceneStyle={{ backgroundColor: 'red', paddingBottom: tabBarHeight }}>
            <TabNavigator.Item
                selected={this.state.selectedTab === 'tab1'}
                title={"TAB1"}
                titleStyle={{fontSize: 16, fontWeight: 'bold'}}
                onPress={() => this.setState({ selectedTab: 'tab1' })}>
                <View style={{flex: 1, marginTop: marginTop}}>
                    <Tab1Screen
                        {...this.props}/>
                </View>
            </TabNavigator.Item>
            <TabNavigator.Item
                selected={this.state.selectedTab === 'tab2'}
                title={"TAB2"}
                titleStyle={{fontSize: 16, fontWeight: 'bold'}}
                onPress={() => this.setState({ selectedTab: 'tab2' })}>
                <View style={{flex: 1, marginTop: marginTop}}>
                    <Tab2Screen
                        {...this.props}/>
                </View>
            </TabNavigator.Item>
        </TabNavigator>