Touchable elements only work in the default page(first child)

[edudel]

TextInput in the Search component does not work (second child)..It does not trigger any input or keyboard.. (ANDROID)
if I swap the children ..Search will work, but Home won't.
The first child component always work, so for this case the Home component works fine.

example :

     return (
     <ScrollableTabView >
         <Home key="Home"   />
         <Search key="Search"   />
     </ScrollableTabView>
     )

Search - render

    var info = _.map(this.state.filtered, (data) => {
        return (
         <TouchableHighlight  underlayColor='#dddddd' onPress={this._viewDetails.bind(this, lead)}>
             <View style={styles.row}>
                 <View>
                     <View>
                         <Text style={styles.details} >{data.firstname +  ' ' + data.lastname}</Text>
                         <Text style={styles.company}>{data.company}</Text>
                     </View>
                 </View>
                 <Icon name='angle-right' size={20} style={styles.image} />
             </View>
         </TouchableHighlight>
        );


    return (
     <ScrollView>
         <TextInput style={styles.searchInput}
                    onChangeText={this._search.bind(this)} placeholder='search'/>
         <View style={styles.container}>
             {info}
         </View>
     </ScrollView>
    );
}

DOES ANYONE KNOW IF THERE IS SOMETHING MISSING HERE ?

[gabecoyne]

We are experiencing the same issues with TouchableNativeFeedback on tabs other than the first tab.

Would love to know if you figure it out. We're looking into it too.

[gabecoyne]

We are seeing that the hit areas stick for the first component.

After you switch tabs, the first component's hit areas are still touchable.

[edudel]

Correct !!. the only workaround.. hacky approach that I have found so far is.. to use onChangeTab.. and change the order of the children.. so the second becomes the first component.(assuming that only the first one works) but its a double transition. there should be a better solution.

[kusamakura]

Might be related to facebook/react-native#3557 ?

[syarul]

I got this solve by using @devknoll PR which not being push yet, which use ScrollView rather than using current PanResponder to switch pages, the commit => 218ab69, For quick solution just copy and replace index.js inside node_modules/react-native-scrollable-tab-view, solved issue #58

[edudel]

Im getting a blank page when using that new index.js.. after changing the style under <ScrollView from
{{flex: 1}} to {{flexDirection: 'row'}} I see the 2 children displays fitted into one page....
I also noticed that this line
this.refs.scrollView.scrollTo(null, pageNumber * deviceWidth);
does not scroll
any thoughts ?
thanks
Im using react native 0.13.0-rc .. android nexus 6, 23 SDK

[gabecoyne]

I've created a new version with ViewPagerAndroid:
https://gist.github.com/gabecoyne/3b9ffa89b07ac4f42dc7

[syarul]

I'm using 0.13 and made a modified version of FacebookTabBar.js in the sample folder

'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;

To use this just require the module

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>
    );

[edudel]

thanks all ... I took the 2 approaches, however, @gabecoyne ViewPagerAndroid worked great !!

[syarul]

@gabecoyne +1, using ViewPagerAndroid makes this module obsolete, but nice experience getting the result we need.