CODEWITHSUNDEEP
reactjsreact-nativereact-proptypes
Rafael Zerbini
Rafael Zerbini

Reputation: 141

How to check propTypes in child component?

So i have a two components, and trying to validate prop-types gives an error:

TypeError: TypeError: Cannot read property 'style' of undefined

This is my HomeScreen component:

import React, { Component } from 'react';
import {
  Image,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from 'react-native';

import { RobotoText } from '../components/StyledText';

export default class HomeScreen extends Component {
  render() {
    const { container } = styles;
    return (
      <View style={container}>
        <RobotoText style={{ color: 'green' }}> Test </RobotoText>
      </View>
    );
  }
}

And the StyledText file where the error happens: 

import React from 'react';
import { Text } from 'react-native';
import PropTypes from 'prop-types';

const MonoText = props => {
  const { style } = props;

  return <Text {...props} style={[style, { fontFamily: 'space-mono' }]} />;
};

const RobotoText = props => {
  const { style } = props;

  return <Text {...props} style={[style, { fontFamily: 'Roboto' }]} />;
};

MonoText.defaultProps = {
  style: { color: 'black' }
};

MonoText.propTypes = {
  style: Text.PropTypes.style
};

RobotoText.defaultProps = {
  style: { color: 'black' }
};

RobotoText.propTypes = {
  style: Text.PropTypes.style
};

export { MonoText, RobotoText };

What would be the correct way the define this propTypes?

Upvotes: 0

Views: 1095

Answers (1)

menor
menor

Reputation: 71

You need to define the propTypes using the PropTypes library you imported, not the Text object.

Also style is not a valid proptype, what you are passing is actually an object

So

MonoText.propTypes = {
  style: PropTypes.object
};

RobotoText.propTypes = {
  style: PropTypes.object
};

Here's a link to the docs in case you want to know more https://reactjs.org/docs/typechecking-with-proptypes.html

Upvotes: 1

Related Questions