How to declare style in propTypes?

Question

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!

Answer 1

React Native now contains ViewPropTypes, which will replace View.propTypes.style. Example of usage:

import { ViewPropTypes } from 'react-native';

MyComponent.propTypes = {
  style: ViewPropTypes.style
};

Answer 2

View.propTypes.style

or

Text.propTypes.style

It would look like this:

DEMO.propTypes = {
    style: Text.propTypes.style,
    ...
};

https://facebook.github.io/react-native/releases/0.21/docs/style.html#pass-styles-around

Answer 3

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

import stylePropType from 'react-style-proptype';

MyComponent.propTypes = {
  style: stylePropType,
};

Answer 4

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.

Answer 5

Use ViewPropTypes.style. View.propTypes has been deprecated

Answer 6

Quick and dirty / Hack-ish

Extending @jalal246 answer:

PropTypes.objectOf(PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
]))

This can be used for web styles (refer other answers for React-native) without having to use other package for it.

Answer 7

As some of the former answers are depricated, so I will share my solution here.

In fact, you could simply import the original types, such as ViewStyle, TextStyle, ImageStyle, FlexStyle & ImageStyle from react-native.

For example:

import React from 'react';
import { TouchableOpacity, ViewStyle } from 'react-native';

interface IProps {
    style?: ViewStyle
}

<TouchableOpacity style={[props.style]}>
    ...
</TouchableOpacity>

Remarks: If you are using 3-rd party libraries that supports TypeScript, there should be relevant style property as well, just like in the example above.

Answer 8

I usually use PropTypes.objectOf(PropTypes.string) no need to define all css style.

Answer 9

There are two possibilities. The first one, which I prefer, is to use ViewPropTypes from react. The other one, using PropTypes, is:

Component.propTypes = {
    textStyles: PropTypes.oneOfType([
        PropTypes.object,
        PropTypes.number
    ])
}

You may ask "why PropTypes.number if a style is just an object?" the answer is that the react native team made a little optimization which caches the stylesheet and simply sends the cached ID.

Answer 10

There's an easy way with JSDoc.

/**
   * @typedef Props
   * @prop {React.CSSProperties} style
   */

/**
 * some component
 * @augments {Component<Props, State>}
 */

 export default class SomeRandomClass extends React.Component { }

Adding above JSDoc to your react component will enable VS Code to suggest all possible CSS properties.