react native router flux tabber gesture problem

import React, { Component } from 'react';
import { AppRegistry, View, Text, Button, StyleSheet } from 'react-native';
import { Router, Scene, Actions } from 'react-native-router-flux';

const HomeComponent = (props) => (
    <View style={styles.container}>
      <Text style={styles.welcome}>
        Home View
      </Text>
      <Button title="Tab 1" onPress={ Actions.tabbar }/>
      <Text style={styles.instructions}>
        Double tap R on your keyboard to reload,{'\n'}
        Shake or press menu button for dev menu
      </Text>
    </View>
);

const Tab1Component = (props) => (
    <View style={styles.container}>
      <Text style={styles.welcome}>
        Tab 1 View
      </Text>
      <Button title="Home" onPress={ Actions.home }/>
      <Button title="Tab2" onPress={ Actions.tab2 }/>
    </View>
);

const Tab2Component = (props) => (
    <View style={styles.container}>
      <Text style={styles.welcome}>
        Tab 2
      </Text>
      <Button title="back" onPress={ Actions.pop }/>
    </View>
);

const App = () => (
    <Router>
      <Scene key="home" component={ HomeComponent } initial/>
      <Scene key="tabbar" direction="vertical">
        <Scene key="tab1" component={ Tab1Component } initial/>
        <Scene key="tab2" component={ Tab2Component }/>
      </Scene>
    </Router>
);

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

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