mirror of
https://github.com/status-im/react-native.git
synced 2025-01-14 11:34:23 +00:00
Update opacity when disabled
prop is changed
Summary: fixes #17105 If you render ``` <TouchableOpacity disabled={true} style={{opacity: 0.5}} > ... </TouchableOpacity> ``` and then ``` <TouchableOpacity disabled={false} style={{opacity: 1}} > ... </TouchableOpacity> ``` The content of `TouchableOpacity` will still have opacity = 0.5 because real opacity is controlled by animated property which should be properly updated when `disabled` prop changes. <!-- Thank you for sending the PR! We appreciate you spending the time to work on these changes. Help us understand your motivation by explaining why you decided to make this change. You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html Happy contributing! --> Usually when a button or other UI component is built with `TouchableOpacity` you may want to change it's opacity if state of component is changed (enabled/disabled). Opacity provided in props is overridden with internally-managed animated value. Add extra check when component is updated to trigger opacity animation upon change of `disabled` flag. You can use code from https://github.com/facebook/react-native/issues/17105. (If this PR adds or changes functionality, please take some time to update the docs at https://github.com/facebook/react-native-website, and link to your PR here.) [GENERAL][BUGFIX][TouchableOpacity] - trigger animation on `opacity` upon change in `disabled` prop. <!-- Help reviewers and the release process by writing your own release notes **INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.** CATEGORY [----------] TYPE [ CLI ] [-------------] LOCATION [ DOCS ] [ BREAKING ] [-------------] [ GENERAL ] [ BUGFIX ] [-{Component}-] [ INTERNAL ] [ ENHANCEMENT ] [ {File} ] [ IOS ] [ FEATURE ] [ {Directory} ] |-----------| [ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} | [----------] [-------------] [-------------] |-----------| [CATEGORY] [TYPE] [LOCATION] - MESSAGE EXAMPLES: [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see --> Closes https://github.com/facebook/react-native/pull/17106 Differential Revision: D7158549 Pulled By: hramos fbshipit-source-id: 209cc433b829b129810e8a884964c8853ca3fe8f
This commit is contained in:
parent
19a4a7d3cb
commit
9366ce416f
@ -160,6 +160,12 @@ const TouchableOpacity = createReactClass({
|
||||
ensurePositiveDelayProps(nextProps);
|
||||
},
|
||||
|
||||
componentDidUpdate: function(prevProps, prevState) {
|
||||
if (this.props.disabled !== prevProps.disabled) {
|
||||
this._opacityInactive(250);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Animate the touchable to a new opacity.
|
||||
*/
|
||||
|
Loading…
x
Reference in New Issue
Block a user