Error "undefined is not an object" in React Native App [closed] - node.js

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I am new working with React Native and Expo XDE, I am implementing the PropTypes in the file TaskList.js of type arrayOf but at the time of compiling the application I get an error indicating "undefined is not an object (evaluating 'react3.default.PropTypes.arrayOf ') "and even if I add another PropTypes of type String or another the same thing happens.
How can I solve this problem with the PropTypes?
Error
package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-native-scripts": "1.11.1",
"jest-expo": "25.0.0",
"react-test-renderer": "16.2.0"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"expo": "^25.0.0",
"react": "16.2.0",
"react-native": "0.52.0"
}
}
App.js
import React from 'react';
import { StyleSheet, Text, View, ListView } from 'react-native';
import TaskList from './TaskList';
export default class App extends React.Component {
constructor(props, context){
super(props, context);
this.state = {
todos:[
{
task : "Learn React Native"
},
{
task : "Learn Redux"
},
]
}
}
render() {
return (
<View style={styles.container}>
<TaskList todos={this.state.todos}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
TaskList.js
import React, {Component, PropTypes} from 'react';
import {View, Text, Button, ListView} from 'react-native';
class TaskList extends React.Component {
constructor(props, context){
super(props, context);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(props.todos),
}
}
renderRow =(todo)=>{
return(
<Text>{todo.task}</Text>
)
}
render(){
return(
<View>
<ListView
dataSource={this.state.dataSource}
key={this.props.todos}
renderRow={this.renderRow.bind(this)}
/>
</View>
)
}
}
TaskList.propTypes = {
todos: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
}
export default TaskList;

Answer 1

PropTypes were moved into their separate NPM package (v15+), prop-types and no longer exist on the React package. That's why it is reported as undefined. Install it and import:
import PropTypes from 'prop-types';

Answer 2

You need to add the dependency
npm install --save prop-types
This command install prop-types in your project. Check your package.json file in your project
"dependencies": {
"prop-types": "^15.6.1"
}
And import it on your project where you want to use. by importing following package
import PropTypes from 'prop-types'; // ES6