Skip to content

Commit

Permalink
Set initial opacity based on style
Browse files Browse the repository at this point in the history
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 #12628

Differential Revision: D4641509

fbshipit-source-id: 3b6cf653fe837df704007f585c655d4450d14497
  • Loading branch information
mlanter authored and facebook-github-bot committed Mar 2, 2017
1 parent d2ed064 commit f66fba8
Showing 1 changed file with 7 additions and 3 deletions.
10 changes: 7 additions & 3 deletions Libraries/Components/Touchable/TouchableOpacity.js
Expand Up @@ -77,7 +77,7 @@ var TouchableOpacity = React.createClass({
getInitialState: function() {
return {
...this.touchableGetInitialState(),
anim: new Animated.Value(1),
anim: new Animated.Value(this._getChildStyleOpacityWithDefault()),
};
},

Expand Down Expand Up @@ -156,16 +156,20 @@ 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
);
},

_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 (
Expand Down

0 comments on commit f66fba8

Please sign in to comment.