Warning: Failed prop type: Invalid props.style key fontSize supplied to View

[monchopena]

Warning: Failed prop type: Invalid props.style key fontSize supplied to View

• bug report
• feature request

Issue description

After:

react-native run-android

If I'm going to Auth section and select any item I obtain this warning:

13:10:25: Warning: Failed prop type: Invalid props.style key `fontSize` supplied to `View`.
Bad object: {
  "flexDirection": "row",
  "borderBottomWidth": 1,
  "borderBottomColor": "#0000003B",
  "marginVertical": 9,
  "backgroundColor": "#ffffff",
  "borderRadius": 100,
  "borderWidth": 1,
  "borderColor": "#0000003B",
  "fontSize": 17.63265306122449,
  "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)
    in TouchableOpacity (at rkTextInput.js:184)
    in RkTextInput (at login1.js:64)
    in RCTView (at View.js:112)
    in View (at login1.js:52)
...

Other information:

**OS, device, application version **

Android.

[malashkevich]

Thank you @monchopena. It's a known issue.
It's related to react-native-ui-kitten.
akveo/react-native-ui-kitten/issues/92
We plan to handle this in next versions of our lib.
Closing this in favor of issue mentioned above.

[monchopena]

Thank you!

[zoozalp]

I've been waiting for this fix quite while. Do you have any workarounds for this in the meantime?

[malashkevich]

@zoozalp, this warning is showin only in debug mode. So it shouldn’t be a blocker for you.
At the moment we don’t have enough time to implement this feature. But it would be nice if you will submit PR for this!

[zoozalp]

Only workaround I could think of was to make the yellow box ignore this particular warning. I've just created a pull request for that in the sample app.

If you could direct me a little more, I would gladly contribute to fix it for good in the code.

[malashkevich]

@zoozalp That would be great!
One of option I could think - reuse already existed validation process in react-native.
As long as it can detect that we are passing some incorrect style options - we should be able to use same checks in order to prevent passing inapplicable styles to the component.
https://github.com/facebook/react-native/blob/26684cf3adf4094eb6c405d345a75bf8c7c0bf88/Libraries/StyleSheet/StyleSheetValidation.js
Probably code here should help.

Ideally, before setting styles, we should check what styles component can apply. And then pass only acceptable styles. That means we need somehow autodetect (idk how at the moment) or just declare in each component what style properties are acceptable.

[numediaweb]

Thank you guys for the great work.
This issue is really annoying while on development as it comes, again and again, making console debugging a pain :(
@malashkevich When do you guys plan some workaround? unfortunately, I am new to React Native so... I couldn't help on PR :(

[gatesyp]

Any progress on this?

[malashkevich]

Hello @gatesyp.
We are now working on a completely new version of react-native-ui-kitten, where this issue also will be fixed. So as for today, we don't have a fix for this bug.

As temporary "fix" you can disable this warning:

console.ignoredYellowBox = ['Failed prop type: Invalid props.style'];

[knoxgon]

2 years and still no progress???

[georgetudor93]

i feel you bro

2 years and still no progress???

[danielstern]

Getting this bug deep into 2020... maybe we oughta reopen this one?

[tunaSandwich]

I may have found a workaround. This is working for me:

import {ViewPropTypes} from 'react-native';

const stylePropType = shape({
  ...ViewPropTypes.style,
  fontSize: number,
});