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?

Answer 1

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>