CODEWITHSUNDEEP
react-nativeeslint
Howard
Howard

Reputation: 4604

How to declare style in propTypes?

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!

Upvotes: 73

Views: 49609

Answers (11)

Samueljh1
Samueljh1

Reputation: 187

For React Native, I use ViewProps['style']

E.g.:

export type MyComponentProps = {
  style?: ViewProps['style'];
  ...
};

Upvotes: 0

louielyl
louielyl

Reputation: 1042

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.

Upvotes: 3

djsdev
djsdev

Reputation: 136

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.

Upvotes: 0

user13594285
user13594285

Reputation:

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.

Upvotes: 0

Vivek
Vivek

Reputation: 4886

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.

Upvotes: 4

Jeff Gu Kang
Jeff Gu Kang

Reputation: 4879

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.

Upvotes: 16

Jalal
Jalal

Reputation: 3624

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

Upvotes: 0

Matt Stow
Matt Stow

Reputation: 6379

Use ViewPropTypes.style. View.propTypes has been deprecated

Upvotes: 4

NiFi
NiFi

Reputation: 2458

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

import { ViewPropTypes } from 'react-native';

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

Upvotes: 76

tiagob
tiagob

Reputation: 1107

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

Upvotes: 38

David Weldon
David Weldon

Reputation: 64312

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

import stylePropType from 'react-style-proptype';

MyComponent.propTypes = {
  style: stylePropType,
};

Upvotes: 21

Related Questions