[Touchable] easy way to disable a Touchable* highlight?

[gre]

Hi,

the current pattern I've been doing for making Buttons that can be "disabled" is to do the following:

return !disabled ? <TouchableOpacity onPress={onPress}>{btn}</TouchableOpacity> : btn;

I need to do that because a disabled button should not have any "highlight" effect.

The problem with such approach is it changes the component tree which means btn will be re-instanciated every time disabled changes. One of the consequence is that if btn wants to do animation, the animation will be suddenly stopped.

---

Here is my proposal to fix that,

what if I could do that?

return <TouchableOpacity onPress={!disabled ? onPress : null}>{btn}</TouchableOpacity>;

I'm proposing that if onPress is falsy, there should be no highlight effect at all on a Touchable* components.
This would also make the code more maintainable because you don't have to branch your logic.

What do you think?

[ide]

Try setting the key prop on your button and using your original approach.

[gre]

I'm not sure to get how setting key would change anything. btn will change its place in the tree every time disabled change so there will be a new instantiation (and all the related issues).

Also to me, the fact that the button has highlight is very correlated to the fact that you give an onPress handler. Actually I don't see why you would expect a Touchable effect if no action is listened.

I've used this pattern a lot in my react apps, using an handler not only as a callback to call but also as a way to know that the user is listening (so you can adapt the UX without introducing an extra prop).

[browniefed]

Can you check if it is disabled in the press handler? If you are creating a button just create a handlePress inside this button component then call the props.onPress if it isn't disabled.
Also maybe set the activeOpacity to 1 if it is disabled so on press it doesn't look like it's doing anything?

[Intellicode]

This feature would be handy for me as well

[gre]

to summary my need, I don't expect Touchable* to highlight if no valid handler are provided.
A simple way to implement this is to use activeOpacity=1 if all on*Press handlers are falsy (maybe better is to completely disable the animation to trigger, i'm not aware of the complexity to do this).

If you agree with this I can provide a PR.

[ShawnKuan]

@gre how to disable the animation when press on it

[Kureev]

What if we can patch Touchable mixin?

touchableHandleStartShouldSetResponder: function() {
  return !this.props.disabled;
},

should do the trick. I can send over a PR along with adding a new propType

disabled: React.PropTypes.bool

to TouchableWithoutFeedback base class. What do you think?

[gre]

sounds perfect :) is disabled also on all the Touchable components? (since it's a base class)

[Kureev]

@gre it should