Failed prop type: Invalid props.style key `id` supplied to `View`.

[kelvinlawson]

I'm seeing the following warning when using react-native-theming:

Warning: Failed prop type: Invalid props.style key `id` supplied to `View`.
Bad object: {
  "id": 1,
  "marginVertical": 4,
  "opacity": 1
}
Valid keys: [
  "display",
  "width",
  "height",
  "start",
  "end",
  "top",
  "left",
  "right",
  "bottom",
  "minWidth",
  "maxWidth",
  "minHeight",
  "maxHeight",
  "margin",
  "marginVertical",
  "marginHorizontal",
  "marginTop",
  "marginBottom",
  "marginLeft",
  "marginRight",
  "marginStart",
  "marginEnd",
  "padding",
  "paddingVertical",
  "paddingHorizontal",
  "paddingTop",
  "paddingBottom",
  "paddingLeft",
  "paddingRight",
  "paddingStart",
  "paddingEnd",
  "borderWidth",
  "borderTopWidth",
  "borderStartWidth",
  "borderEndWidth",
  "borderRightWidth",
  "borderBottomWidth",
  "borderLeftWidth",
  "position",
  "flexDirection",
  "flexWrap",
  "justifyContent",
  "alignItems",
  "alignSelf",
  "alignContent",
  "overflow",
  "flex",
  "flexGrow",
  "flexShrink",
  "flexBasis",
  "aspectRatio",
  "zIndex",
  "direction",
  "shadowColor",
  "shadowOffset",
  "shadowOpacity",
  "shadowRadius",
  "transform",
  "transformMatrix",
  "decomposedMatrix",
  "scaleX",
  "scaleY",
  "rotation",
  "translateX",
  "translateY",
  "backfaceVisibility",
  "backgroundColor",
  "borderColor",
  "borderTopColor",
  "borderRightColor",
  "borderBottomColor",
  "borderLeftColor",
  "borderStartColor",
  "borderEndColor",
  "borderRadius",
  "borderTopLeftRadius",
  "borderTopRightRadius",
  "borderTopStartRadius",
  "borderTopEndRadius",
  "borderBottomLeftRadius",
  "borderBottomRightRadius",
  "borderBottomStartRadius",
  "borderBottomEndRadius",
  "borderStyle",
  "opacity",
  "elevation"
]
    in View (at createAnimatedComponent.js:134)
    in AnimatedComponent (at TouchableOpacity.js:245)

This only happens when I switch from a real colour to an "@" colour:

module.exports = createStyle({
  button: {
    backgroundColor: "@themeButton",
    borderColor: "@themeButton",
    borderWidth: 1,
    borderRadius: 4,
    marginVertical: 10,
    paddingHorizontal: 16,
    alignSelf: "stretch",
    justifyContent: "center"
  }});

[shukerullah]

You need View from Theme, for example <Theme.View {...}>...</Theme.View>

[Morriz]

Really? It does not support styles all the way? I just refactored to use your lib the last 3 hours...only to find it breaks...shame...maybe you can change your readme to warn upfront that it will break any regular styles={styles... code, and it ONLY works with your wrapped components.