Styling issue after upgrading React-Native

Question

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?

Answer 1

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

Answer 2

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

Try "backgroundColor": "#ffffff"