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!
propTypes = { //// key is the name of the prop and // value is the PropType } export default Count; PropTypes are also objects with a key and a value pair where the 'key' is the name of the prop while the value represents the type or class by which they are defined.
You can generate PropTypes from TypeScript type definitions using babel-plugin-typescript-to-proptypes . When you specify types for your props, the plugin converts those type definitions to PropTypes definitions. It will be compiled accordingly, thereby giving your React application type-checking powers during runtime.
Using PropTypes in React PropTypes is React's internal mechanism for adding type checking to components. React components use a special property named propTypes to set up type checking. When props are passed to a React component, they are checked against the type definitions configured in the propTypes property.
Firstly, npm install / yarn add the prop-types package if you haven't already. Then, add your propTypes (and defaultProps too if required) after the stateless functional component has been defined, before you export it.
React Native now contains ViewPropTypes
, which will replace View.propTypes.style
. Example of usage:
import { ViewPropTypes } from 'react-native'; MyComponent.propTypes = { style: ViewPropTypes.style };
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With