[change] TouchableOpacity without Animated

Fix #259
This commit is contained in:
Nicolas Gallagher
2016-12-08 18:22:17 -08:00
parent 6bffe1775f
commit f51592f96e
+11 -13
View File
@@ -14,13 +14,13 @@
// Note (avik): add @flow when Flow supports spread properties in propTypes // Note (avik): add @flow when Flow supports spread properties in propTypes
var Animated = require('../../apis/Animated');
var NativeMethodsMixin = require('../../modules/NativeMethodsMixin'); var NativeMethodsMixin = require('../../modules/NativeMethodsMixin');
var React = require('react'); var React = require('react');
var StyleSheet = require('../../apis/StyleSheet'); var StyleSheet = require('../../apis/StyleSheet');
var TimerMixin = require('react-timer-mixin'); var TimerMixin = require('react-timer-mixin');
var Touchable = require('./Touchable'); var Touchable = require('./Touchable');
var TouchableWithoutFeedback = require('./TouchableWithoutFeedback'); var TouchableWithoutFeedback = require('./TouchableWithoutFeedback');
var View = require('../View');
var ensurePositiveDelayProps = require('./ensurePositiveDelayProps'); var ensurePositiveDelayProps = require('./ensurePositiveDelayProps');
var flattenStyle = StyleSheet.flatten var flattenStyle = StyleSheet.flatten
@@ -70,10 +70,7 @@ var TouchableOpacity = React.createClass({
}, },
getInitialState: function() { getInitialState: function() {
return { return this.touchableGetInitialState();
...this.touchableGetInitialState(),
anim: new Animated.Value(1),
};
}, },
componentDidMount: function() { componentDidMount: function() {
@@ -85,10 +82,11 @@ var TouchableOpacity = React.createClass({
}, },
setOpacityTo: function(value) { setOpacityTo: function(value) {
Animated.timing( this.setNativeProps({
this.state.anim, style: {
{toValue: value, duration: 150} opacity: value
).start(); }
});
}, },
/** /**
@@ -166,7 +164,7 @@ var TouchableOpacity = React.createClass({
render: function() { render: function() {
return ( return (
<Animated.View <View
accessible={this.props.accessible !== false} accessible={this.props.accessible !== false}
accessibilityLabel={this.props.accessibilityLabel} accessibilityLabel={this.props.accessibilityLabel}
accessibilityRole={this.props.accessibilityRole} accessibilityRole={this.props.accessibilityRole}
@@ -174,8 +172,7 @@ var TouchableOpacity = React.createClass({
style={[ style={[
styles.root, styles.root,
this.props.disabled && styles.disabled, this.props.disabled && styles.disabled,
this.props.style, this.props.style
{opacity: this.state.anim}
]} ]}
testID={this.props.testID} testID={this.props.testID}
onLayout={this.props.onLayout} onLayout={this.props.onLayout}
@@ -192,7 +189,7 @@ var TouchableOpacity = React.createClass({
tabIndex={this.props.disabled ? null : '0'} tabIndex={this.props.disabled ? null : '0'}
> >
{this.props.children} {this.props.children}
</Animated.View> </View>
); );
}, },
}); });
@@ -200,6 +197,7 @@ var TouchableOpacity = React.createClass({
var styles = StyleSheet.create({ var styles = StyleSheet.create({
root: { root: {
cursor: 'pointer', cursor: 'pointer',
transition: 'opacity 0.15s',
userSelect: 'none' userSelect: 'none'
}, },
disabled: { disabled: {