[TouchableOpacity] Reset opacity to the inactiveValue rather than always 1.0

[brentvatne]

As per #941 - fixes bug with TouchabeOpacity always reseting child opacity to 1.0 after press.

A note about the code: we could probably use a general getNativeProp(propName, callback) function rather than getOpacity but just used that as it was simpler for this specific PR, perhaps that refactor could be left to another - or maybe there is a way to do this already that I missed.

Before:

After:

Example code:

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
} = React;


var TestIt = React.createClass({
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity activeOpacity={0.3}>
          <View style={styles.searchButton}>
            <Text>Search</Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  searchButton: {
    opacity: 0.5,
    width: 120,
    height: 50,
    top: 35,
    alignSelf: 'center',
    borderRadius: 10,
    borderColor: '#da766b',
    backgroundColor: '#e01a3c',
    borderWidth: 1,
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

AppRegistry.registerComponent('TestIt', () => TestIt);

[tadeuzagallo]

What about:

  touchableHandleActivePressOut: function() {
    var childStyle = this.refs[CHILD_REF].props.style;
    if (typeof childStyle === 'number') {
      childStyle = StyleSheetRegistry.getStyleByID(childStyle);
    }
    this.setOpacityTo(childStyle && childStyle.opacity || 1);
    this.props.onPressOut && this.props.onPressOut();
  },

And I don't think the opacity should be set on the onPress method (which already is).

/cc @vjeux

[brentvatne]

@tadeuzagallo - I like it, I didn't realize we could just grab the opacity out of the registry like that - nifty!

[brentvatne]

@tadeuzagallo - tested your code, works great, updated the PR (force-pushed so goodbye previous commit) to include it and removed setting opacity in onPress - does seem pointless given that it is set onPressIn

[tadeuzagallo]

Ok, that looks good to me. I haven't actually seen StyleSheetRegistry being used before, so lets just see if @vjeux is ok with that

[vjeux]

You cannot use || here. Otherwise if opacity is set to 0, it's going to be 1. You need childStyle.opacity === undefined ? 1 : childStyle.opacity

[brentvatne]

Good point, that falsey 0

[tadeuzagallo]

JavaScript ❤️

[brentvatne]

@vjeux - thanks for the review, fixed

[vjeux]

can you put the || {} outside of the flattenStyle call? flattenStyle breaks early if it's undefined

[brentvatne]

@vjeux - thanks for second round of comments, this PR gets smaller each time 😛

[vjeux]

lgtm!

[jessepollak]

+1 for this, thanks!