Introduce disabling for Touchable* elements #5931

Kureev · 2016-02-15T11:14:01Z

Introduce a disabled property for Touchable* components.

facebook-github-bot · 2016-02-15T11:14:19Z

By analyzing the blame information on this pull request, we identified @sahrens, @jutaz and @spicyj to be potential reviewers.

satya164 · 2016-02-16T01:11:25Z

cc @mkonicek

facebook-github-bot · 2016-02-19T11:01:12Z

@Kureev updated the pull request.

Kureev · 2016-02-19T12:53:50Z

@facebook-github-bot liar!

mkonicek · 2016-02-21T22:38:58Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -41,6 +41,10 @@ var TouchableWithoutFeedback = React.createClass({
      React.PropTypes.arrayOf(React.PropTypes.oneOf(View.AccessibilityTraits)),
    ]),
    /**
+     * Disable all component interactions if value is true


nit: if the value is true / If true, disable all interactions for this component.

mkonicek · 2016-02-21T22:44:20Z

Does this work also for TouchableHighlight, TouchableBounce, TouchableNativeFeedback etc.?

Do they still animate if you set disabled to true? Do you want them to animate? Should TouchableNativeFeedback (Android-only) animate when disabled?

You could try this in the TouchableExample and ideally add examples there if this approach works well and disables the animations.

Kureev · 2016-02-21T23:18:27Z

Will do!

mkonicek · 2016-02-22T00:10:54Z

👍 thank you.

Kureev · 2016-02-22T00:33:04Z

@mkonicek I've added a "Disabled Touchable*" example to UIExplorer:

It works with all Touchables (all of them inherits from TouchableWithoutFeedback which use Touchable mixin I've patched by disabled flag).

Does this work also for TouchableHighlight, TouchableBounce, TouchableNativeFeedback etc.?

Yes

Do they still animate if you set disabled to true?

No

Do you want them to animate?

No, it should behave like a usual text when disabled

Should TouchableNativeFeedback (Android-only) animate when disabled?

No

facebook-github-bot · 2016-02-22T00:33:16Z

@Kureev updated the pull request.

mkonicek · 2016-02-24T02:32:14Z

Examples/UIExplorer/TouchableExample.js

+          animationVelocity={0}
+          underlayColor="rgb(210, 230, 255)"
+          style={[styles.row, styles.block]}
+          onPress={() => console.log('custom THW text - hightlight')}>


nit: highlight

mkonicek · 2016-02-24T02:35:16Z

OK, let's shipit.

The test plan doesn't show whether this disables animations for TouchableNativeFeedback but we can fix that later if it still animates with this PR.

@facebook-github-bot shipit

facebook-github-bot · 2016-02-24T02:35:39Z

Thanks for importing. If you are an FB employee go to Phabricator to review.

Kureev · 2016-02-24T09:15:22Z

I'll make a 2 follow-up PRs:

Hightlight -> Highlight Fix UIExample typos: hightlight -> highligh #6122
Add an additional example with disabled TouchableNativeFeedback Add disabled TouchableNativeFeedback button example #6123

Thanks for merging this one in, @mkonicek

Summary:Follow-up PR for fixing typos in #5931 **Test plan (required)** This PR contains only copy changes, so no additional testing is required. **Code formatting** This PR code style match the desired [style guide](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#style-guide). cc mkonicek Closes #6122 Differential Revision: D2970751 Pulled By: javache fb-gh-sync-id: 007ab6e732e88f39c7f392f00b2bd668ebb4d7d5 shipit-source-id: 007ab6e732e88f39c7f392f00b2bd668ebb4d7d5

Summary:Follow-up PR for #5931: Adding missing `TouchableNativeFeedback` example. **Test plan** - Run UIExplorer on iOS and Android devices [Android] - Go to Touchable* examples and scroll down to the `Disabled Touchable*` section. There are two new buttons there: `Enabled TouchableNativeFeedback` and `Disabled TouchableNativeFeedback`. Buttons should behave according their titles. [iOS] - Go to Touchable* examples and scroll down to the `Disabled Touchable*` section. As far as `TouchableNativeFeedback` is supported on Android only, you **wouldn't see** any new buttons there **Code formatting** This PR code style match the desired [style guide](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#style-guide). cc mkonicek Closes #6123 Differential Revision: D2971021 fb-gh-sync-id: 3be18bda15b5b495caaf9e4444fd0deb47a44839 shipit-source-id: 3be18bda15b5b495caaf9e4444fd0deb47a44839

mkonicek · 2016-02-24T16:36:05Z

💯 Awesome, thanks @Kureev!

Kureev · 2016-02-24T16:37:20Z

haha, you're welcome, @mkonicek 😉

Summary:Introduce a `disabled` property for Touchable* components. Fix facebook#2103 Closes facebook#5931 Differential Revision: D2969790 Pulled By: mkonicek fb-gh-sync-id: 570a4ff882219f52f2d2ebef3eb73b1df50a0877 shipit-source-id: 570a4ff882219f52f2d2ebef3eb73b1df50a0877

Summary:Follow-up PR for fixing typos in facebook#5931 **Test plan (required)** This PR contains only copy changes, so no additional testing is required. **Code formatting** This PR code style match the desired [style guide](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#style-guide). cc mkonicek Closes facebook#6122 Differential Revision: D2970751 Pulled By: javache fb-gh-sync-id: 007ab6e732e88f39c7f392f00b2bd668ebb4d7d5 shipit-source-id: 007ab6e732e88f39c7f392f00b2bd668ebb4d7d5

Summary:Follow-up PR for facebook#5931: Adding missing `TouchableNativeFeedback` example. **Test plan** - Run UIExplorer on iOS and Android devices [Android] - Go to Touchable* examples and scroll down to the `Disabled Touchable*` section. There are two new buttons there: `Enabled TouchableNativeFeedback` and `Disabled TouchableNativeFeedback`. Buttons should behave according their titles. [iOS] - Go to Touchable* examples and scroll down to the `Disabled Touchable*` section. As far as `TouchableNativeFeedback` is supported on Android only, you **wouldn't see** any new buttons there **Code formatting** This PR code style match the desired [style guide](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#style-guide). cc mkonicek Closes facebook#6123 Differential Revision: D2971021 fb-gh-sync-id: 3be18bda15b5b495caaf9e4444fd0deb47a44839 shipit-source-id: 3be18bda15b5b495caaf9e4444fd0deb47a44839

Summary:Follow-up PR for fixing typos in #5931 **Test plan (required)** This PR contains only copy changes, so no additional testing is required. **Code formatting** This PR code style match the desired [style guide](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#style-guide). cc mkonicek Closes facebook/react-native#6122 Differential Revision: D2970751 Pulled By: javache fb-gh-sync-id: 007ab6e732e88f39c7f392f00b2bd668ebb4d7d5 shipit-source-id: 007ab6e732e88f39c7f392f00b2bd668ebb4d7d5

Summary:Follow-up PR for #5931: Adding missing `TouchableNativeFeedback` example. **Test plan** - Run UIExplorer on iOS and Android devices [Android] - Go to Touchable* examples and scroll down to the `Disabled Touchable*` section. There are two new buttons there: `Enabled TouchableNativeFeedback` and `Disabled TouchableNativeFeedback`. Buttons should behave according their titles. [iOS] - Go to Touchable* examples and scroll down to the `Disabled Touchable*` section. As far as `TouchableNativeFeedback` is supported on Android only, you **wouldn't see** any new buttons there **Code formatting** This PR code style match the desired [style guide](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#style-guide). cc mkonicek Closes facebook/react-native#6123 Differential Revision: D2971021 fb-gh-sync-id: 3be18bda15b5b495caaf9e4444fd0deb47a44839 shipit-source-id: 3be18bda15b5b495caaf9e4444fd0deb47a44839

facebook-github-bot added GH Review: review-needed CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. labels Feb 15, 2016

WestleyArgentum mentioned this pull request Feb 21, 2016

use disable prop on touchable elements buzzfeed-openlab/shit-vcs-say#2

Open

mkonicek reviewed Feb 21, 2016
View reviewed changes

Introduce disabling for Touchable* elements

d33496f

Kureev Alexey added 2 commits February 22, 2016 01:31

Add disabled Touchable example to UIExplorer

d7817ab

Tweak disabled flag description

bb304f9

Kureev force-pushed the feature/disable-touchable-highlight branch from 76bbd1c to bb304f9 Compare February 22, 2016 00:32

mkonicek reviewed Feb 24, 2016
View reviewed changes

facebook-github-bot added GH Review: accepted and removed GH Review: review-needed labels Feb 24, 2016

ghost closed this in 9951e1a Feb 24, 2016

Kureev mentioned this pull request Feb 24, 2016

Fix UIExample typos: hightlight -> highligh #6122

Closed

VansonLeung mentioned this pull request Feb 24, 2016

FIX: ScrollView inside Flip Card not scrollable moschan/react-native-flip-card#4

Merged

Kureev mentioned this pull request Feb 24, 2016

Add disabled TouchableNativeFeedback button example #6123

Closed

moschan mentioned this pull request Feb 25, 2016

TODO: Replace below fix with by using "disabled" function (RN 0.21 exclusive) moschan/react-native-flip-card#5

Open

This pull request was closed.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Introduce disabling for Touchable* elements #5931

Introduce disabling for Touchable* elements #5931

Kureev commented Feb 15, 2016

facebook-github-bot commented Feb 15, 2016

satya164 commented Feb 16, 2016

facebook-github-bot commented Feb 19, 2016

Kureev commented Feb 19, 2016

mkonicek Feb 21, 2016

mkonicek commented Feb 21, 2016

Kureev commented Feb 21, 2016

mkonicek commented Feb 22, 2016

Kureev commented Feb 22, 2016

facebook-github-bot commented Feb 22, 2016

mkonicek Feb 24, 2016

mkonicek commented Feb 24, 2016

facebook-github-bot commented Feb 24, 2016

Kureev commented Feb 24, 2016

mkonicek commented Feb 24, 2016

Kureev commented Feb 24, 2016

Introduce disabling for Touchable* elements #5931

Introduce disabling for Touchable* elements #5931

Conversation

Kureev commented Feb 15, 2016

facebook-github-bot commented Feb 15, 2016

satya164 commented Feb 16, 2016

facebook-github-bot commented Feb 19, 2016

Kureev commented Feb 19, 2016

mkonicek Feb 21, 2016

Choose a reason for hiding this comment

mkonicek commented Feb 21, 2016

Kureev commented Feb 21, 2016

mkonicek commented Feb 22, 2016

Kureev commented Feb 22, 2016

facebook-github-bot commented Feb 22, 2016

mkonicek Feb 24, 2016

Choose a reason for hiding this comment

mkonicek commented Feb 24, 2016

facebook-github-bot commented Feb 24, 2016

Kureev commented Feb 24, 2016

mkonicek commented Feb 24, 2016

Kureev commented Feb 24, 2016