Modal.propTypes no longer supported in React Native 0.58

[martin-nebel]

My components using ModalWrapper stopped working properly after updating to RN 0.58.x, because the Modal component no longer supports propTypes as per facebook/react-native#21342.

I'm not sure yet what the proper/best solution is to this, but as a temporary workaround to get my app's functionality working again, I included the Modal.propTypes values as a constant at the top of the component:

const modalPropTypes = {
  animationType: PropTypes.oneOf(['none', 'slide', 'fade']),
  presentationStyle: PropTypes.oneOf([
    'fullScreen',
    'pageSheet',
    'formSheet',
    'overFullScreen',
  ]),
  transparent: PropTypes.bool,
  hardwareAccelerated: PropTypes.bool,
  visible: PropTypes.bool,
  onRequestClose:
    Platform.isTV || Platform.OS === 'android'
      ? PropTypes.func.isRequired
      : PropTypes.func,
  onShow: PropTypes.func,
  onDismiss: PropTypes.func,
  supportedOrientations: PropTypes.arrayOf(
    PropTypes.oneOf([
      'portrait',
      'portrait-upside-down',
      'landscape',
      'landscape-left',
      'landscape-right',
    ]),
  ),
  onOrientationChange: PropTypes.func,
};

I then replaced the two occurrences of Modal.propTypes with modalPropTypes, after which it started working as expected.

[makenova]

@martin-nebel thank you!
I created a post install script to make this a bit less painful. It's only been tested on a Mac but it should work as long as you have node.

If the following script is added as a postinstall script, then running npm i or npm run postinstall will add @martin-nebel's workaround for you.

/*
  This script moves the depricated Modal.propTypes into the modal wrapper code to make it compatible with RN 0.58
  This is a temporary workaround until the library is updated.

  https://github.com/raynor85/react-native-modal-wrapper/issues/14#issue-407824066
*/


const fs = require('fs');
const path = require('path');

const modalWrapperIndexPath = path.resolve(__dirname, '../node_modules/react-native-modal-wrapper/index.js');
let file = fs.readFileSync(modalWrapperIndexPath, { encoding: 'utf8' });

if (!file.includes('modalPropTypes')) {
    const proptypesImport = 'import PropTypes from \'prop-types\';';
    const modalPropTypes = `import PropTypes from 'prop-types';

  const modalPropTypes = {
    animationType: PropTypes.oneOf(['none', 'slide', 'fade']),
    presentationStyle: PropTypes.oneOf([
      'fullScreen',
      'pageSheet',
      'formSheet',
      'overFullScreen',
    ]),
    transparent: PropTypes.bool,
    hardwareAccelerated: PropTypes.bool,
    visible: PropTypes.bool,
    onRequestClose:
      Platform.isTV || Platform.OS === 'android'
        ? PropTypes.func.isRequired
        : PropTypes.func,
    onShow: PropTypes.func,
    onDismiss: PropTypes.func,
    supportedOrientations: PropTypes.arrayOf(
      PropTypes.oneOf([
        'portrait',
        'portrait-upside-down',
        'landscape',
        'landscape-left',
        'landscape-right',
      ]),
    ),
    onOrientationChange: PropTypes.func,
  };`;

    file = file.replace(proptypesImport, modalPropTypes);
    file = file.replace(/Modal.propTypes/g, 'modalPropTypes');

    fs.writeFileSync(modalWrapperIndexPath, file);
}

[kg-currenxie]

Broke my app as well after upgrade... Fix? D:

[olinations]

Broke mine too and the suggested fixes do not work either.

[raynor85]

@martin-nebel thank you for reporting this. I have created a new release with your suggested changes https://github.com/raynor85/react-native-modal-wrapper/releases/tag/v3.1.1