0

I recently upgraded my React Native from 0.15 to 0.18

Now when I run the app, it give the following error.

Invalid prop `backgroundColor` supplied to `StyleSheet mainContainer`.
StyleSheet mainContainer: {
  "justifyContent": "center",
  "alignItems": "center",
  "flexDirection": "row",
  "backgroundColor": "#fffffff",
  "marginBottom": -1
}

What is causing this?

Nimila Hiranya
  • 4,842
  • 10
  • 35
  • 52

2 Answers2

3

The color you specified as background color is incorrect and does not exist. There is one f too many. Either you can change it to:

"backgroundColor": "#ffffff",

Or you can also specify the white background color like this:

"backgroundColor": "white",

Here is an overview of all the supported color formats in React Native. You can also find the list for named colors there. http://facebook.github.io/react-native/docs/colors.html

arthurvi
  • 46
  • 3
  • That was to get Transparency. What should I use for Transparent in Hex? – Nimila Hiranya Feb 24 '16 at 04:15
  • 1
    In theory 50% transparent white in HEX would be `#80FFFFFF`. But this does not seem to work for me. [source](http://stackoverflow.com/questions/5445085/understanding-colors-in-android-6-characters/11019879#11019879). What does work for 50% transparent white is: `color: 'rgba(255, 255, 255, 0.5)'` – arthurvi Feb 24 '16 at 10:38
  • Thank you. 'rgba(255, 255, 255, 0.0)' fixed it. – Nimila Hiranya Feb 25 '16 at 04:45
0

You have seven f characters in your background color rather than six - i.e it is invalid.

Try "backgroundColor": "#ffffff"

Ben Clayton
  • 80,996
  • 26
  • 120
  • 129