-
Notifications
You must be signed in to change notification settings - Fork 24.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fixing #5932 TouchableOpacity respect style opacity #8909
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -67,16 +67,24 @@ var TouchableOpacity = React.createClass({ | |
}, | ||
|
||
getInitialState: function() { | ||
var childStyle = flattenStyle(this.props.style) || {}; | ||
var opacity = childStyle.opacity === undefined ? 1 : childStyle.opacity; | ||
return { | ||
...this.touchableGetInitialState(), | ||
anim: new Animated.Value(1), | ||
anim: new Animated.Value(opacity), | ||
}; | ||
}, | ||
|
||
componentDidMount: function() { | ||
ensurePositiveDelayProps(this.props); | ||
}, | ||
|
||
componentDidUpdate: function() { | ||
if (!this._hideTimeout && !this._pressIn) { | ||
this._opacityInactive(); | ||
} | ||
}, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why is this needed? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is needed because one edge case that I stumble upon. When you are in the "pressing" state if component update it will change opacity, so to prevent that we need to ignore that update and update only when press is released not sure if I am clear, if you need more info I will try to explain that better There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can you add a test to ensure that this continues to work after you get your fix in? |
||
|
||
componentWillReceiveProps: function(nextProps) { | ||
ensurePositiveDelayProps(nextProps); | ||
}, | ||
|
@@ -98,6 +106,7 @@ var TouchableOpacity = React.createClass({ | |
touchableHandleActivePressIn: function(e: Event) { | ||
this.clearTimeout(this._hideTimeout); | ||
this._hideTimeout = null; | ||
this._pressIn = true; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Does this variable exist on TouchableOpacity or are you introducing a new one? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. introducing a new one |
||
this._opacityActive(); | ||
this.props.onPressIn && this.props.onPressIn(e); | ||
}, | ||
|
@@ -106,6 +115,7 @@ var TouchableOpacity = React.createClass({ | |
if (!this._hideTimeout) { | ||
this._opacityInactive(); | ||
} | ||
this._pressIn = false; | ||
this.props.onPressOut && this.props.onPressOut(e); | ||
}, | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Makes sense, thanks!