expo / ex-navigation

Route-centric navigation for React Native
997 stars 201 forks source link

How to add touch feedback/animation to TabNavigationItem when pressed? #370

Open lukaleli opened 7 years ago

lukaleli commented 7 years ago

Awesome work, guys! So far so good with implementing navigation using your library. But I would like to add a native touch feedback (or even some animation) to the TabNavigationItem when the user clicks on one of them in the TabNavigation component. Right now I'm passing to renderIcon method shown below:

renderIcon(isSelected, text, icon) {
    let iconStyle = [];
    iconStyle.push(text ? styles.icon : styles.iconLarge);
    iconStyle.push(isSelected ? styles.selectedIcon : null);
    return (
      <View style={styles.itemContainer}>
        {icon && <Image source={icon} style={iconStyle}/>}
        {text &&
        <Text style={isSelected ? [styles.tab, styles.selectedTab] : styles.tab}>{text}</Text>}
      </View>
    )
  }

It works as expected in terms of rendering. But then I tried to wrap the result of the method mentioned above in TouchableNativeFeedback and although I got ripple effect on android there was no action- route didn't change. When I tried to press any of the item slightly more on the bottom (on the text part) it worked. Is there anyway to easily add any effect to the TabNavigationItem when user presses it? Thanks in advance!