aksonov / react-native-tabs Goto Github PK

View Code? Open in Web Editor NEW

725.0 24.0 117.0 260 KB

React Native platform-independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons)

License: Apache License 2.0

Java 17.21% JavaScript 44.51% Objective-C 38.28%

react-native-tabs's Introduction

react-native-tabs

React Native platform-independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons)

Why I need to use it?

Decouple content views from tab bar
Platform-indepedent
Possibility to use Flux actions with react-native-router-flux to switch between content views
Suitable for both bottom tab bar as well as upper sectioned buttons (you just need to define style properly)
Custom views for each tab icon

How it works?

Component just iterates over all its children and makes them touchable ('name' is only required attribute of each child). selectedStyle property represents style should be applied for selected tabs. This property could be set for all tabs or for individual tab. selectedIconStyle represents style applied for selected tab. The same, onSelect handler could be set globally for all tabs or/and for individual tab. You can lock tab buttons (require user to use long press to actuate the button) by passing prop {locked: true}.

Example

Example makes selected icon color red and change the state of example view. To switch to other views you may use react-native-router-flux component or own navigation controller

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-native';

import Tabs from 'react-native-tabs';

class Example extends Component {
  constructor(props){
    super(props);
    this.state = {page:'second'};
  }
  render() {
    return (
      <View style={styles.container}>
        <Tabs selected={this.state.page} style={{backgroundColor:'white'}}
              selectedStyle={{color:'red'}} onSelect={el=>this.setState({page:el.props.name})}>
            <Text name="first">First</Text>
            <Text name="second" selectedIconStyle={{borderTopWidth:2,borderTopColor:'red'}}>Second</Text>
            <Text name="third">Third</Text>
            <Text name="fourth" selectedStyle={{color:'green'}}>Fourth</Text>
            <Text name="fifth">Fifth</Text>
        </Tabs>
          <Text style={styles.welcome}>
              Welcome to React Native
          </Text>
          <Text style={styles.instructions}>
              Selected page: {this.state.page}
          </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('Example', () => Example);

react-native-tabs's People

Contributors

Stargazers

Watchers

Forkers

mozillo miguelramosfdz tribemedia malkomalko wfxiang08 wesley1001 teamlaserbeam chetstone ktastrophy ramilushev smallsaucepan lrettig nikolal 231907786 happyming9527 cmunson jondot gilesbradshaw evollu sashankg livecirrus yuilsang wkrause13 num3a ultragtx froelund moneythink 81516741 dnainfo cncowboy ken-yao sbefort arneson lprhodes rexsun boghbogh guo-guo healthready voyageivi lgan1989 edtechfoundry ackdav jljlpch ruskid nyc1002 future-challenger eubotas snupa zimo888 mrsunboss bensinc vanng822 kumarpatel kielan digideskio ahsanwani augisticz zhangxianglu1984 venethub jacqt stoneweb rubythonode slestang iossocket shilohchis minhnhut0602 dengzhinmin minhkhanb sgp715 nabn onlinesmiledev c0ndu17 paloma-group zhuyunxiang hellomaya exposio toby1991 nadeesha pedropolisenso bhavanpatel trendingtechnology uciaqgjj haipengz techymanik rikur xxapp dcalixto cgee leesren hoangvx brainycouchmike dhamu143 hhy5277 niralivasoya sambhav2612 bensonby akash0208 elijah23johnson abdulisabdul devbpulse

react-native-tabs's Issues

Tabs scrolling

Can we opportunity horizontally scroll tabs?

Android example doesn't work

Hi,
Your Example project doesn't work properly, I get the following error:
ReferenceError: Can't find variable: require (line1 in the generated bundle)
Do you know why?

Additionally, I implement the tab on my own project, work very well in iOS, however, in Android I get the following error:
undefined is not an object (evaluating 'el.props.name')
The error occurred on line 29 of your index.js

Thanks for helping

this project doesnt work anymore

i tried everything the code seem to be broken...

Single child doesn't work

If you run this code it will throw this error "TypeError: this.props.children.filter is not a function"
<Tabs> <Text name="test">Test</Text> </Tabs>

I have been trying to understand where the problem is but hard to find. Most probably it comes from JSX or react. Open this ticket in case anyone is more involved and understand this issue.

One can add a "null as child" to avoid this issue.

Allow to set badge to icon.

Allow to set badge on a tab item. Similar to https://facebook.github.io/react-native/docs/tabbarios-item.html#badge

[Android] Page re-renders every-time I change tab.

I have a listview in my page content, which loads some data from online.
But each time I switch to the tab, it re-renders making a new http request.
Is there a way to not re-render the page when I switch tab??

Feature Request - TouchableWithoutFeedback as option instead of TouchableOpacity

If I use a pair of images for my icons (one colorful and one grey), I find the TouchableOpacity effect to be redundant. It's better to just have the icon toggle colors immediately without the TouchableOpacity effect. It would be nice to have the option to use TouchableWithoutFeedback without having to fork and modify the library. I can submit a pull request if you are open to that.

Unsupported top level event type "topScrollBeginDrag" dispatched

I am getting this error when trying to drag up my bottom tabbar, which shouldn't result in anything happening at all!

"react-native": "^0.50.3"

log

Unsupported top level event type "topScrollBeginDrag" dispatched
Unsupported top level event type "topScrollEndDrag" dispatched
Unsupported top level event type "topMomentumScrollBegin" dispatched
Unsupported top level event type "topMomentumScrollEnd" dispatched

not working using <Tabs><View name="">

I am new in react-native and using this plugin,
it simply work to my code,
the simple code using on the is totally work.
but somehow I need to insert inside the , but it is not possible in react, so I changed the code to any other code and found the error "undefined is not an object (evaluating 'el.props.name')", how it used to be? to using inside the
this is my Code
<Tabs selected={this.state.page} style={{backgroundColor:'white'}} selectedStyle={{color:'red'}} onSelect={el=>this.setState({page:el.props.name})}> <View name="cerita"> <Text>Cerita</Text> </View> <View name="search"> <Text>Search</Text> </View> <View name="notify" selectedStyle={{color:'green'}}><Text>Belum</Text></View> </Tabs>

React Native Tabs Not Showing Up

I'm pretty sure I've followed the directions correctly. I've detailed the issue w/ the code here

https://stackoverflow.com/questions/44834249/react-native-tabs-not-displaying

Not sure why tabs aren't showing up :(

Using React Native 0.45

import { Scene, Router } from 'react-native-router-flux';
import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TabBarIOS
} from 'react-native';
import PropTypes from 'prop-types';
import { db, fbAuth } from '~/config/settings';
import { isAuthed, notAuthed } from '~/redux/modules/user';
import { connect } from 'react-redux';
import { Actions } from 'react-native-router-flux';
import { PreSplash } from '~/components/PreSplash';
import { VidContainer } from '~/components/Vid';
import { Splash } from '~/scenes/Splash';
import { Feed } from '~/scenes/Feed';
import { Record } from '~/components/Record';

class App extends Component {
  render() {
    return (
      <Router>
        <Scene key="root">
          <Scene
            key="presplash"
            component={PreSplash}
            hideNavBar={true}
            initial={true}
          />
          <Scene
            key="splash"
            component={Splash}
            hideNavBar={true}
          />
          {/* Tab container */}
          <Scene key="tabbar" tabs={true} tabBarStyle={styles.tabBarStyle}>
            {/* Tab and it's scenes */}
            <Scene key="myFeed" title="Feed">
              <Scene
                key="feed"
                component={Feed}
                title="Previews"
                hideNavBar={false}
              />
            </Scene>
          </Scene>
          <Scene
            key="vid"
            component={VidContainer}
            hideNavBar={true}
          />
          <Scene
            key="record"
            component={Record}
            hideNavBar={true}
          />
        </Scene>
      </Router>
    );
  }
}

const styles = StyleSheet.create({
  tabBarStyle: {
    borderTopWidth : .5,
    borderColor    : '#b7b7b7',
    backgroundColor: 'black',
    opacity        : 1
  }
})

export default connect()(App);

Any ideas?

Thanks

How to style selected children

<Tabs selected={this.state.page} style={{backgroundColor:'white', flex:1}} onSelect={el=>this.setState({page:el.props.name}) }>

    <View name="plan" style={styles.tabButtons}><Icon size={25} name="dot-circle-o"/><Text>Plan</Text></View>

    <View name="depatures" style={styles.tabButtons}><Icon size={25} name="angle-double-right"/><Text name="depatures" selectedStyle={{color:'green'}}>Depatures</Text></View>

    <View name="travels" style={styles.tabButtons}><Icon size={25} name="star-o" /><Text >My travels</Text></View>

    <View name="about" style={styles.tabButtons}><Icon size={25} name="ellipsis-h"/><Text>About</Text></View>

</Tabs>

I have this view, sorry for little spacing, but just POCing. But basically I would like my depatures text to turn green when selected, but I cant get it to work. Is this because of child elements inside view or is this not possible with this framework?

a bit confused

about how I can stop it sitting in front of/behind other controls on the page and just be part f the normal layout..

create if else in ROOT scene for choose tabs component

im have 2 costum tabs for user & admin. so after user login, the router flux will display tabs by catagory. im try to put if else in my root scene, but no work.

class RootRouter extends React.Component{
 
  constructor(props){
    super(props)
    this.state = {
      userId : '',
      userStatus:''
    }
  }

  componentDidMount () {
    AsyncStorage.getItem("status")
    .then(res => JSON.parse(res))
    .then(data => this.setState({
        userStatus : data
    }))
    .catch(err => console.log(err))    
}

  render () {
    return (
      <Router>
        <Scene key="root">
          <Scene key="login" component={Login} hideNavBar />
            {

              this.state.userStatus === 0 
              // IF ADMIN LOGIN
              ? (
                <Scene
                  key="main"
                  tabs={true}
                  tabBarPosition="bottom"
                  swipeEnabled
                  showLabel={false}
                  activeBackgroundColor="white"
                  inactiveBackgroundColor="#251a34"
                  tabBarStyle={{ backgroundColor: '#eee' }}
                >
                  <Scene key="tab_feed" title="Home" iconName="home" icon={TabIcon} component={Home} initial hideNavBar />
                </Scene>
              )
               // IF USER LOGIN
              : (
                <Scene
                  key="main"
                  tabs={true}
                  tabBarPosition="bottom"
                  swipeEnabled
                  showLabel={false}
                  activeBackgroundColor="white"
                  inactiveBackgroundColor="#251a34"
                  tabBarStyle={{ backgroundColor: '#eee' }}
                >
                  <Scene key="tab_feed" title="Home" iconName="home" icon={TabIcon} component={Home} initial hideNavBar />
                  <Scene key="tab_search" title="Search" iconName="search" icon={TabIcon} hideNavBar component={SearchEvent}
                  />
                </Scene> 
              )
            }
        </Scene>
      </Router>
    );
  }
  
}

export default RootRouter;

im try to refresh root screne with Actions.tab_feed({refresh: true}) , but still not work.
Please anyone idea to solve this? Thanks

Need example for flux tab content navigation

Readme reads: Possibility to use Flux actions with react-native-router-flux to switch between content views.

How? Or in the Readme, link to some starting point?

Push to NPM?

When you have a chance? Thanks!

Doesn't work with Navigator

It seems not to work with navigator as tab item.

  getTabView() {
    switch (this.state.page) {
      case 'Home':
        return <HomeNavigator/>
        break;
      case 'Drafts':
        return <Drafts/>
        break;
      case 'Tasks':
        return <Tasks/>
        break;
    }
  }

  render() {
    return (
      <View style={styles.container}>
        {this.getTabView()}
        <Tabs style={{backgroundColor:'white'}} selected={this.state.page} onSelect={this.tabSelected.bind(this)}>
          <View name='Home' style={styles.tabItem} selectedIconStyle={styles.selectedIconStyle}>
            <Icon name='ios-home' size={24} color='rgba(0, 0, 0, 0.54)' />
            <Text>Home</Text>
          </View>
          <View name="Drafts" style={styles.tabItem} selectedIconStyle={styles.selectedIconStyle}>
            <Icon name='ios-paper-outline' size={24} color='rgba(0, 0, 0, 0.54)' />
            <Text>Drafts</Text>
          </View>
          <View name="Tasks" style={styles.tabItem} selectedIconStyle={styles.selectedIconStyle}>
            <Icon name='ios-checkmark-circle-outline' size={24} color='rgba(0, 0, 0, 0.54)' />
            <Text>Tasks</Text>
          </View>
        </Tabs>
      </View>
    );
  }

In this if I change my view as any other view instead of HomeNavigator, it works perfectly. But not with a navigator component which is original navigator. However the same HomeNavigator works well if not inside tabs.

Can anyone help please?

Apply Top shadow to the whole tabbar?

I set it up like so:

   <Tabs
        selected={this.state.page}
        style={styles.tabbar}
        onSelect={el=>this.setState({page:el.props.name})}>

        <View
             name="first"
             style={styles.tab}>
            <Icon name={"flash-on"} size={24} color={this.state.page=='first' ? "#22b5e9": 'rgba(0, 0, 0, 0.54)'} />
            <Text style={this.tabTextColorCheck("first")}>
              Questions
            </Text>
           </View>

but If I apply shadow every element in the tabbar gets shadow, which I dont want. How can I apply shadow only to the tabbar on top?

onSelect never fires

Hi this is my view

<View style={styles.mainContainer}> <Tabs style={{backgroundColor:'white'}} onSelect={function(el){ self.setState({ category: el.props.name, page:0 }); self.GetInitialPage(); return {style:{color:'red'}} }}> <Text name="finanace&">השקעות</Text> <Text name="technology&">טכנולוגי</Text> <Text name="marketsection&">שיווק</Text> <Text name="entrepsection&">יזמות</Text> </Tabs> <ListView dataSource={this.state.articles} renderRow={this.renderArticleSnippet} style={styles.listView} onEndReachedThreshold={200} onEndReached={this.GetNextPage}/> </View>

The onSelect action never fires, also tried putting a break point in the module's onSelect function but it never gets fired either. what may cause that?

How to use it with react-native-router-flux?

Hello,

quite new to the react scene and I am struggling to understand some flow...

I have an index page where I registered all the scenes, as suggested on the router-flux docs:

const scenes = Actions.create(
    <Scene key="root" hideNavBar={true}>
        <Scene key="Lessons" tabLabel="Lessons" component={Lessons} />
        <Scene key="Trainees" tabLabel="Trainees" component={Trainees} initial={true} />
        <Scene key="TraineeDetails" component={TraineeDetails}>
            <Scene key="TraineeDetailsLessons" component={TraineeDetailsLessons} initial={true} />
            <Scene key="TraineeDetailsPurchases" component={TraineeDetailsPurchases} />
            <Scene key="TraineeDetailsContacts" component={TraineeDetailsContacts} />
        </Scene>
        <Scene key="Purchases" tabLabel="Purchases" component={Purchases} />
        <Scene key="Settings" tabLabel="Settings" component={Settings} />
    </Scene>
);

And then I call

return (
            <Router scenes={scenes} createReducer={reducerCreate} getSceneStyle={getSceneStyle} />
        );

in my redner method... works fine...

but then on the page
TraineeDetails I have a Tabbar on the top... and I would like to display content from the assigned components

The code in my TraineeDetails:


/**
* Trainee details
*/
'use strict';

import React, { Component } from 'react';
import { StyleSheet, View, StatusBar, Image } from 'react-native';

import Icon from 'react-native-vector-icons/MaterialIcons';
import Tabs from 'react-native-tabs';
import Config from '../../constants/Config';

import {Actions} from 'react-native-router-flux';

class TraineeDetails extends Component {

    constructor(props, context) {
        super(props, context);
        this.state = {
            tab: 'today'
        };
    }

    componentDidMount(){
        StatusBar.setBackgroundColor(screenConfig.primaryColor, true);
    }

    goBack(){
        Actions.Trainees();
    }

    onSelectTab(el){
        console.log('PROPS: ', el.props);
        console.log('NAME: ', el.props.name);
        console.log('VIEW: ', el.props.view);

        //Actions[el.props.view]({data:this.props.data});

        this.setState({tab: el.props.name});
        this.setState({tabContent: el.props.view});
    }

    render() {

        const Player = this.props.data;
        return (
            <View>
                <Icon.ToolbarAndroid
                    title={Player.name}
                    navIconName="arrow-back"
                    onIconClicked={this.goBack.bind(this)}
                    overflowIconName="arrow-drop-down"
                    actions={actions}
                    style={styles.toolbar}
                    backgroundColor={screenConfig.primaryColor}
                    titleColor='white'
                >
                </Icon.ToolbarAndroid>

                <View style={styles.container}>
                    <View style={styles.header}>
                        <Tabs
                            style={styles.tabs}
                            selected={this.state.tab}
                            selectedStyle={styles.tabIconSelected}
                            selectedIconStyle={styles.tabIconSelected}
                            onSelect={this.onSelectTab.bind(this)}
                        >
                            <Icon view="TraineeDetailsLessons" name="today" size={36} />
                            <Icon view="TraineeDetailsPurchases" name="local-atm" size={36} />
                            <Icon view="TraineeDetailsContacts" name="message" size={36} />
                        </Tabs>

                        <Image source={{uri: Player.avatar}} style={styles.avatar} />
                    </View>

                    <View>
                        {/* NEED THE TAB CONTENT HERE */}
                    </View>
                </View>
            </View>
        );
    }
}
// ..... and so on

How do I insert the component and re-render it each time the tab is tapped?

In your example you just change a variable and text on the same scene... would be helpful if you could add a container and change the content (loaded dynamically from a component)

UNMET PEER DEPENDENCY [email protected]

+-- UNMET PEER DEPENDENCY [email protected]
`-- [email protected]

selectedStyle don't work.

selectedStyle don't work.
Follow is my code,i set the text color red,but it does not work,selectedIconStyle is work fine:

<Tabs selected={this.state.page}
                              selectedStyle={styles.selectedStyle}
                              onSelect={el=>this.setState({page:el.props.name})}
                              selectedIconStyle={styles.selectedIconStyle}
                              style={{top:0,height:tabHeight}}
                        >
                            <Text name="1" >日</Text>
                            <Text name="2" >周</Text>
                            <Text name="3" >月</Text>
                            <Text name="4" >年</Text>
                        </Tabs>

selectedStyle:{
      color:'red',
        fontSize:12
    },
    selectedIconStyle:{
        borderBottomWidth:2,
        borderBottomColor:'red',
        color:'red',
        height:tabHeight,
        // backgroundColor:'rgba(135,205,250,0.5)'
    },

"react": "16.0.0-alpha.12",
    "react-native": "0.45.1",
    "react-native-tabs": "^1.0.9",

tabs selection fails on child with name=0

if you index the tabs' children using numbers and you start at 0 the selection of tab 0 fails.

would like to submit a pr on this

Reload selected tab if again tap on same tab icon

Bump version

Hi!
Can you please bump version of the library, in order to have this functionality from npm package.

Thank you

Change background color of the selected tab.

I'm having trouble changing the backgroundColor of the selected tab to a darker color. Is there a way to do this?

TextInput with Tabs issue on Android and iOS

When TextInput included within tabs,

Behaviour on iOS: Tab content doesn't scroll up and hides the TextInput

Behaviour on Android: Need to click twice on TextInput to open Keyboard. i.e., Keyboard dismisses on 1st click and opens up on 2nd click

    "react-native": "0.64.3",
    "react-native-gesture-handler": "~1.10.3",
    "react-native-tab-view": "^3.1.1",

Double-tap scroll to top

I'm willing to submit a PR for this but I want to make sure the approach I take makes sense.

React-native has an onAccessibilityTap method which lets you define what to do on a double-tap. There's also a hand-rolled check (that I'm less-inclined to use).

This library is used in react-native-router-flux and so I'm not sure if it makes sense to create a PR here or there.

Essentially, I'd use onAccessibilityTap to fire off scrollTo() on the subview that the tab displays.

Example doesn't work

I copy and pasted your example, but the tabs don't all appear, only the "First" tab appears bottom and center.

How to change View

Like the simplicity. I am new to react native.How to change the main content view (eg. ScrollView) with tab changes?

thank you.

Tab bar position - Incomplete Doc

Suitable for both bottom tab bar as well as upper sectioned buttons (you just need to define style properly)

I don't think its properly documented.

Solution

<Tabs style={{ position: "relative" }}>
...
</Tabs>

Remove Opacity when button is clicked

Is there a way to prevent touchableopacity when a tab is clicked?

Another solution may be to set activeOpacity to 1.0, but not sure where to do that as well. Any help on this would be appreciated!

Not working on android

Hi, running example with react 0.13.3/native 0.11.4. It looks like this;

Swipe between tabs

Hello, In my app I need to swipe between tabs, is it posible with this component out of the box, if not what is the easiest way to implement this feature.

-alex

Does not work for falsey values of name

Since the selected value is calculated using (el.props.name || el.key) falsey values of el.props.name cause the current tab to not be identified properly e.g.

      <ScrollView>
        <Tabs
          style={{position: 'relative', top: 0}}
          selected={this.state.currentTab}
          onSelect={(el) => { this.switchTab(el.props.name) }}
          iconStyle={styles.tab}
          selectedIconStyle={styles.selectedTab}
          selectedStyle={styles.selectedTabText}
        >
          <Text name={0} style={styles.text}>Players</Text>
          <Text name={1} style={styles.text}>Log</Text>
        </Tabs>
        {this.props.children[this.state.currentTab]}
      </ScrollView>

Selected Can't Change Props

line 60:
{!self.props.selected && (self.state.selected == el.props.name) ? React.cloneElement(el, self.state.props) : el}

Should be?

{!self.props.locked && (self.state.selected == el.props.name) ? React.cloneElement(el, self.state.props) : el}

tabs how to combine with router-flex?

I have tried for long time, but it can not work out,can someone show me the code?

translucent support for iOS

Is there any plan for adding translucent support? TabbarIOS has it

Display Tab View on Top

How can I display the top view at the top of the screen, you have mentioned that it supports both top and bottom view, but I am not even able to see any property.
Kindly add properties and please also include the installation top your documentation, how to install it.

Thanks

Gif or image of the component

Hey thanks for the work, it's awesome,
I think you will get more people to try your component if you had a gif or image of the component running.
Again, thanks.

Any way to use base64 icons with text at bottom instead of only text in the Tab bar?

Like in TabBarIOS is there a way to use icons with text at the bottom?

With router-flux: Tab re-renders one more time

Using:
[email protected]
[email protected]
[email protected]
[email protected]

Description:

start app, renders tab "Feed" initially
switch to "Tab #2" and then back to "Feed" - this re-renders tab "Feed"
switching to second and back to initial tab does not re-render tab "Feed" again

I expect tabs to not re-render, but I think this is caused by tab 2 being rendered after clicked (and forces tab 1 to re-render as well). Is there an option to automatically render all tabs at start? Or is this behavior caused by something else? I've attached all that might be helpful, sorry if this post is very long.

Scenes:

//...
class AppNavigator extends React.Component
{
    render()
    {
        return <RouterWithRedux>
            <Scene key="root" style={{backgroundColor: 'yellow'}}>
                <Scene open={false} component={Drawer} key="drawer" sceneStyle={[AppStyle.sceneTab, {borderWidth: 1, borderColor: 'red'}]}>
                    <Scene key="main" tabs initial={true} tabBarStyle={{backgroundColor: 'rgba(0,0,0,.4)', borderWidth: 1, borderColor: 'blue'}}>
                        <Scene key="main_back" onPress={() => Actions.pop()} title="Back" icon={TabIcon} />

                        <Scene key="Page1" title="Feed" icon={TabIcon} initial={true} sceneStyle={{borderWidth: 1, borderColor: 'green'}}>
                            <Scene key="Feed" component={Scenes.Page1} hideNavBar={true} initial={true} sceneStyle={{borderWidth: 1, borderColor: 'yellow', backgroundColor: 'yellow'}} />
                            <Scene key="detail" component={Scenes.Page3} hideNavBar={true} title="PostDetail" />
                        </Scene>

                        <Scene key="Page2" component={Scenes.Page2} hideNavBar={true} title="Tab #2" icon={TabIcon} />
                        <Scene key="open_drawer" title="Drawer" icon={TabIcon} onPress={() => Actions.refresh({key: 'drawer', open: value => !value })} />
                    </Scene>

                    <Scene key="auth" type={ActionConst.REPLACE}>
                        <Scene key="Login" component={Scenes.Login} title="Login" initial={true} />
                        <Scene key="Register" component={Scenes.Register} title="Register" />
                    </Scene>
                </Scene>
            </Scene>
        </RouterWithRedux>
    }
}

function mapDispatchToProps(dispatch)
{
    return bindActionCreators(ActionCreators, dispatch);
}

export default connect((state) => {
    return {}
}, mapDispatchToProps)(AppNavigator);

Page1.js (Feed tab):

//...
class Page1 extends Component
{
    _addRecipe()
    {
        this.props.addRecipe();
    }

    componentDidMount()
    {
        this.props.fetchPosts();
    }

    render()
    {
        console.log('page1props', this.props);

        return <AnimatableScrollView
            animation="fadeIn"
            contentContainerStyle={[ ScrollViewStyle.contentContainerStyle ]}
            style={[ AppStyle.sceneTabInner, ScrollViewStyle.style ]}
        >
            <Animatable.Text animation="zoomIn" style={{color: 'white'}} onPress={Actions.Page2}>
                Page1
            </Animatable.Text>
            <Text onPress={() => this._addRecipe()}>Add recipe</Text>
            <Text>Recipe count: {this.props.recipeCount}</Text>
            <Text style={{marginTop:40}} onPress={() => Actions.auth()}>Goto login</Text>
            {this.props.posts.length > 0 && this.props.posts.map((value, key) => {
                postAnimationDelay += postAnimationIteration;

                return <Animatable.View animation="fadeInUp" delay={postAnimationDelay} duration={300} key={value.id} style={{marginTop: 20}}>
                    <TouchableOpacity onPress={() => Actions.detail({
                        post: value
                    })}>
                        <Text>{value.title}</Text>
                    </TouchableOpacity>
                </Animatable.View>
            })}
            <Text onPress={() => Actions.detail()} style={{marginTop:40}}>asdf</Text>
        </AnimatableScrollView>
    }
}


export default connect((state) => { // state == global state
    return {
        routes: state.routes,
        searchedRecipes: state.searchedRecipes,
        recipeCount: state.recipeCount,
        posts: state.posts
    }
}, (dispatch) => bindActionCreators(ActionCreators, dispatch))(Page1);

Page2.js (Tab #2):

//...
class Page2 extends Component
{
    _removeRecipe()  { this.props.removeRecipe();  }

    render()
    {
        return <View style={{flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'red'}}>
            <Text style={{color: 'white'}} onPress={Actions.pop}>
                Page2
            </Text>
            <Text onPress={() => this._removeRecipe()}>Remove recipe</Text>
            <Text>Recipe count: {this.props.recipeCount}</Text>
            <Text style={{marginTop:40}} onPress={() => Actions.auth()}>Goto login</Text>
        </View>
    }
}

export default connect((state) => { // state == global state
    return {
        routes: state.routes,
        searchedRecipes: state.searchedRecipes,
        recipeCount: state.recipeCount
    }
}, (dispatch) => bindActionCreators(ActionCreators, dispatch))(Page2);

Console ouput of Demo GIF:

Running application App ({
    initialProps =     {
    };
    rootTag = 1;
})
Running application "App" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
fetching url https://...
 action @ 13:06:08.324 REACT_NATIVE_ROUTER_FLUX_FOCUS 
 prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[0]}
 action Object {scene: Object, type: "REACT_NATIVE_ROUTER_FLUX_FOCUS"}
 next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[0]}
 action @ 13:06:08.336 REACT_NATIVE_ROUTER_FLUX_FOCUS 
 prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[0]}
 action Object {scene: Object, type: "REACT_NATIVE_ROUTER_FLUX_FOCUS"}
 next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[0]}
 action @ 13:06:08.749 REACT_NATIVE_ROUTER_FLUX_REFRESH 
 prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[0]}
 action Object {key: "0_drawer", open: false, type: "REACT_NATIVE_ROUTER_FLUX_REFRESH"}
 next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[0]}
 action @ 13:06:08.753 REACT_NATIVE_ROUTER_FLUX_FOCUS 
 prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[0]}
 action Object {scene: Object, type: "REACT_NATIVE_ROUTER_FLUX_FOCUS"}
 next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[0]}
response Object {limit: 10, offset: 0, data: Array[10], single_result: false}
 action @ 13:06:09.151 SET_POSTS 
 prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[0]}
 action Object {type: "SET_POSTS", posts: Array[10]}
 next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
 action @ 13:06:38.433 REACT_NATIVE_ROUTER_FLUX_JUMP 
 prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
 action Object {key: "Page2", type: "REACT_NATIVE_ROUTER_FLUX_JUMP"}
 next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
 action @ 13:06:38.438 REACT_NATIVE_ROUTER_FLUX_FOCUS 
 prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
 action Object {scene: Object, type: "REACT_NATIVE_ROUTER_FLUX_FOCUS"}
 next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
 action @ 13:06:38.469 REACT_NATIVE_ROUTER_FLUX_FOCUS 
 prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
 action Object {scene: Object, type: "REACT_NATIVE_ROUTER_FLUX_FOCUS"}
 next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
 action @ 13:06:40.121 REACT_NATIVE_ROUTER_FLUX_JUMP 
 prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
 action Object {key: "Page1", type: "REACT_NATIVE_ROUTER_FLUX_JUMP"}
 next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
 action @ 13:06:40.125 REACT_NATIVE_ROUTER_FLUX_FOCUS 
 prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
 action Object {scene: Object, type: "REACT_NATIVE_ROUTER_FLUX_FOCUS"}
 next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
 action @ 13:06:40.137 REACT_NATIVE_ROUTER_FLUX_FOCUS 
 prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
 action Object {scene: Object, type: "REACT_NATIVE_ROUTER_FLUX_FOCUS"}
 next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
fetching url https://...
response Object {limit: 10, offset: 0, data: Array[10], single_result: false}
 action @ 13:06:41.602 SET_POSTS 
 prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
 action Object {type: "SET_POSTS", posts: Array[10]}
 next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
 action @ 13:06:50.044 REACT_NATIVE_ROUTER_FLUX_JUMP 
 prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
 action Object {key: "Page2", type: "REACT_NATIVE_ROUTER_FLUX_JUMP"}
 next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
 action @ 13:06:50.048 REACT_NATIVE_ROUTER_FLUX_FOCUS 
 prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
 action Object {scene: Object, type: "REACT_NATIVE_ROUTER_FLUX_FOCUS"}
 next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
 action @ 13:06:50.062 REACT_NATIVE_ROUTER_FLUX_FOCUS 
 prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
 action Object {scene: Object, type: "REACT_NATIVE_ROUTER_FLUX_FOCUS"}
 next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
 action @ 13:06:50.919 REACT_NATIVE_ROUTER_FLUX_JUMP 
 prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
 action Object {key: "Page1", type: "REACT_NATIVE_ROUTER_FLUX_JUMP"}
 next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
 action @ 13:06:50.926 REACT_NATIVE_ROUTER_FLUX_FOCUS 
 prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
 action Object {scene: Object, type: "REACT_NATIVE_ROUTER_FLUX_FOCUS"}
 next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
 action @ 13:06:50.947 REACT_NATIVE_ROUTER_FLUX_FOCUS 
 prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
 action Object {scene: Object, type: "REACT_NATIVE_ROUTER_FLUX_FOCUS"}
 next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}

Tab bar sometimes is pushed up by the keyboard.

When I focus on the input the tab bar is moved up instead of staying behind the keyboard.

Unselected tabbar image seems to disappear with React 0.20

I upgraded to react 0.20.0 and also tried 0.21.0, and after upgrading, the tabbar on the initial tab seems to disappear when another tab is selected. It works perfectly on 0.19.0. Any ideas?