Type checking with PropTypes

React comes with support for basic type checking. It does not require you to upgrade to TypeScript or another, more advanced solution. To achieve type checking straight away, you can use the prop-types library.

Let's provide type definitions for our HelloBox component from Chapter 1/Example 12:

import PropTypes from 'prop-types';

// ...

HelloBox.propTypes = {
 isExpanded: PropTypes.bool.isRequired,
 expandOrCollapse: PropTypes.func.isRequired,
 containerStyles: PropTypes.object,
 expandedTextStyles: PropTypes.object
};

This way, we force isExpanded to be of the Boolean type (true or false), and expandOrCollapse to be a function. We also let React know about two optional style props (containerStyles and expandedTextStyles). If styles are not provided, we simply return the default styles.

There is also a neat feature to avoid explicit if in the markup—default props. Check it out:

HelloBox.defaultProps = {
    containerStyles: styles.container,
    expandedTextStyles: styles.text
};

Cool! Now, if containerStyles or expandedTextStyles are be null, then they will get a respective default value. However, if you run your application now, you will notice a little warning:

Warning: Failed prop type: Invalid prop `containerStyles` of type `number` supplied to `HelloBox`, expected `object`.

You may be freaking out right now, but this is correct. This is a nice optimization that has been made by the React Native team that you may not be aware of. It caches the stylesheet and simply sends the cached ID. The following line is returning the number and ID of a stylesheet that represents the styles object that was passed:

styles.container

Hence, we need to adapt our type definitions:

HelloBox.propTypes = {
    isExpanded: PropTypes.bool.isRequired,
    expandOrCollapse: PropTypes.func.isRequired,
    containerStyles: PropTypes.oneOfType([
        PropTypes.object,
        PropTypes.number
    ]),
    expandedTextStyles: PropTypes.oneOfType([
        PropTypes.object,
        PropTypes.number
    ])
};

Now, you can remove explicit if statements in the component markup. It should look more or less like this:

export const HelloBox = ({
    isExpanded,
    expandOrCollapse,
    containerStyles,
    expandedTextStyles
}) => (
    <View style={containerStyles}>
        <HelloText onPress={() => expandOrCollapse()}>...</HelloText>
        <HelloText onPress={() => expandOrCollapse()}>...</HelloText>
        {
            isExpanded &&
            <HelloText style={expandedTextStyles}>
                ...
            </HelloText>
        }
    </View>
);

Good job! We have defined default props and type checks for our component. Please check the full working Example 2 in the src/chapter 2 directory for more details.