Validate Style property type in React Native

Question

I have an component that takes a property which contains the syling for a sub-component. I would like to ensure propTypes correctly validates it's type. I can from the React Native code that it has a ViewStylePropTypes module that provides this, however I cannot seem to find where/if it is exposed.

What I want to know is, what is the correct way of validating this without reinventing the wheel?

Answer 1

To enforce styling restrictions for PropTypes just use the following, dependent on what type of component you are rendering:

MyComponent.propTypes = {
  /**
  * Style to be applied to the containing <View>
  */
  buttonStyle: View.propTypes.style,
  /**
  * Style to be applied to the inner <Text>
  */
  textStyle: Text.propTypes.style
}

For example Text.propTypes.style will show a YellowBox warning when border is defined in thetextStyle property.

Note: This will also result in the regular Failed prop type supplied to Text... warning that occurs when rendering Text inside a component with an invalid style attribute. The propTypes validation allows your custom component to also validate this at the same time, giving you better granularity.