Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is there something wrong with TouchableOpacity? #941

Closed
ele828 opened this issue Apr 21, 2015 · 4 comments
Closed

Is there something wrong with TouchableOpacity? #941

ele828 opened this issue Apr 21, 2015 · 4 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@ele828
Copy link

ele828 commented Apr 21, 2015

When I use the TouchableOpacity I met a problem

If the element has opacity style, like {opacity: 0.5}, which is the child element of the TouchableOpacity, When I click this element and then this element's opacity goes wrong, maybe it turns to {opacity: 1}. I think normally it should go back to 0.5.

Thanks

@brentvatne
Copy link
Collaborator

@ele828 - you are correct, it sets it back to 1.0 - I'm not entirely sure I understand your use case though, sometimes code is the best language - can you post an example please? 😄

@ele828
Copy link
Author

ele828 commented Apr 22, 2015

@brentvatne Yeah, of course.

<TouchableOpacity activeOpacity={0.3} onPress={this._search}>
    <View style={styles.searchButton}>
        <Text style={styles.searchText}>Search</Text>
    </View>
</TouchableOpacity>

searchButton: {
    width: 120,
    height: 50,
    top: 35,
    opacity: 0.7,
    alignSelf: 'center',
    borderRadius: 10,
    borderColor: '#da766b',
    backgroundColor: '#e01a3c',
    borderWidth: 1,
}

@brentvatne
Copy link
Collaborator

@ele828 - thanks, that definitely looks like a bug

opacity

@brentvatne
Copy link
Collaborator

@ele828 - moved discussion over to #977 where I provide a fix, thanks! 😄

frantic pushed a commit to frantic/react-native that referenced this issue May 8, 2015
…ays 1.0

Summary:
As per facebook#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 facebook#977
Github Author: Brent Vatne <brent.vatne@madriska.com>

Test Plan: Imported from GitHub, without a `Test Plan:` line.
@facebook facebook locked as resolved and limited conversation to collaborators May 29, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 22, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

3 participants