Skip to content

Button: Inconsistency on button's disabled style #1063

@mohammad7t

Description

@mohammad7t

Button component renders a <ViewComponent/> and a <Text/> inside it. For a Button with disabled attribute, styles.disabled overrides buttonStyle in styles of ViewComponent but styles.disabledTitle does not override titleStyle in styles of Text.

Commit react-native-training/react-native-elements@5af9b15 has moved buttonStyle after styles.disabled but titleStyle is still before styles.disabledTitle:

https://github.com/react-native-training/react-native-elements/blob/1c1561c00cdfeb6e554388707bc1c44e6097b646/src/buttons/Button.js#L72-L74

https://github.com/react-native-training/react-native-elements/blob/1c1561c00cdfeb6e554388707bc1c44e6097b646/src/buttons/Button.js#L100-L101

This causes inconsistency in a usage like this:

<Button buttonStyle={{backgroundColor:'black', color:'white'}} disabled={true} />

This component will have black background but gray text color which is neither user's style (color != white) nor default disabled style (backgroundColor != #D1D5D8)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions