How do you set the color of a disabled button using a react-native-paper theme?

Question

The react-native-paper docs suggest you can set the color of a disabled button using a theme, but this code does not work:

export const buttonTheme = {
  colors: {
    primary: COL_BASE_YELLOW,
    disabled: COL_DARK_HIGHLIGHT,
  },
}

<Button
  loading={submittedPhoneNumber ? true : false}
  mode="contained"
  onPress={() => handleSubmitPhoneNumber(phoneNumber)}
  theme={buttonTheme}
  disabled={phoneNumber.length < 5 ? true : false}>
  Continue
</Button>

The primary color works however. How do I change the color of the button when it is disabled?

score 10 · Accepted Answer · answered Apr 23 '20 at 09:53

10

Don't use disabled props, it will always make your button grey, if you want to use your desired colour for disabled mode, do it like this :

<Button
  loading={submittedPhoneNumber ? true : false}
  mode="contained"
  onPress={phoneNumber.length < 5 ? () => {} : () => handleSubmitPhoneNumber(phoneNumber)}
  color={phoneNumber.length < 5 ? 'darkerColor' : 'fadedColor'}>
  Continue
</Button>

answered Apr 23 '20 at 09:53

Neelam Soni

1,251
8
15

Great solution!! :) – Mr. Robot Apr 23 '20 at 17:31
1

Hi ! I think that's a great solution, but how can I disable the clicked effect when the button is 'disabled'? thank u – Gabriel Augusto Sep 14 '21 at 13:43
Your button component must be having prop like isDisabled or similar to it.. check the documentation. – Neelam Soni Sep 15 '21 at 17:03
But the animation gives fake "push" feedback to the user. A prop `disabledStyle` would be useful. – Cezar Cobuz Apr 28 '22 at 10:31

score 1 · Answer 2 · edited Aug 06 '20 at 21:26

From this Github issue:

The text if the contained button depends on the background color of the button, which is automatically determined based on of the background color is light it dark. Wherever theme is dark or not doesn't affect it.

This is the desired behavior. We don't want to show white text on a light background because you have a dark theme, otherwise the text won't have enough contrast and will be illegible.

Changing the theme to dark changes the disabled button color, as I tested. Apart from this, I don't think its possible if you use react-native-paper. The author has decided to automatically set the color & background color of the button based on something, but his language is unclear.

However, you can give a labelStyle prop the button directly, and you could have a conditional in that style.

 <Button labelStyle={{ color: phoneNumber.length < 5 ? 'red' : 'green' }}>

or,

[buttonDisabled, setButtonDisabled] = useState(false); // put this outside the render function.
<Button disabled={disabled} labelStyle={{ color: disabled ? 'red' : 'green' }}>

Thank you, but this only changes the color of the text in the button. — Mr. Robot, Apr 23 '20 at 17:30
Dunno about this before, this is really helpful since I can style the button background color directly through the `style` prop but never knew how to change the color of the text inside. — Lpaydat, Oct 14 '20 at 21:20

score 0 · Answer 3 · answered Nov 05 '21 at 20:30

I'm may be late but here's my solution:

<Button 
   id="save-phonenumber"
   color="darkColor">
   onClick={doSomething}
   disabled={phoneNumber.length < 5 ? true : false}>
<Button/>

In you Css file you can add

Button#save-phonenumber[disabled] {
  background: "fadedColor"
}

Benefit of using this approach is that you don't additionally need to disable the clicking effect when the button is disabled.

score 0 · Answer 4 · answered Mar 05 '22 at 02:57

If you're caring about light and dark themes at the moment, then you can achieve your goal like this - I would suggest creating your own Button Component on the top of Paper Button.

// extending default Paper Button Component
<PaperButton style={[ props.disabled && { backgroundColor: 'cccccc' } ]}>
  {children}
</PaperButton>


// Using component...
<MyButton disabled={disabled}>
  Click Me!
</MyButton>

score 0 · Answer 5 · answered Jul 20 '23 at 19:44

You can change the color by passing the backgroundColor property to the style prop.

<Button
  mode="contained"
  color={colors.backgroundYellow}
  style={{ backgroundColor: colors.backgroundYellow }}
  loading={isLoading}
  disabled={isLoading}>
    Button
</Button>

How do you set the color of a disabled button using a react-native-paper theme?

5 Answers5