Skip to content

Commit

Permalink
[TouchableOpacity] Reset opacity to the inactiveValue rather than alw…
Browse files Browse the repository at this point in the history
…ays 1.0

Summary:
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:
![bug](https://cloud.githubusercontent.com/assets/90494/7287207/52d6a686-e907-11e4-8e16-04b2ddd0582c.gif)

After:
![after](https://cloud.githubusercontent.com/assets/90494/7287689/5aca4776-e90c-11e4-8c40-aa6bd3e822d8.gif)

Example code:
```javascript
'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>
Closes #977
Github Author: Brent Vatne <brent.vatne@madriska.com>

Test Plan: Imported from GitHub, without a `Test Plan:` line.
  • Loading branch information
Brent Vatne committed May 7, 2015
1 parent 47164ba commit 0b844fe
Showing 1 changed file with 3 additions and 2 deletions.
5 changes: 3 additions & 2 deletions Libraries/Components/Touchable/TouchableOpacity.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ var TouchableWithoutFeedback = require('TouchableWithoutFeedback');

var cloneWithProps = require('cloneWithProps');
var ensureComponentIsNative = require('ensureComponentIsNative');
var flattenStyle = require('flattenStyle');
var keyOf = require('keyOf');
var onlyChild = require('onlyChild');

Expand Down Expand Up @@ -105,12 +106,12 @@ var TouchableOpacity = React.createClass({
},

touchableHandleActivePressOut: function() {
this.setOpacityTo(1.0);
var childStyle = flattenStyle(this.refs[CHILD_REF].props.style) || {};
this.setOpacityTo(childStyle.opacity === undefined ? 1 : childStyle.opacity);
this.props.onPressOut && this.props.onPressOut();
},

touchableHandlePress: function() {
this.setOpacityTo(1.0);
this.props.onPress && this.props.onPress();
},

Expand Down

0 comments on commit 0b844fe

Please sign in to comment.