CODEWITHSUNDEEP
react-nativereact-native-ios
Michael
Michael

Reputation: 621

React Native: `undefined is not an object (evaluating '_react2.PropTypes.string')`

I've recently upgraded react-native

"react-native": "^0.50.4",

and react

"react": "^16.2.0",

I'm using mapbox additionally along with FBSDK, React-Native-Router-Flux, etc and I'm getting the following error

undefined is not an object (evaluating '_react2.PropTypes.string')

My package.json is as follows:

{
  "name": "clustr",
  "version": "0.9.0",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "remotedev": "remotedev --hostname=localhost --port=8000",
    "flow": "flow"
  },
  "dependencies": {
    "@mapbox/react-native-mapbox-gl": "^6.0.1",
    "fuzzysearch": "^1.0.3",
    "haversine": "^1.1.0",
    "lodash": "^4.17.4",
    "moment": "^2.19.3",
    "moment-business": "^3.0.1",
    "prop-types": "^15.6.0",
    "querystring": "^0.2.0",
    "react": "^16.2.0",
    "react-native": "^0.50.4",
    "react-native-branch": "^2.1.1",
    "react-native-camera": "^0.10.0",
    "react-native-device-info": "^0.10.2",
    "react-native-drawer-layout": "^1.3.0",
    "react-native-fbsdk": "^0.6.3",
    "react-native-geocoder": "^0.4.8",
    "react-native-hyperlink": "0.0.10",
    "react-native-i18n": "^1.0.0",
    "react-native-loading-spinner-overlay": "^0.5.2",
    "react-native-maps": "^0.17.1",
    "react-native-modalbox": "^1.3.8",
    "react-native-page-control": "^1.1.1",
    "react-native-qrcode": "^0.2.6",
    "react-native-qrcode-scanner": "0.0.22",
    "react-native-radio-buttons": "^0.14.0",
    "react-native-router-flux": "3.38.0",
    "react-native-swipe-gestures": "^1.0.2",
    "react-native-vector-icons": "^4.4.2",
    "react-redux": "^5.0.4",
    "redux": "^3.6.0",
    "redux-form": "^6.6.3",
    "redux-form-material-ui": "^4.3.1",
    "redux-saga": "^0.15.3",
    "remote-redux-devtools": "^0.5.7",
    "tipsi-stripe": "^3.9.1",
    "url-parse": "^1.1.9"
  },
  "devDependencies": {
    "babel-plugin-module-resolver": "^2.7.0",
    "flow-bin": "^0.45.0",
    "remotedev-server": "0.2.2"
  },
  "assets": [
    "./assets/fonts"
  ]
}

With the upgrade I've swapped over to using prop-types as follows:

import React from 'react';
import Text from '../generic/CText';
import {Platform, TouchableOpacity, View, Image} from 'react-native';
import PropTypes from 'prop-types';


TitleBar.propTypes = {
    title: PropTypes.string
};

export default TitleBar;

And so on, this is consistent across all of my components.

Thanks very much for your help!

Upvotes: 1

Views: 2723

Answers (1)

Michael
Michael

Reputation: 621

Using react-codemon, run on your projects directory

jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js myapp/

This will resolve updating proptypes for your source code and any node modules.

Re-installing node modules will require running the command again it seems.

Please follow instructions over at https://github.com/reactjs/react-codemod but essentially once you've installed jscodeshift, and you've downloaded the react-codemod files as above for the various commands such as transforming React.propTypes to PropTypes and so on.

myapp/ here corresponds to my entire application project directory so the entire react-native project.

Secondly, consider the project dependencies you're using. For example in my case I was using react-native-router-flux at version 0.38.0, the app would work in debug mode, but crash in release. I attempted to upgrade to the latest beta version of 4.0.0-beta.24 and the problem was resolved.

Upvotes: 1

Related Questions