Failed prop type: Invalid props.style key `outlineColor`
e-aleixandre opened this issue · comments
Every now and then I get this error when interacting with a form:
Warning: Failed prop type: Invalid props.style key `outlineColor` supplied to `ForwardRef(TextInput)`.
Bad object: {
"borderTopColor": "rgba(253,216,216,1.00)",
"borderRightColor": "rgba(253,216,216,1.00)",
"borderBottomColor": "rgba(253,216,216,1.00)",
"borderLeftColor": "rgba(253,216,216,1.00)",
"color": "rgba(23,23,23,1.00)",
"fontFamily": "Inter",
"paddingRight": 16,
"paddingLeft": 16,
"height": 44,
"borderTopLeftRadius": 9,
"borderTopRightRadius": 9,
"borderBottomRightRadius": 9,
"borderBottomLeftRadius": 9,
"borderTopWidth": 1,
"borderRightWidth": 1,
"borderBottomWidth": 1,
"borderLeftWidth": 1,
"backgroundColor": "rgba(255,252,252,1.00)",
"minWidth": 0,
"outlineColor": "rgba(253,216,216,1.00)",
"outlineWidth": 2,
"outlineStyle": "solid",
"borderStyle": "solid",
"fontWeight": "300",
"letterSpacing": 0,
"fontSize": 14
}
Valid keys: [
"alignContent",
"alignItems",
"alignSelf",
"aspectRatio",
"borderBottomWidth",
"borderEndWidth",
"borderLeftWidth",
"borderRightWidth",
"borderStartWidth",
"borderTopWidth",
"borderWidth",
"bottom",
"columnGap",
"direction",
"display",
"end",
"flex",
"flexBasis",
"flexDirection",
"flexGrow",
"flexShrink",
"flexWrap",
"gap",
"height",
"justifyContent",
"left",
"margin",
"marginBlock",
"marginBlockEnd",
"marginBlockStart",
"marginBottom",
"marginEnd",
"marginHorizontal",
"marginInline",
"marginInlineEnd",
"marginInlineStart",
"marginLeft",
"marginRight",
"marginStart",
"marginTop",
"marginVertical",
"maxHeight",
"maxWidth",
"minHeight",
"minWidth",
"overflow",
"padding",
"paddingBlock",
"paddingBlockEnd",
"paddingBlockStart",
"paddingBottom",
"paddingEnd",
"paddingHorizontal",
"paddingInline",
"paddingInlineEnd",
"paddingInlineStart",
"paddingLeft",
"paddingRight",
"paddingStart",
"paddingTop",
"paddingVertical",
"position",
"right",
"rowGap",
"start",
"top",
"width",
"zIndex",
"shadowColor",
"shadowOffset",
"shadowOpacity",
"shadowRadius",
"transform",
"backfaceVisibility",
"backgroundColor",
"borderBottomColor",
"borderBottomEndRadius",
"borderBottomLeftRadius",
"borderBottomRightRadius",
"borderBottomStartRadius",
"borderColor",
"borderCurve",
"borderEndColor",
"borderLeftColor",
"borderRadius",
"borderRightColor",
"borderStartColor",
"borderStyle",
"borderTopColor",
"borderTopEndRadius",
"borderTopLeftRadius",
"borderTopRightRadius",
"borderTopStartRadius",
"elevation",
"opacity",
"pointerEvents",
"color",
"fontFamily",
"fontSize",
"fontStyle",
"fontVariant",
"fontWeight",
"includeFontPadding",
"letterSpacing",
"lineHeight",
"textAlign",
"textAlignVertical",
"textDecorationColor",
"textDecorationLine",
"textDecorationStyle",
"textShadowColor",
"textShadowOffset",
"textShadowRadius",
"textTransform",
"userSelect",
"verticalAlign",
"writingDirection"
]
It doesn't break anything, and in fact the outlineColor seems to be applied (or perhaps it's just the borderColor that's showing). But having the console warning popping up is a bit annoying.
are you using the newest Tamagui version?
yes, latest tamagui version with npm i --force. I know I probably shouldn't do that but I thought you would catch up with the tamagui version far before I need to deploy. If you confirm the warning is caused by the version missmatch I can close the issue and keep working like this until this package gets updated.
I use manypkg in my monorepo to keep up to date. You might should address the issue with Tamagui itself, I am not sure if my package is responsible for this
this seems to be fixed in Tamagui 1.14.4, if not the issue remains in of Tamagui components itself