-
Notifications
You must be signed in to change notification settings - Fork 127
Conversation
Fix disabled state
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
commented
Feb 9, 2019
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
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.
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!
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