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

Fix disabled state #78

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix disabled state #78

wants to merge 2 commits into from

Conversation

brunobar79
Copy link

If you create a button with disabled={true} and then set it to disabled={false} the opacity doesn't change (the container style still looks disabled because the opacity is still applied).

Passing the disabled prop to the touchable opacity component fixes this issue.

Before the fix:
before

After the fix:

after

@ide
Copy link
Owner

ide commented Feb 8, 2019

When the button's disabled prop goes from false to true, the button re-renders the TouchableOpacity component without disabledContainerStyle, which should display it in its non-disabled form. The disabled prop of the TouchableOpacity component should be independent of this.

@brunobar79
Copy link
Author

That’s what I expected to happen in theory but didn’t work in practice. Feel free to close it if you are sure this is not an issue.

@ide
Copy link
Owner

ide commented Feb 9, 2019

If there's an issue I'd like to understand the root cause before merging this. If you can figure out what's going on and explain the behavior you're seeing I'd be happy to take another look.

@brunobar79
Copy link
Author

brunobar79 commented Feb 9, 2019

Here you can see a repro: https://snack.expo.io/rkkqn3jVV

Scenario 1) state = { disabled: false }
1 - The button is initialized as enabled (both container and content have opacity 1)
2 - The button is disabled and the content goes to opacity 0.6 but the container stays with opacity 1

Scenario 2) state = { disabled: true }
1 - The button is initialized as disabled (both container and content have opacity 0.6)
2 - The button is enabled and the content goes to opacity 1 but the container stays with opacity 0.6

TL;DR: disabledContainerStyle prop is ignored in both scenarios

In this PR, the issue is gone by passing the disabled prop to the TouchableOpacity component, which apparently triggers an extra re-render that applies the styles correctly.

This might be a bug on the react-native side and not on this repo but I thought it wouldn't hurt to get t working as expected without too much work.

EDIT: Sorry, I didn't mean to close it!

@brunobar79 brunobar79 closed this Feb 9, 2019
@brunobar79 brunobar79 reopened this Feb 9, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants