How to declare style in propTypes?

react style prop-types
create-react-app proptypes
proptypes date
static proptypes
proptypes children
proptypes map
proptypes undefined
proptypes json

With the forbid-prop-types rule enabled, eslint forbids me from using style: React.PropTypes.object, and using shape is suggested.

But is it really necessary to define all the available properties there for this purpose like this?

DEMO.propTypes = {
    style: React.PropTypes.shape({
        color: React.PropTypes.string,
        fontSize: React.PropTypes.number,

Too much definition code!

React Native now contains ViewPropTypes, which will replace Example of usage:

import { ViewPropTypes } from 'react-native';

MyComponent.propTypes = {

`styles` prop validation · Issue #33 · airbnb/react-with-styles · GitHub, I am not sure about react/forbid-prop-types rule and its setting, which is define new prop type here const stylesProp = ; // check for existing  With the forbid-prop-types rule enabled, eslint forbids me from using style: React.PropTypes.object, and using shape is suggested. But is it really necessary to define all the available properties there for this purpose like this? DEMO.propTypes = { style: React.PropTypes.shape({ color: React.PropTy


It would look like this:

DEMO.propTypes = {

Props and PropTypes in React, React encourages developers to build by breaking a UI up into components. This means there will always be a need to pass data from one  Ensure that you are declaring the style prop only one time. Even if I need more code to understand where is the problem I have decided to create a jsfiddle for you. As you can see the Hello class renders the InputTextWithValidation with the style prop which contains an object:

One possibility is to use the react-style-proptype package like so:

import stylePropType from 'react-style-proptype';

MyComponent.propTypes = {
  style: stylePropType,

Type Checking and React Prop Types, to props that are being passed into components. The HelloWorld PropType is set to string. If a wrong prop is passed into the component it will give an error or warning stating so. # PropTypes. PropTypes ensure that the right type of props is passed to a component — and, conversely, that the receiving component is receiving the right type of props. We can think about them like a football quarterback passing the ball to a receiver. The quarterback only wants his players to receive the ball.

Use the simple code as below.

PropTypes.oneOfType([PropTypes.object, PropTypes.array])

So, you can apply to this your code.

DEMO.propTypes = {
    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),

Tested in RN > 0.57.

Why you should use PropTypes in React Native, native components, to avoid unexpected glitches to the user. Comment déclarer le style dans les propTypes? ne plaise-prop-types la règle est activée, eslint m'interdit d'utiliser style: React.PropTypes.object , et à l'aide de shape est suggéré. mais est-il vraiment nécessaire de définir toutes les propriétés disponibles à cet effet?

Use View.propTypes has been deprecated

What is PropTypes and how to use it in React, is a library that helps in minimizing this problem in React by checking the types passed in the props object against a specification we set beforehand and to raise a warning if the types passed don't match the types expected. How to declare React PropTypes XOR. Ask Question Asked 4 years, 1 month ago. It is working: the user must declare either with or widthOffset and minWidth. But I

react-style-proptype, Need private packages and team management tools?Check out npm Teams ». react-style-proptype. 3.2.2 • Public • Published 2 years ago. For this to work with TypeScript, you should cast the object to IProps by appending ' as IProps' just before the semicolon. The provided link no longer discusses defaultProps. Thanks @WoodenKitty, been trying to find the docs on that for a while. FWIW - Airbnb's stlyeguide follows this pattern as well.

Style, Style. React Native doesn't implement CSS but instead relies on JavaScript to let you style in order to make sure only styles are being passed. With PropTypes.element you can specify that only a single child can be passed to a component as children. import PropTypes from 'prop-types' ; class MyComponent extends React . Component { render ( ) { // This must be exactly one element or it will warn. const children = this . props . children ; return ( < div > { children } </ div > ) ; } } MyComponent . propTypes = { children : PropTypes . element . isRequired } ;

Typechecking With PropTypes – React, import PropTypes from 'prop-types'; MyComponent.propTypes = { // You can declare that a prop is a specific JS type. By default, these // are all optional. 5.5 Function Prototypes. A function prototype is a function declaration that specifies the data types of its arguments in the parameter list. The compiler uses the information in a function prototype to ensure that the corresponding function definition and all corresponding function declarations and calls within the scope of the prototype contain the correct number of arguments or parameters

  • Future readers, let me save you some time, see the answer by @David Weldon
  • Have you seen an equivalent for Text? TextPropTypes doesn't seem to exist in the React Native codebase View.propTypes no longer exists at run-time in release mode, am not sure yet whether Text.propTypes does hthough.
  • @BenClayton I have not. The RN documentation for ViewPropTypes isn’t available atm either.
  • The question is tagged reactjs, is this react-native only?
  • This is react-native only, but it's definitely the best answer for react-native :)
  • this is now deprecated
  • Carefull! View.propTypes will be stripped out in release builds so you will have an error: style of undefined!! (Same for Text)
  • This solution is outdated. Try with the answer of @NiFi. That worked for me
  • Unfortunately this package throws warnings with some RN style settings like paddingHorizontal.
  • ViewPropTypes is no longer in the docs. Deprecated I presume.
  • This allows non-style keys in the object.
  • Yeah, this is quick and dirty.
  • This allows non-style keys in the object.
  • This also doesn't let you use, for example, left: 0 as a number which would instead need to be left: '0px'