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:
mlanter 2017-03-01 21:28:53 -08:00 committed by Facebook Github Bot
parent d2ed064519
commit f66fba83cf
1 changed files with 7 additions and 3 deletions

View File

@ -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
);
},
@ -167,6 +166,11 @@ var TouchableOpacity = React.createClass({
this.setOpacityTo(this.props.focusedOpacity);
},
_getChildStyleOpacityWithDefault: function() {
var childStyle = flattenStyle(this.props.style) || {};
return childStyle.opacity == undefined ? 1 : childStyle.opacity;
},
render: function() {
return (
<Animated.View