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

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?

[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?

[TheoGit]

Awesome!