Warning when setting text style to contentStyle in RkButton

[ksairi]

Issue type

I'm submitting a ...

• bug report
• feature request

Issue description

Current behavior:
I'm getting a warning when I'm setting the style to RkButton. I'm setting color, fontSize and fontFamily to contentStyle which I think is correct and getting a warning of invalidad prop (color) but it will complain about the others if I comment the first one. The style is applied though!
This wasn't happening until I upgraded to the last version of the library.

Literal warning:
Warning: Failed prop type: Invalid props.contentStyle key color supplied to RkButton.

Bad object:{
"color":"white",
"fontSize":19,
"fontFamily":"lato-regular"
}

Expected behavior:
No warnings at all

Related code:

import React from 'react';
import { RkButton } from 'react-native-ui-kitten';

const styles = {
	buttonStyle: {
		backgroundColor: '#6b35e3',
		flex: 1
	},
	buttonContent: {
		color: 'white',
		fontSize: 19,
		fontFamily: 'lato-regular'
	}
};

export default class GenericButton extends React.PureComponent {
	render() {
		var shapeType = 'rounded';
		if (this.props.shapeType) {
			shapeType = this.props.shapeType;
		}
		return (
			<RkButton
				rkType={shapeType}
				style={[styles.buttonStyle, this.props.style]}
				contentStyle={[styles.buttonContent, this.props.contentStyle]}
				onPress={this.props.onPress}>
				{this.props.text}
			</RkButton>
		);
	}
}

Other information:

I'm using the expo client for debugging.
OS, device, package version

	"dependencies": {
		"expo": "31.0.0",,
		"react": "16.5.0",
		"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz"
		"react-native-ui-kitten": "3.1.2"
}

[artyorsh]

Hi @ksairi
Thanks for using our framework and for bug report!

I've tried running your code, but not sure I'm using the same environment because for now we're working on new version of ui-kitten. Btw, I got no warning.
I suppose this is caused by RkButton contentStyle propType definition. Can you please try changing it to contentStyle: RkText.propTypes.style right in your installed node_modules and describe here if something changed?
If it works correctly, feel free to create a PR and a become contributor :) Thanks!

[ksairi]

Hi @artyorsh. I tried that and is working. I will submit the PR but I don't understand why the warning if the proptype of RkButton contentStyle was style and the properties color, fontSize, fontFamily belong to that object.

[copleykj]

I'm getting the same warning on my project..

[21:36:37] Warning: Failed prop type: Invalid props.contentStyle key `fontWeight` supplied to `RkButton`.
Bad object: {
  "fontWeight": "bold"
}
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"
]

Can confirm that changing contentStyle to RkText.propTypes.style fixes the warning.

[artyorsh]

@ksairi,
The bug was that the prototype of described style belongs to style of View, so that you can't apply fontSize to it