React Native - "Cannot read property 'bool' of undefined" from PropTypes.bool

Question

I am trying to use a node package for a react native multi slider that I got from https://github.com/ptomasroos/react-native-multi-slider, but it is giving me the error "Cannot read property 'bool' of undefined." When I traced back to where this error was coming from, it arises from the line PropTypes.bool in the file....

'use strict';

var React = require('react');
var ReactNative = require('react-native');

var {
  PropTypes
} = React;
var {
  View
} = ReactNative;

var BasicMarker = React.createClass({

  propTypes: {
    pressed: PropTypes.bool,
    pressedMarkerStyle: View.propTypes.style,
    markerStyle: View.propTypes.style
  },

  render: function () {
    return (
      <View
        style={[this.props.markerStyle, this.props.pressed && this.props.pressedMarkerStyle]}
      />
    );
  }
});

var mockProps = {
  values: [0],
  onValuesChangeStart: function () {
    console.log('press started');
  },
  onValuesChange: function (values) {
    console.log('changing', values);
  },
  onValuesChangeFinish: function (values) {
    console.log('changed', values);
  },
  step: 1,
  min:0,
  max:10,
  selectedStyle: {
    backgroundColor: 'blue'
  },
  unselectedStyle: {
    backgroundColor: 'grey'
  },
  containerStyle: {
    height:30,
  },
  trackStyle: {
    height:7,
    borderRadius: 3.5,
  },
  touchDimensions: {
    height: 30,
    width: 30,
    borderRadius: 15,
    slipDisplacement: 30,
  },
  markerStyle: {
    height:30,
    width: 30,
    borderRadius: 15,
    backgroundColor:'#E8E8E8',
    borderWidth: 0.5,
    borderColor: 'grey',
  },
  customMarker: BasicMarker,
  pressedMarkerStyle: {
    backgroundColor:'#D3D3D3',
  },
  sliderLength: 280
};

module.exports = mockProps;

I read somewhere about needing to specifically install prop types when using newer versions of react native, so I ran

npm install --save prop-types

from the root of my project and added the line of code

var PropTypes = require('prop-types');

at the top of the file in place of the previous definition of PropTypes, but this did not solve my problem. It then errored on the line

pressedMarkerStyle: View.propTypes.style

saying the propTypes was undefined. Any ideas of how I should go about this?

Answer 1

You can fix this issue by first modifying import like this:

var React = require('react');
var { ViewPropTypes } = require('react-native');
var PropTypes = require('prop-types');

and then use it like:

propTypes: {
   pressed: PropTypes.bool,
   pressedMarkerStyle: ViewPropTypes.style,
   markerStyle: ViewPropTypes.style
},