Invalid prop `color` supplied to `Text`

What I did

I upgraded from React Native 0.62.2 to the latest version 0.63.1 by following this helper. After rebuilt and run the app, everything was working as expected except this warning:

Failed prop type: Invalid prop `color` supplied to `Text`.

I found that this warning was triggered on any page importing Button element from react-native-element package. Here is my code:

import {Button} from 'react-native-elements'

<Button
  title="Press Me"
  containerStyle={styles.buttonContainer}
  buttonStyle={styles.buttonStyle}
/>

const styles = StyleSheet.create({
  buttonContainer: {
    alignSelf: 'center',
    position: 'absolute',
    bottom: 50,
  },
  buttonStyle: {
    backgroundColor: '#3282b8',
    width: 231,
  },
})

Expected behavior

The button is shown on the simulator without warning prompt.

Error log

Warning: Failed prop type: Invalid prop `color` supplied to `Text`: hsl(208, 8%, 63%)
Valid color formats are
  - '#f0f' (#rgb)
  - '#f0fc' (#rgba)
  - '#ff00ff' (#rrggbb)
  - '#ff00ff00' (#rrggbbaa)
  - 'rgb(255, 255, 255)'
  - 'rgba(255, 255, 255, 1.0)'
  - 'hsl(360, 100%, 100%)'
  - 'hsla(360, 100%, 100%, 1.0)'
  - 'transparent'
  - 'red'
  - 0xff00ff00 (0xrrggbbaa)

Bad object: {
  "color": {
    "model": "hsl",
    "color": [
      208,
      8,
      63
    ],
    "valpha": 1
  },
  "fontSize": 18,
  "textAlign": "center",
  "paddingTop": 2,
  "paddingBottom": 1
}

Screenshots

My Environment:

software	version
react-native-elements	2.0.4
react-native	0.63.1

[timecatalyst]

I did some digging on this and I think the culprit is the color() method from the color package. It seems to be returning an object instead of a string, which is getting passed to Text and causing the error. Adding .string() to the call chains on lines 231 and 235 in Button.js seems to have fixed it for me locally:

226   disabled: (type, theme) => ({
227     ...conditionalStyle(type === 'solid', {
228       backgroundColor: theme.colors.disabled,
229     }),
230     ...conditionalStyle(type === 'outline', {
231        borderColor: color(theme.colors.disabled).darken(0.3).string(),   <---
232      }),
233   }),
234   disabledTitle: (theme) => ({
235     color: color(theme.colors.disabled).darken(0.3).string(),  <---
236   }),

Not sure how many other components may suffer from the same issue though. Fortunately though, it seems like a relatively easy fix.

[flyingcircle]

@timecatalyst awesome! Thank you very much for the PR. I’ll review it soon.