Set initial opacity based on style
Summary: Set the initial opacity based on the style opacity instead of defaulting to 1. Without this change, if the opacity on the view is set to 0.5 (for example), the component will render with 1 opacity and then after a press and release it will set to 0.5. This fixes it to set to the correct value on mount. **Test plan (required)** Example code: ``` <TouchableOpacity activeOpacity={1} style={STYLES.Button}> {...} </TouchableOpacity> ``` ``` const STYLES = StyleSheet.create({ Button: { opacity: 0.5, }, }); ``` Before (notice starts out dark and then after click and release becomes light): ![before](https://cloud.githubusercontent.com/assets/19673711/23444255/c120cbb0-fde8-11e6-8c03-ef4f0f25736b.gif) After (starts out light and is the same light color after a click and release): ![after](https://cloud.githubusercontent.com/assets/19673711/23444254/c106a6e0-fde8-11e6-8181-def45b7bb84f.gif) Closes https://github.com/facebook/react-native/pull/12628 Differential Revision: D4641509 fbshipit-source-id: 3b6cf653fe837df704007f585c655d4450d14497
This commit is contained in:
parent
d2ed064519
commit
f66fba83cf
|
@ -77,7 +77,7 @@ var TouchableOpacity = React.createClass({
|
|||
getInitialState: function() {
|
||||
return {
|
||||
...this.touchableGetInitialState(),
|
||||
anim: new Animated.Value(1),
|
||||
anim: new Animated.Value(this._getChildStyleOpacityWithDefault()),
|
||||
};
|
||||
},
|
||||
|
||||
|
@ -156,9 +156,8 @@ var TouchableOpacity = React.createClass({
|
|||
},
|
||||
|
||||
_opacityInactive: function(duration: number) {
|
||||
var childStyle = flattenStyle(this.props.style) || {};
|
||||
this.setOpacityTo(
|
||||
childStyle.opacity === undefined ? 1 : childStyle.opacity,
|
||||
this._getChildStyleOpacityWithDefault(),
|
||||
duration
|
||||
);
|
||||
},
|
||||
|
@ -166,6 +165,11 @@ var TouchableOpacity = React.createClass({
|
|||
_opacityFocused: function() {
|
||||
this.setOpacityTo(this.props.focusedOpacity);
|
||||
},
|
||||
|
||||
_getChildStyleOpacityWithDefault: function() {
|
||||
var childStyle = flattenStyle(this.props.style) || {};
|
||||
return childStyle.opacity == undefined ? 1 : childStyle.opacity;
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
|
|
Loading…
Reference in New Issue