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.

Sign up for GitHub

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

Jump to bottom

Opacity in Touchable opacity doesn't properly react to state change #32476

Closed
hetanthakkar opened this issue Oct 26, 2021 · 3 comments
Closed

Opacity in Touchable opacity doesn't properly react to state change #32476

hetanthakkar opened this issue Oct 26, 2021 · 3 comments
Labels
Needs: Attention Issues where the author has responded to feedback.

Comments

@hetanthakkar
Copy link
Contributor

Description

Assigning a dynamic value to opacity in TouchableOpacity like
opacity:this.state.opacity?1:0.1
the TouchableOpacity will not properly react to state change i.e. if the button is pressed twice the opacity will change

WhatsApp.Video.2021-10-26.at.9.15.25.PM.mp4

Actual behaviour: opacity changes when the button is pressed twice.
Expected behviour: opacity should change when the button is pressed in the first time

Version

0.66.1

Output of react-native info

WhatsApp Image 2021-10-26 at 10 48 48 PM

Steps to reproduce

  1. Make a state for eg: active: true.

  2. set the opacity value of TouchableOpacity as opacity:this.state.opacity?1:0.1 and change the active state value to false
    when TouchableOpacity is pressed.

3)When the active state changes from true to false the opacity value of TouchableOpacity wont change.

4)Pressing TouchableOpacity second time will change the opacity value.

Snack, code example, screenshot, or link to a repository

https://snack.expo.dev/grZqEDZkF
@react-native-bot react-native-bot added Needs: Author Feedback Needs: Environment Info Please run `react-native info` and edit your issue with that command's output. and removed Needs: Triage 🔍 labels Oct 26, 2021
@github-actions
Copy link

⚠️ Missing Environment Information
ℹ️ Your issue may be missing information about your development environment. You can obtain the missing information by running react-native info in a console.

@hetanthakkar hetanthakkar mentioned this issue Oct 26, 2021
Closed
@hetanthakkar hetanthakkar changed the title Opacity in Touchable opacity doesn't react properly to state change Opacity in Touchable opacity doesn't properly react to state change Oct 27, 2021
@hetanthakkar hetanthakkar mentioned this issue Jan 23, 2022
Closed
facebook-github-bot pushed a commit that referenced this issue Feb 7, 2022
@hetanthakkar @facebook-github-bot
Opacity in TouchableOpacity properly react to state change (#32956)
3eddc9a 
Summary:
This PR fixes the opacity bug where it fails to properly react to state change. This PR resolves the issue detailed in #32476

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[General] [Fixed] - Fixed opacity value in TouchableOpacity

Pull Request resolved: #32956

Test Plan: The code I added in componentDidUpdate does solve the issue and passes all the test cases

Reviewed By: ryancat

Differential Revision: D33766718

Pulled By: cortinico

fbshipit-source-id: 951bedf22619fc12e66156d0a6074cd8adf1d3eb
@github-actions
Copy link

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

@github-actions github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Apr 26, 2022
@react-native-bot react-native-bot removed the Needs: Environment Info Please run `react-native info` and edit your issue with that command's output. label Apr 26, 2022
@hetanthakkar
Copy link
Contributor Author

@hramos issue is still valid and I've submitted the PR for the same

@github-actions github-actions bot added Needs: Attention Issues where the author has responded to feedback. and removed Needs: Author Feedback Stale There has been a lack of activity on this issue and it may be closed soon. labels Apr 26, 2022
@gabrieldonadel gabrieldonadel mentioned this issue Nov 18, 2022
Closed
shwanton pushed a commit to shwanton/react-native-macos that referenced this issue Feb 13, 2023
@hetanthakkar
Opacity in TouchableOpacity properly react to state change (facebook#…
c1247c1 
…32956)

Summary:
This PR fixes the opacity bug where it fails to properly react to state change. This PR resolves the issue detailed in facebook#32476

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[General] [Fixed] - Fixed opacity value in TouchableOpacity

Pull Request resolved: facebook#32956

Test Plan: The code I added in componentDidUpdate does solve the issue and passes all the test cases

Reviewed By: ryancat

Differential Revision: D33766718

Pulled By: cortinico

fbshipit-source-id: 951bedf22619fc12e66156d0a6074cd8adf1d3eb
kelset pushed a commit that referenced this issue Mar 6, 2023
@gabrieldonadel @kelset
Fix TouchableOpacity componentDidUpdate causing an excessive number o…
c92e98a 
…f pending callbacks (#35387)

Summary:
The commit 3eddc9a included on v0.69 introduced a wrong `if` statement inside the `componentDidUpdate` function of the `TouchableOpacity` component. As this `if` statement always evaluates to `true` (`(true || false) !== undefined`) we end up making unnecessary calls to the `_opacityInactive` method every time the component props changes, e.g. every time a `<Text>` inside the TouchableOpacity changes we call this function over and over, and this has been causing some performance issues on big lists.

This PR fixes this problem by adjusting the `componentDidUpdate` function to only call  `_opacityInactive` when necessary.

Closes #34442
Closes #32476

## Changelog

[General] [Fixed] - Fix TouchableOpacity componentDidUpdate causing an excessive number of pending callbacks

Pull Request resolved: #35387

Test Plan:
1. Open the RNTester app and navigate to the `Touchable* and onPress` page
2. Test the `TouchableOpacity` component through the many sections

Reviewed By: cipolleschi

Differential Revision: D41397396

Pulled By: ryancat

fbshipit-source-id: 24863b5cbbdd2f3dd1f654b43d7031560937b888
OlimpiaZurek pushed a commit to OlimpiaZurek/react-native that referenced this issue May 22, 2023
@gabrieldonadel @OlimpiaZurek
Fix TouchableOpacity componentDidUpdate causing an excessive number o…
1f5e6c3 
…f pending callbacks (facebook#35387)

Summary:
The commit facebook@3eddc9a included on v0.69 introduced a wrong `if` statement inside the `componentDidUpdate` function of the `TouchableOpacity` component. As this `if` statement always evaluates to `true` (`(true || false) !== undefined`) we end up making unnecessary calls to the `_opacityInactive` method every time the component props changes, e.g. every time a `<Text>` inside the TouchableOpacity changes we call this function over and over, and this has been causing some performance issues on big lists.

This PR fixes this problem by adjusting the `componentDidUpdate` function to only call  `_opacityInactive` when necessary.

Closes facebook#34442
Closes facebook#32476

## Changelog

[General] [Fixed] - Fix TouchableOpacity componentDidUpdate causing an excessive number of pending callbacks

Pull Request resolved: facebook#35387

Test Plan:
1. Open the RNTester app and navigate to the `Touchable* and onPress` page
2. Test the `TouchableOpacity` component through the many sections

Reviewed By: cipolleschi

Differential Revision: D41397396

Pulled By: ryancat

fbshipit-source-id: 24863b5cbbdd2f3dd1f654b43d7031560937b888
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Needs: Attention Issues where the author has responded to feedback.
Projects
None yet
Milestone
No milestone
2 participants
@react-native-bot @hetanthakkar