Touchable elements only work in the default page(first child) about react-native-scrollable-tab-view HOT 10 CLOSED

'use strict';

var React = require('react-native');
var {
  StyleSheet,
  View,
  TouchableWithoutFeedback,
  Image
} = React;

var styles = StyleSheet.create({
  tab: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingBottom: 10,
  },

  tabs: {
    height: 50,
    flexDirection: 'row',
    justifyContent: 'space-around',
    paddingTop: 10,
    borderWidth: 1,
    borderTopWidth: 0,
    borderLeftWidth: 0,
    borderRightWidth: 0,
    backgroundColor: '#1d1d1d',
    borderBottomColor: 'rgba(0,0,0,0.05)',
  },
  unselect: {
    width: 30, height: 30, tintColor: '#817061', borderWidth: 0.1
  },
  select: {
    width: 30, height: 30, tintColor: '#ffb27a', borderWidth: 0.1
  }
});

var FacebookTabBar = React.createClass({

  propTypes: {
    goToPage: React.PropTypes.func,
    activeTab: React.PropTypes.number,
    tabs: React.PropTypes.array
  },

  renderTabOption(name, page) {
    var isTabActive = this.props.activeTab === page;

    var useStyle
    if(isTabActive){
      useStyle = styles.select
    } else {
      useStyle = styles.unselect
    }

    return (
      <TouchableWithoutFeedback key={name.uri} onPress={() => this.props.goToPage(page)} style={[styles.tab]}>
        <View>
          <Image
            source={name}
            style={useStyle}/>
        </View>
      </TouchableWithoutFeedback>
    );
  },
  render() {
    return (
      <View style={styles.tabs}>
        {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
      </View>
    );
  },
});

module.exports = FacebookTabBar;

return (
      <View style={styles.container}>
        <ScrollableTabView renderTabBar={() => <FacebookTabBar />}>
          <ScrollView tabLabel={require('image!ic_menu_main')} style={styles.tabView}>  
        // item 1
          </ScrollView>
          <ScrollView tabLabel={require('image!ic_menu_map')} style={styles.tabView}>
            // item 2
          </ScrollView>
          <ScrollView tabLabel={require('image!ic_menu_cal')} style={styles.tabView}>
            // item 3
          </ScrollView>
          <ScrollView tabLabel={require('image!ic_menu_fav')} style={styles.tabView}>
            // item 4
          </ScrollView>
          <ScrollView tabLabel={require('image!ic_menu_user')} style={styles.tabView}>
            // item 5
          </ScrollView>
        </ScrollableTabView>
      </View>
    );