React Native get problems after updating react native elements library

Question

I'm working on a mobile app with React Native. I tried to update react native elements package version My old version was :

"react-native-elements": "^1.1.0",

My current version is : 1.2.0

When i restart expo and lunch the app i get a lot of errors :

 Warning: Failed prop type: Invalid prop `color` supplied to `Button`: [object Object]
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": "rgb",
    "color": [
      35,
      79,
      103
    ],
    "valpha": 1
  },
  "fontFamily": "PTSansBold",
  "fontSize": 25,
  "textTransform": "uppercase"
}
    in Button (at withTheme.js:40)
    in ThemedComponent (at withTheme.js:57)
    in ForwardRef(Themed.Button) (at Login.js:352)
    in RCTView (at View.js:45)
    in View (at Login.js:293)
    in RCTView (at View.js:45)
    in View (at ScrollView.js:976)
    in RCTScrollView (at ScrollView.js:1115)
    in ScrollView (at Login.js:288)
    in RCTView (at View.js:45)
    in View (at KeyboardAvoidingView.js:200)
    in KeyboardAvoidingView (at Login.js:287)
    in RCTView (at View.js:45)
    in View (at SafeAreaView.js:37)
    in SafeAreaView (at Login.js:286)
    in RCTView (at View.js:45)
    in View (at Login.js:285)
    in Login (created by ConnectFunction)
    in ConnectFunction (at SceneView.js:9)
    in SceneView (at SwitchView.js:12)
    in SwitchView (at createNavigator.js:80)
    in Navigator (at SceneView.js:9)
    in SceneView (at SwitchView.js:12)
    in SwitchView (at createNavigator.js:80)
    in Navigator (at createAppContainer.js:430)
    in NavigationContainer (at App.js:154)
    in Root (at App.js:160)
    in FormattedProvider (at App.js:159)
    in Provider (at App.js:158)
    in App (at withExpoRoot.js:20)
    in RootErrorBoundary (at withExpoRoot.js:19)
    in ExpoRootComponent (at renderApplication.js:35)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:98)
    in ChildrenWrapper (at wrapRootComponent.js:9)
    in _class (at wrapRootComponent.js:8)
    in Root (at AppContainer.js:112)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:115)
    in AppContainer (at renderApplication.js:34)

I tried to get the old version of react native elements but i still get those errors

My colors component is :

import color from 'color';

/**
 * Palette generated by Material Palette
 * Primary : http://www.materialpalette.com/blue/indigo
 * Error: http://www.materialpalette.com/red/red
*/


export default {
  palette: {
    dark: {
      main: color('black'),
    },
    error: {
      accent: color('#FF5252'),
      contrastText: color('#FFFFFF'),
      dark: color('#D32F2F'),
      light: color('#FFCDD2'),
      main: color('#F44336'),
    },
    mandate: {
      area: color('#cbe7af'),
      price: color('#f8cb85'),
      rooms: color('#cdded1'),
    },
    primary: {
      accent: color('#b5d6e7'),
      contrastText: color('#FFFFFF'),
      dark: color('#607D8B'),
      darkGrey: color('#b9b9b9'),
      grey: color('#e8e6df'),
      light: color('#CFD8DC'),
      main: color('#234f67'),
      red: color('#d9534f'),
      sentIcon: color('#9E9E9E'),
    },
    success: {
      accent: color('#607D8B'),
      contrastText: color('#FFFFFF'),
      dark: color('#388E3C'),
      light: color('#C8E6C9'),
      main: color('#4CAF50'),
    },
    transparent: 'transparent',
    white: {
      dark: color('#e9e8e4'),
      main: color('white'),
    },
  },
};

and i use color plugin for react native :

"color": "^3.1.2",

Answer 1

You're supplying the button color as an array:

"color": [35, 79, 103]

The Button control expects the color prop to be in CSS format, however. You could do this:

"color: "rgb(35, 79, 103)"

Other valid color formats are listed in the error message you are receiving.